The situation
The client was on a generic Shopify theme. It worked, but it didn’t look like the brand — and every time they wanted to tweak a section, they were paying a developer for tiny changes. Mobile performance was middling. The product detail page had a layout that fought the imagery rather than featuring it.
The mandate
Build a custom Shopify 2.0 theme that matches the brand’s design language, is fast on mobile, and gives the marketing team enough editor controls to make most updates without touching code.
What we did
- Design system translation. Took the brand’s design system — typography, colors, spacing scale, motion language — and translated it into theme.json plus section schemas, so the theme inherits the brand at the foundation level, not on a page-by-page basis.
- Section-based architecture. Built every page as composed sections — hero, lookbook, product grid, testimonial, story-scroll, CTA banner. Each section has its own settings the merchant can edit in the theme editor: copy, imagery, layout, on/off toggles. No more developer tickets for small updates.
- Product detail page redesign. Rebuilt the PDP to feature imagery first, copy second, conversion CTAs anchored — based on how the brand’s customers actually shop, not the default template.
- Performance pass. Critical CSS inlined. Fonts preloaded. Images served as responsive srcset with WebP fallback. JS deferred where it could be.
- Accessibility and SEO. Semantic HTML throughout. Proper heading hierarchy. Alt-text discipline. Structured data on product and collection pages.
- Documentation. Wrote a merchant-facing guide for the section settings so the marketing team can ship campaign updates without engineering help.
The outcome
Mobile performance jumped into the green. The brand finally looked like itself on the site instead of like a generic Shopify shop. The marketing team started shipping campaign landing pages on their own.
Why it worked
Custom themes have two common failure modes: over-engineered (everything custom, nothing reusable) or under-engineered (default theme with brand colors swapped in). We built a section-based architecture that the merchant owns — flexible without being a maintenance burden.