Designer and Developer on a Shopify Build: A Guide

Short answer: A smooth designer and developer handoff on Shopify comes from handing over a system, not just screens. Agree design tokens for colour, type and spacing, build in flexible theme sections, review early on real devices and treat performance as part of the design. The earlier the two people talk, the less gets lost in translation.

Why does the designer-developer handoff matter on Shopify?

A beautiful design can fall apart in the build when the two sides work in isolation. The designer assumes the platform can do anything. The developer finds out about the hard parts late. The result is a compromise nobody planned.

On a recent project, I was the developer on the brand relaunch of Orchard Street, an Australian wellness retailer, with designer Daniel Sammut. I customised the Shopify theme to Daniel’s designs. Working with a designer who understands the platform makes the build faster and the result closer to the design. The rest of this post is the general approach I’d recommend, not a retelling of that project’s details.

What should a designer hand over to a developer?

Hand over a system, not a stack of pictures. At a minimum:

• Design tokens. Named values for colour, type, spacing, radii and shadows.
• Components and their states. Buttons, cards, inputs, hover, focus, error, empty.
• Real content. Actual product names, long titles and missing images, since a design with perfect placeholder text hides most of the problems.
• Responsive behaviour. How each part changes between phone, tablet and desktop.
• The reasoning. A sentence on why a decision was made helps the developer defend it when something has to bend.

Not everything gets designed. On Orchard Street, the ordering flow and the practitioner directory weren’t in Daniel’s designs, so I built them and extended his design language to keep them cohesive with the rest of the site. A clear system of tokens and components is what makes that possible, because the developer has rules to follow instead of guessing.

What are design tokens, and how do they work in a theme?

Design tokens are your design decisions, given names. Instead of “this green” appearing in forty places, there’s a single primary colour defined once. In a Shopify theme, that usually means a set of values (colours, sizes, spacing) written down in one place and reused everywhere else.

The benefit is that a design change becomes a one-line change, and nobody has to hunt through the theme. It also keeps the build honest: if something doesn’t match a token, it’s a deliberate exception or a mistake. I follow the same rule on this site, where no colour or spacing is hardcoded.

How do theme sections help a design last?

Shopify’s theme sections are building blocks of a theme (written in Shopify’s templating language, Liquid) that merchants can customise in the theme editor. A section can include blocks, which let the team add, remove and reorder content without touching code.

Designing in sections matters because stores change. A team that can rearrange a page or add a promotion block by itself doesn’t need a developer for every campaign. Ask the designer to think in reusable sections from the start, and the developer can build them with settings that match how the team will really work.

How often should designer and developer review together?

Early and often, in small loops. A few habits that help:

1. Talk before the design is finished. A short conversation about what’s hard on Shopify saves a redesign later.
2. Review in the browser, not in screenshots. Fonts, spacing and motion feel different on a real page.
3. Check real devices. A design that works on a laptop can fail on a phone.
4. Agree what “done” means for each section before building it.
5. Keep a short list of open questions so decisions don’t get lost in chat.

The same care applies to brand-led work, such as the Fika migration, where the look and feel of the existing site had to survive the move to a more capable platform.

How do you keep a custom Shopify theme fast?

Treat speed as a design constraint, not a clean-up job at the end. That means limited fonts, optimised images, restrained scripts and a careful eye on apps that add their own code. A custom feature built for your store, rather than bolted on, can avoid third-party scripts altogether.

Measure against Google’s Core Web Vitals, which check how quickly the page appears (aim for under 2.5 seconds), how quickly it reacts when you tap (200 milliseconds or less), and whether things jump around while it loads (a score of 0.1 or less). Test on real phones throughout the build.

What should I look for in a developer to work with my designer?

Someone who asks about the design before building, pushes back with reasons and tells you early when something is expensive. If you’re deciding whether a custom theme is the right move at all, five signs your Shopify store has outgrown its setup is a useful starting point, and the services page explains how I work.

Planning a Shopify build with a designer, or looking for a developer to join your team? Start a conversation and tell me about the project.