A Figma design and a Shopify theme are built on different logic. Figma shows finished pages. A Shopify theme is made of reusable sections and blocks that you can rearrange and edit in the theme editor. The closer your design is to the way Shopify works, the faster and cheaper the build is, and the easier the store is to manage afterwards.
Here's what I'd want to receive in a handoff, in the order I'd check it. If you're still choosing who to build it, start with how to find and hire a Shopify developer.
Key takeaways
- Design templates and reusable sections, not one-off pages.
- Show every state (hover, sold out, empty cart, errors), not just the happy path.
- Say which parts of each section you want to be able to edit yourself.
1. List the templates you need
Shopify stores are made of page types called templates. A typical store needs designs for:
- Home page
- Collection (product listing) page, including filters and sorting
- Product page
- Cart, as a page, a slide-out drawer or both
- Search results
- Content pages such as About, Contact and FAQ
- Blog and article pages
- 404 page
- Customer account pages (sign in, order history), unless you're happy with Shopify's defaults
Mark anything optional, so the estimate can separate must-haves from nice-to-haves.
2. Design in sections and blocks
A section is a reusable band of content: a hero banner, a featured collection, a testimonial slider, a rich text area. A block is an item inside a section: one slide, one feature column, one FAQ item. In the theme editor you can add, reorder and remove both. To make that work:
- Build each section once as a Figma component with variants (image left or right, two, three or four columns) instead of redrawing it on every page.
- Name sections the way you'd like to see them in the editor, such as "Hero banner" or "Image with text".
- Note what should be editable (text, images, links, colors, alignment, number of items) and what is fixed.
- Show the minimum and maximum: what a row with two items looks like, and what it looks like with eight.
3. Show every state
Most delays and unwelcome surprises come from states nobody designed. The developer has to guess, and you find out at review. Cover at least:
- Interactive elements: hover, focus, active, disabled and loading.
- Product: sold out, on sale (with a compare-at price), low stock, variant selectors (swatches, dropdowns), very long product names, and products with one image or many.
- Cart: empty cart, free-shipping progress, quantity errors and an applied discount code.
- Forms: validation errors and success messages, plus any newsletter pop-up.
- Search and collections: no results, many filters applied, pagination or infinite scroll.
- Navigation: the desktop menu (and mega menu, if you have one), the mobile menu, and how the header behaves on scroll.
4. Provide responsive frames
For many stores most visitors are on phones (check your analytics), so mobile deserves the same care as desktop. Provide at least a desktop frame (for example 1440px wide) and a mobile frame (for example 390px wide), plus a tablet frame if the layout changes significantly.
If you can't provide every page at every size, describe the rules instead: how many columns at each width, which elements stack, which are hidden and which change order.
5. Set up a simple design system
A few shared definitions save a lot of back and forth:
- Colors, named by purpose (primary, text, background, sale, error) rather than only by value.
- Typography: font families, sizes, weights and line heights, with the differences between desktop and mobile.
- Spacing: a consistent scale instead of arbitrary gaps.
- Buttons and form fields, in all their variants.
- Icons, grid and container widths, and page margins.
Use Figma styles, variables and auto layout where you can. A developer can read exact values straight off them.
6. Fonts, images and content
- Fonts: confirm the license covers use on the web. Shopify's theme settings include a font library, but custom fonts need web font files (such as WOFF2) and a license that allows embedding.
- Images: give the aspect ratios and say how they should crop (fill the frame or fit inside it) and where the focal point is.
- Icons and logos as SVG files.
- Realistic content. "Lorem ipsum" hides problems such as long product names, two-line headings and longer translated text. Use real copy where you have it.
- Video and animation files, with their dimensions and any length limits.
7. Describe motion and behavior
Static frames don't show how things behave. Add short notes or a quick prototype for sliders (autoplay, arrows, dots), accordions, sticky elements, scroll animations, the cart drawer opening and quick-view pop-ups. Be specific about what matters to you. Subtle hover transitions can safely be left to the developer's judgment.
8. Flag the Shopify-specific parts
- Dynamic content. If a block of text comes from product data (ingredients, a size guide, badges), it's probably built with metafields. Tell the developer which fields you want to edit per product.
- Apps. Reviews, subscriptions, upsells, loyalty programs and wishlists: name the app, so its interface can be styled and integrated properly.
- Checkout. Shopify controls most of the checkout. Branding options exist, but a fully custom checkout design isn't always possible and depends on your plan. If checkout design matters to you, raise it early.
- Languages and currencies. If you sell in several, show how longer text and different price formats look.
9. Cover accessibility basics
- Text contrast: aim for WCAG AA, which is 4.5:1 for normal-size text.
- Visible focus styles for people using a keyboard.
- Touch targets of around 44px on mobile.
- A logical heading structure, with one main heading per page.
Fixing these in the design is far cheaper than fixing them after development.
10. Do a proper handoff
- Provide one file, or a clearly labeled "Ready for dev" page, and archive older versions.
- Hold a 30-minute walkthrough call, and record it if you can.
- Keep a list of changes made after handoff, so nothing gets lost.
Quick checklist
- All templates listed, with optional ones marked
- Sections built as components, with editable parts noted
- Every state designed: hover, sold out, empty, error
- Desktop and mobile frames (and tablet if needed)
- Colors, type, spacing, buttons and forms defined
- Fonts licensed, images with ratios, icons as SVG
- Motion and behavior described
- Dynamic content, apps and checkout needs flagged
- Contrast and focus states checked
- One clean file and a walkthrough call
Once the designs are ready, the next question is budget. Here's what drives the cost of a Shopify build.
Have designs ready to build?
Building complete Shopify storefronts from Figma is the core of what I do, from reusable Online Store 2.0 sections to responsive, accessible layouts. See how I work or send me your designs and I'll tell you what I'd build and how.