The situation

A UK fashion brand was launching from scratch with a clear brief: build a storefront that would look premium, load fast on mobile, and scale without engineering debt. They had a strong brand, a well-curated product range, and zero existing revenue. They wanted to do it right from day one.

The question wasn't whether to use Shopify — it was whether to go headless.

The case for headless

We're typically cautious about recommending headless. The complexity cost is real: you're building and maintaining a custom frontend, which means more engineering time, more infrastructure, and more things that can break. For most Shopify merchants, a well-configured Shopify 2.0 theme is the right call.

This brand was different. Their design requirements were genuinely beyond what a Shopify theme could handle cleanly — complex editorial layouts, interactive product features, and a mobile experience where performance wasn't a nice-to-have, it was the brief. Headless was the right answer here.

The architecture decision was Next.js as the frontend, deployed on Vercel, with Shopify as the commerce backend via the Storefront API. Cart, checkout, and payments all run through Shopify. Everything else — rendering, routing, personalisation, editorial content — runs in Next.js.

The build

Storefront API integration. We built a typed GraphQL client against the Shopify Storefront API, covering product queries, collections, cart management, customer authentication, and order history. The query structure was designed for incremental static regeneration — product pages build statically and revalidate on inventory or price changes, keeping Time to First Byte consistently under 100ms.

Performance as a constraint, not a target. Lighthouse scores were in the brief from the start, not bolted on at the end. Every component was evaluated against Core Web Vitals at build time. Images went through Next.js image optimisation with responsive sizing and lazy loading. Critical CSS was inlined. Third-party scripts were deferred or replaced with first-party implementations where possible.

The result at launch: 100 on Performance, Accessibility, Best Practices, and SEO across all key pages in Lighthouse. LCP under 1.5 seconds on mobile on a standard 4G connection.

Editorial flexibility. Product pages, collection pages, and landing pages all supported a modular section system — the same principle as Shopify sections, but implemented in React with proper component isolation. The brand team could build new landing pages without touching code.

Infrastructure. Vercel handled the Next.js deployment with edge caching at Cloudflare in front. AWS handled image processing and asset storage. The stack was chosen for reliability and cost-efficiency at the volumes we were projecting — not the volumes of day one.

Checkout. We kept Shopify's hosted checkout, which was deliberate. Custom checkout is a significant ongoing maintenance commitment and introduces PCI scope. The performance loss on checkout is acceptable; the reduction in fraud risk and compliance overhead isn't.

The outcome

The brand crossed £2M in gross merchandise value within 18 months of launch.

Organic search drove a meaningful share of that growth. The Lighthouse scores translated into measurable rankings improvements over the period — mobile-first indexing rewards the kind of performance the architecture was built for from the start.

The site has required no significant frontend re-architecture since launch. The component system scaled from initial launch with a handful of templates to over 40 distinct page types. The Shopify backend scaled with the catalogue without changes to the frontend.

What we'd do differently

The editorial section system was under-specified at the start. We built it around the initial use cases, then extended it as the brand's content needs evolved — which meant a few breaking refactors mid-engagement. Better to over-build the content model upfront and leave components unused than to bolt them on later.

We also underestimated how quickly the brand team would want to run performance marketing landing pages. A more formalised template system for campaign pages from the start would have saved time later.

Tech stack

Next.js (App Router), Shopify (Storefront API + hosted checkout), Vercel, Cloudflare, AWS (S3 + image processing), Klaviyo, TypeScript throughout.