Headless Shopify Explained: What It Is, When It Makes Sense, and When It Does Not

Headless Shopify gets sold as a silver bullet for performance and conversion. The pitch is compelling: faster sites, fully custom design, better user experience, and complete brand differentiation. Some of that is true. But for most Shopify merchants, the cost and complexity of a headless build outweighs the benefit by a significant margin.

This guide explains what headless actually means, what the genuine advantages are, what the real costs look like, and which merchants should seriously consider it versus those who should stay on a standard Shopify theme.

What does headless commerce mean?

In a standard Shopify setup, the front-end (what customers see and interact with) and the back-end (Shopify's commerce infrastructure: products, orders, checkout, payments) are coupled together. Shopify serves both the data and the rendered pages using Liquid, its templating language.

In a headless setup, the front-end is decoupled. A separate application, built with a framework like React, Next.js, or Vue.js, handles everything the customer sees. This front-end communicates with Shopify's back-end via the Storefront API to fetch product data, manage carts, and process checkouts.

The result: Shopify remains your commerce engine, handling products, inventory, payments, and orders, but the storefront layer is entirely custom code that you build and maintain independently.

How do Shopify's Storefront API and Hydrogen work?

The Storefront API is the GraphQL API that headless front-ends use to communicate with Shopify. It exposes product data, collections, cart operations, customer accounts, and checkout functionality. Any front-end framework can consume it.

Hydrogen is Shopify's own React-based framework for building headless storefronts. It is built on top of Remix (a React metaframework) and is purpose-built for commerce: it includes hooks for product data fetching, cart management, and checkout, and is deployed on Shopify's Oxygen hosting infrastructure.

Hydrogen removes some of the complexity of building headless from scratch. But it is still a full custom development project requiring React expertise, and it is meaningfully more complex to build and maintain than a standard Liquid theme.

What are the genuine performance benefits of going headless?

Performance improvement is the most cited reason for going headless, and there is real substance to it in specific scenarios.

A well-built headless storefront can deliver Core Web Vitals scores that standard Shopify themes cannot match. Particularly for LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift), a custom front-end gives developers control over every asset, every render cycle, and every third-party script. This is why large-scale headless stores often achieve sub-1-second LCP scores.

However, the performance argument has a significant caveat: a poorly built headless storefront performs worse than a well-optimised standard theme. Headless development done carelessly ships JavaScript bundles that are larger, not smaller, than a Liquid theme. The performance ceiling is higher, but the performance floor is lower.

Shopify's own Dawn theme and many well-maintained commercial themes (Prestige, Impulse, Turbo) score well on Core Web Vitals without requiring a custom front-end. If your current performance problem is a bloated theme with dozens of third-party app scripts, the fix may be theme cleanup rather than a full headless rebuild.

What does a headless Shopify build actually cost?

This is where the headless conversation often goes wrong. Agencies selling headless builds have an incentive to minimise the cost conversation. Here is a realistic picture.

Development cost: A production-quality headless Shopify build with Hydrogen or Next.js typically costs £40,000 to £150,000+ depending on scope, feature complexity, and the agency. This is not a one-time cost: headless front-ends require ongoing developer maintenance in a way that theme-based stores do not.

Ongoing maintenance: A headless front-end is a custom software product. Every new Shopify feature (new checkout APIs, new app integrations, new payment methods) requires developer work to implement. With a standard theme, Shopify and app developers handle this. With headless, your team or agency does it.

Budget for at least £1,500 to £5,000 per month in ongoing development retainer if you are running a headless Shopify store in production.

Hosting: If you use Shopify's Oxygen hosting, it is included in Shopify Plus. If you host elsewhere (Vercel, Netlify, Cloudflare), hosting costs are typically £100 to £500/month depending on traffic. Not large, but an additional line item.

Time to launch: A headless build takes 3 to 9 months to build and launch compared to 4 to 12 weeks for a theme customisation project. Every month of delayed launch is a month without the performance improvements that justified the project.

The total cost of ownership over 3 years for a headless build typically ranges from £150,000 to £500,000 when you include build cost, ongoing development, and the internal overhead of managing a custom software product. For most merchants, that is a very large bet.

Which store types genuinely benefit from headless?

Headless makes sense when specific conditions exist, not as a general performance play.

High-traffic stores where performance directly drives significant revenue: if your store generates £5M+ per year and you have data showing that a 0.1-second LCP improvement correlates with a 1% conversion lift, the maths on a headless investment may work. Below this revenue level, the return is harder to justify.

Stores with genuinely custom UX requirements: if your product configurator, build-your-own experience, or interactive selling tool cannot be built within Shopify's standard theme architecture, headless may be the only path. A bicycle configurator with hundreds of component combinations, a mattress customisation flow, or a complex subscription builder are examples where the standard theme structure is a genuine constraint.

Omnichannel and multi-touchpoint businesses: brands that need the same product and cart data to power a website, a mobile app, an in-store kiosk, and a digital signage display benefit from an API-first architecture. Headless makes this coherent; standard Shopify themes do not extend to non-web surfaces.

Brands with significant in-house development teams: if you have front-end developers on staff who work in React full-time, the ongoing maintenance overhead of a headless storefront is manageable. For merchants who rely entirely on a Shopify agency, the maintenance dependency is a risk.

What is the honest case for staying on a standard Shopify theme?

For the majority of UK Shopify merchants, including many doing £1M to £10M per year, a well-configured standard Shopify theme is the right choice. Here is why.

Shopify themes have improved dramatically: the current generation of Shopify themes (2.0 architecture) are performant, flexible, and well-maintained. A merchant on Prestige, Impulse, or a well-built custom Liquid theme with proper performance optimisation can achieve excellent Core Web Vitals scores without custom infrastructure.

App ecosystem is theme-native: virtually every Shopify app integrates natively with Liquid themes. Headless builds require custom integration work for every app that injects front-end functionality, which multiplies development cost.

Shopify Plus checkout is still the checkout: even in headless builds, most merchants use Shopify's hosted checkout. You are not replacing the highest-intent page in your funnel. The conversion optimisation opportunity on the checkout page is limited whether you are headless or not.

Faster iteration: with a theme-based store, a developer can implement a new feature, run an A/B test, or respond to a site issue in hours. With a headless build, every change to the storefront is a development task with a deployment cycle.

The performance gap is closing: Shopify's own performance infrastructure improvements, combined with theme updates, have brought standard theme performance much closer to headless best-practice. The gap that existed in 2020 to 2022 is significantly smaller today.

Key actions to take now

1. Before considering headless, audit your current store's Core Web Vitals using Google PageSpeed Insights and Shopify's built-in speed report. Identify specific bottlenecks. Many performance problems can be resolved with theme cleanup, image optimisation, and app reduction rather than a rebuild.
2. If you are being pitched a headless project, ask for a detailed total cost of ownership over three years: build cost, ongoing maintenance, hosting, and internal team time. Compare this against what a well-optimised theme build would cost.
3. Ask the agency for three examples of headless stores they have built and their actual Core Web Vitals scores six months post-launch. Not at launch, after six months of real traffic.
4. If you have custom UX requirements that genuinely cannot be built in a standard theme, document them specifically. This is the clearest justification for headless investment.
5. If you are on Shopify Plus and your monthly revenue warrants it, a conversation with a Shopify Plus partner about a scoped headless proof of concept is a lower-risk way to evaluate the technology than a full rebuild.
6. For most merchants: focus development budget on conversion rate optimisation on your existing theme, rather than a headless project. The ROI on CRO is almost always faster and more predictable.

Frequently Asked Questions

Do I need Shopify Plus for headless?

No, but Plus is strongly recommended. Shopify's Oxygen hosting for Hydrogen is only available on Plus. On lower plans, you would host the front-end on a third-party platform (Vercel, Netlify) and pay hosting costs separately. Plus also gives you access to checkout customisation via checkout extensions, which is how headless stores customise the checkout experience.

Is headless better for SEO?

It can be, but only if implemented correctly. A headless storefront built with server-side rendering (SSR) or static site generation (SSG) ensures that search engines receive fully rendered HTML, which is fine for SEO. A headless build that serves client-side rendered JavaScript without SSR can be worse for SEO than a standard Shopify theme. Shopify's Hydrogen framework uses SSR by default, so Hydrogen builds done correctly are SEO-safe.

How long does a headless Shopify build take?

A production-quality headless build typically takes 3 to 9 months from kickoff to launch, depending on feature scope. Simple headless builds with a narrow feature set can be delivered in 3 months; complex builds with custom configurators, bespoke account portals, and multi-region support take 6 to 12 months. Factor in post-launch stabilisation time in your planning.

Can I migrate from a standard Shopify theme to headless without losing data?

Your Shopify data (products, orders, customers) stays in Shopify regardless of your front-end. Migrating to headless means rebuilding the front-end, not moving data. You will keep all your order history, customer records, and product catalogue. What you are replacing is the presentation layer, not the commerce database.