PSD to Shopify conversion means turning a website design, made in Photoshop or, more often now, Figma, into a working Shopify theme. A developer rebuilds each designed page as theme code using Liquid, CSS and JavaScript, organized into sections and blocks that you can edit later in the Shopify theme editor. Done well, you get a store that looks exactly like the design and that you can update without a developer. Done badly, you get a pretty but slow, rigid store that needs a developer for every change.
I’ll explain how a modern Shopify theme is built, the conversion process step by step, the performance targets I’d ask for, and how to hire someone. Design is the easy part. Structure is where projects go wrong.
How a Shopify theme is built
From Shopify’s developer documentation:
- Liquid, CSS and JavaScript implement theme features.
- JSON templates act as wrappers for sections.
- Sections are reusable, customizable modules that merchants can add to templates.
- Blocks are reusable modules inside sections that can be added, removed and reordered.
- Online Store 2.0 is Shopify’s set of theme features that make themes more flexible and easier to maintain, including sections on every page.
Why this matters for you: your design should be broken into sections and blocks. Not hard-coded pages. When you want to move a banner or add a testimonial row next year, you should be able to do it yourself. No ticket. No invoice.
Start from a reference theme or from scratch?
Shopify’s Dawn was its first source-available reference theme, built for Online Store 2.0 and speed; Shopify said it loaded 35% faster than its predecessor. For new themes, Shopify’s current tutorial starts from its Skeleton reference theme with Shopify CLI. In my view, most brands don’t need a fully custom theme: a strong existing theme, customized to match your design, is faster, cheaper and easier to maintain.
The conversion process, step by step
- Prepare the design files. Every page type: home, collection, product, cart, about, blog, and mobile versions of each.
- Map the design to sections. Decide which parts are reusable sections and which settings each needs (colors, text, images).
- Choose the base. Customize an existing Online Store 2.0 theme, or build on a reference theme.
- Build templates and sections in Liquid, CSS and JavaScript.
- Make it responsive and test on real phones, not just a resized browser.
- Test performance and accessibility (targets below).
- Test the buying path: product variants, cart, discounts and checkout.
- Launch and train. Get a walkthrough of the theme editor so you can manage it yourself.
When you brief a developer, give them all of step 1 at once. My rule of thumb: piecemeal designs cost more and take longer, because the developer can’t plan the section structure up front.
Speed and accessibility targets
Shopify’s own data links speed to sales: in its analysis, every 100 milliseconds slower a store loads, conversion tends to be about 3.5% lower. For themes sold in the Shopify Theme Store, Shopify requires a minimum average Lighthouse performance score of 60 and an accessibility score of 90, across product, collection and home pages on desktop and mobile.
Your custom theme isn’t bound by Theme Store rules, but I’d use them as the minimum in your contract. Honestly, a beautiful theme that loads slowly loses sales every day.
What to plan for in cost and time
Costs depend on how many unique page designs you have, how many custom sections are needed, integrations (reviews, subscriptions, search), and whether you build from scratch or customize an existing theme. Ask for a quote that lists:
- each page template and section included;
- the base theme, if any;
- performance and accessibility targets;
- rounds of revisions;
- post-launch support.
Don’t accept a single number with no breakdown. I’d push back hard. Unwritten features are where overruns hide.
How to hire a Shopify developer
Shopify’s Partner Directory, which replaced the Shopify Experts Marketplace in October 2023, lists vetted Shopify Partners you can hire. Agencies and freelancers outside the directory work too. Ask for live Shopify stores they’ve built, then check their speed scores yourself. Takes five minutes.
If you’d like our team to handle it, our Shopify store development service covers design conversion and launch. For the business side, see when Shopify pays out, the best SEO for Shopify, and whether to sell on Amazon or Shopify.
FAQ
What is PSD to Shopify conversion?
Turning a website design file into a working Shopify theme, built with Liquid, CSS and JavaScript and organized into editable sections and blocks.
Can I convert a Figma design to Shopify the same way?
Yes. The process is the same whichever design tool you use; the developer rebuilds the design as theme code.
Should I build a custom theme or customize an existing one?
Most brands do well customizing a strong Online Store 2.0 theme. Fully custom themes suit brands with unusual layouts or requirements.
How fast should my Shopify theme be?
Shopify requires Theme Store themes to average at least 60 for Lighthouse performance; use that as a minimum. Shopify’s data links every 100 ms of extra load time to about 3.5% lower conversion.
Where can I find a Shopify developer?
Shopify’s Partner Directory lists vetted Shopify Partners. You can also hire agencies or freelancers directly; check their live stores.
Will I be able to edit my store after conversion?
You should. Ask for a theme built with sections and blocks, plus a walkthrough of the theme editor.
Last updated: October 5, 2026. Sources: Shopify Dev, theme architecture; Shopify Dev, Online Store 2.0; Shopify Dev, Theme Store requirements; Shopify Dev, create a theme; Shopify Partners blog, Online Store 2.0; Shopify Help, Partner Directory; Shopify, store speed and conversion.
