Shopify Headless Commerce: When It Makes Sense and How to Implement It

What Headless Commerce Actually Means

Traditional Shopify: the storefront (what customers see) and the commerce layer (cart, checkout, payments) are built and served by Shopify together. Headless: the storefront is built with a separate frontend technology (React, Next.js, Vue) that communicates with Shopify’s commerce layer via API. The “head” (the presentation layer) is decoupled from the “body” (the commerce engine). This separation enables more frontend flexibility, performance optimisation, and the ability to serve commerce experiences from any device or channel.

Why Brands Go Headless

Performance: a React frontend served from edge nodes with aggressive caching can achieve sub-second page loads that are difficult to match with Liquid templates. This matters for large stores where each 100ms of load time has measurable revenue impact.

Multi-channel: headless allows you to power multiple frontend experiences (web, mobile app, kiosk, in-store display) from a single Shopify backend. A brand that sells across web, a native iOS app, and in-store self-service terminals benefits from one product catalogue and inventory layer powering all channels.

Developer experience: large engineering teams prefer React over Liquid. Headless allows frontend developers to use modern tooling, component systems, and testing frameworks they are already proficient with.

The Shopify Hydrogen Framework

Shopify’s answer to headless is Hydrogen — a React-based framework specifically designed for building Shopify storefronts. Hydrogen handles the complex parts of headless Shopify: Storefront API connections, cart state management, session handling, and streaming server-side rendering for optimal performance. Deploy to Shopify Oxygen (Shopify’s edge hosting) for a global CDN with Shopify infrastructure.

Hydrogen reduces the development overhead of headless versus building from scratch with the Storefront API directly. However, it is still a significant investment: a production-ready Hydrogen storefront for a mid-size store requires 4–8 weeks of experienced React development.

The Real Costs of Going Headless

Development cost: £20,000–£80,000 for initial build. Ongoing maintenance: every Shopify API change requires frontend updates — on a monolithic Liquid theme, Shopify handles backward compatibility. On headless, your team handles it. Time to market: a headless build takes 2–4x longer than a theme-based store. Feature parity: many Shopify App Store apps rely on inserting JavaScript into Liquid templates — they do not work in headless environments without custom API integration.

When to Go Headless and When Not To

Go headless when: your store does £5M+ in annual revenue and performance improvements would have measurable ROI, you need a native mobile app with shared backend, your engineering team is large enough to maintain a custom frontend, or your UX requirements are genuinely impossible with Liquid templates.

Do not go headless when: you are under £1M revenue, you have no in-house React developers, you rely on third-party apps that are not headless-compatible, or you are considering it primarily for prestige rather than specific technical requirements. Most Shopify stores are better served by a performance-optimised Liquid theme than a headless build.