Figma to Shopify
A Shopify theme is not a set of finished pages. It is a kit of sections that the merchant arranges in the theme editor. A design that is built as fixed pages looks right on launch day and then cannot be changed without calling a developer.
We build Shopify themes from Figma files in the Online Store 2.0 structure. Every band in the design becomes a section with settings, so your team can reorder the home page, add a banner for a sale and build a new landing page from existing parts.
The parts of a 2.0 theme
Knowing these helps a designer draw something that can be built as drawn.
JSON templates
Each page type, such as product, collection or article, has a template that is only a list of sections and their saved settings. Merchants can create alternative templates for particular products.
Sections
A full-width band: hero, featured collection, testimonial row. It is a Liquid file with a schema describing its settings.
Blocks
Repeatable items inside a section, such as slides or feature columns. The merchant adds, removes and reorders them.
Section groups
Header and footer areas, which also accept sections, for announcement bars and the like.
App blocks
Places where an installed app, such as reviews or a size guide, can drop its own block. We leave slots for these on the product template.
Settings worth having in the theme editor
Too few settings and the theme is rigid. Too many and nobody can find anything. We aim for the ones people use.
Content pickers
Choose the collection, product, blog or menu a section shows, instead of typing handles.
Colour schemes
A small set of named schemes taken from the Figma palette, selectable per section. No free colour picker on every heading.
Image focal point
Shopify stores a focal point with each image, and sections use it so crops stay sensible on mobile.
Dynamic sources
Settings can be bound to metafields and metaobjects, so a care guide or ingredient list is entered once per product and shown by the theme.
Sensible limits
Where the design holds three columns, the section allows up to three blocks. The editor prevents layouts the designer never intended.
Frames a storefront design should include
Commerce has more states than a brochure site.
- Product page with one variant and with many
- Sold out, on sale and pre-order product states
- Collection page with filters open, and with no results
- Cart drawer or cart page: empty, one line, many lines
- Search results and predictive search dropdown
- Account, login and order history pages
- Product card with a long title and a missing image
- Each section drawn alone, showing its optional parts
What can a theme change?
Within the theme
- Home, product, collection, blog, page, search and cart templates.
- Header, footer, navigation and announcement bars.
- Customer account pages in the classic account system.
- Transactional email templates, edited separately in store settings.
Outside the theme
- Checkout layout. Branding options and checkout extensions are governed by Shopify and by your plan.
- What third-party apps render inside their own blocks, beyond the styling they expose.
- Back-office logic such as discounts, shipping rules and tax. These are store settings or apps.
From store owners and their designers
Do you start from Dawn or from an empty theme?
Either. Starting from Shopify's reference theme gives tested cart and variant logic. Starting empty gives smaller code. We recommend one after reading the design.
How do you get access to our store?
Through a collaborator request or a staff account you create, limited to themes. Work happens on an unpublished theme, so the live shop is untouched until you publish.
Will the theme match the Figma file?
Templates are compared with the frames at agreed breakpoints using your real products, and differences are listed. Real product titles and photos rarely behave like sample ones, so expect a few.
Can we sell the theme on the Theme Store?
That has its own review requirements set by Shopify. Tell us at the start, because it changes how the theme is written.
Do you build headless storefronts?
Yes, as a React project using Hydrogen. That is a different kind of build with different running costs, and most shops do not need it.
Share the design and the store address
Send a view link to the Figma file, the store address and the apps you rely on. We reply within one business day.