How a custom Shopify theme is actually built

When people hear "custom theme," most picture a design being coded into HTML. That's about a third of the work. The other two thirds are about making the store manageable by someone who has never seen a line of code.

1. What has to be settled before the first line of code

Before anything gets built, you need to know which parts of the page the client will change. Not "all of them" — that answer leads to an unusable editor with two hundred settings nobody understands.

I walk through the homepage with the client and ask, for every block: will you change this monthly, yearly, or never? Out of that comes a section map — what's configurable, what's fixed, and where you need a block that can be added repeatedly.

2. The data model

The second thing to settle before coding: where the data lives that a standard product doesn't have. Material, care instructions, size charts, technical specifications, a link to a brand collection.

Shopify has metafields and metaobjects for exactly this. It's a substantially better answer than stuffing information into the product description or into hidden tags, the way it used to be done. The data has a type, it can be filtered, and the theme reads it cleanly.

A badly designed data model can't be fixed later without rewriting the theme. That's why it's step two and not step six.

3. Online Store 2.0 sections and blocks

This is the core of a modern Shopify theme. A section is a self-contained piece of a page with its own settings; a block is a repeatable element inside it. In the editor, the client adds sections, reorders them and sets their content.

The rules I hold to:

• A section does one thing. A universal section with twenty settings is unusable.
• Setting names are in the client's language, not the developer's. "Heading above products," not "Section heading H2 override."
• Sensible defaults. When the client adds a section, it should look right immediately.
• Sections work on other templates too, not only the homepage.

4. Liquid you can actually read

A template another developer will open in a year has to make sense. That means separate snippets for repeated parts, no logic in the template that doesn't belong there, and comments where something unusual is happening.

Watch loops inside loops especially. Iterating every variant of every product in a collection is the fastest way to build a slow page once the catalogue passes a thousand items — and it shows up as slow server response before the page even starts painting, as covered in the performance audit.

5. Performance as part of the brief

Speed can't be "tuned at the end." Either the theme is built with it in mind or it isn't. In practice that means: images in modern formats with responsive sizes, lazy loading for everything below the fold, critical CSS in the head and the rest deferred, no library added for one function, and fonts with font-display: swap and preloaded.

The difference between a theme that thought about this and one that didn't is whole seconds — and that's a difference in conversion.

6. Accessibility and mobile

The specifics are in theme accessibility, and the homepage structure is where most of the section design pays off.

Most orders come from mobile, so mobile isn't "the responsive version," it's the primary version. And accessibility isn't charity — contrast, keyboard operation and proper labels are an SEO signal as well as a legal requirement that keeps tightening in the EU.

7. Handover

A theme without documentation is half a job. I always hand over a short document covering what each section does, where things are configured, and what shouldn't be changed without a developer. Plus a short video walking through it live.

And the code belongs to the client. Always. If someone builds you a theme and keeps the code, you didn't buy a theme — you bought a dependency. That's one of the things worth asking about before you hire anyone.

How long it takes

For a mid-size store with standard templates — home, collection, product, cart, static pages, blog — you're talking weeks rather than days. What stretches it: designs that keep moving, content delivered late, and requirements that arrive once the theme is finished. There are fuller brackets in what a Shopify project costs.

A good custom theme is one where you don't need the developer after handover. A bad one is where you call them every time a banner changes.