Quick summary
This post explains what headless commerce means in the context of Shopify, separating the frontend from the backend using tools such as Hydrogen and the Storefront API. It sets out the genuine benefits, the significant costs and complexity involved, and the specific business scenarios where going headless makes sense versus when a standard Shopify theme is the better choice.
Someone has told you that headless commerce is the future of Shopify, and now you are wondering if your store needs it. The honest answer for most Shopify merchants is no. Headless architecture offers genuine benefits for specific use cases, but it comes with significant complexity and cost that most stores do not need. Understanding when headless makes sense and when it does not will save you from an expensive mistake or help you make the right investment at the right time.
What is headless commerce on Shopify?
In a standard Shopify setup, the frontend (what customers see) and the backend (products, orders, payments) are tightly connected. Your theme controls the storefront, and Shopify handles everything behind the scenes.
Headless commerce separates these two layers. Shopify still manages your products, inventory, checkout, and orders. But instead of using a Shopify theme for the frontend, you build a custom storefront using a JavaScript framework (React, Next.js, Remix) that communicates with Shopify through its Storefront API.
The result is a custom-built website powered by Shopify's commerce engine. You get complete control over the frontend experience while keeping Shopify's reliable backend.
What are the real benefits of going headless?
Complete design freedom
Shopify themes are flexible, but they have constraints. Headless removes all of them. Every pixel, interaction, and animation is custom-built. If you need a storefront experience that Shopify's theme system cannot deliver, headless is the path.
Faster page loads (potentially)
Headless storefronts built with modern frameworks can achieve faster load times than Liquid-based themes because they use static generation, edge rendering, and optimised JavaScript bundles. A well-built headless storefront on Hydrogen (Shopify's React framework) can achieve sub-second page loads.
The caveat is "well-built." A poorly built headless storefront can be slower than a standard Shopify theme. Speed depends on implementation quality, not architecture alone.
Multi-channel content
If you need one content source to power your website, mobile app, in-store displays, and marketplace listings, headless makes this possible. The Storefront API feeds product data to any frontend, so you build once and deploy everywhere.
Custom functionality
Complex product configurators, interactive sizing tools, AR experiences, and rich content editorial layouts are easier to build in React or Next.js than in Shopify's Liquid templating language.
What are the real costs and trade-offs?
This is where the decision gets practical. Headless sounds appealing in theory, but the costs are substantial.
Development costs
| Item | Standard Shopify Theme | Headless Build |
|---|---|---|
| Initial build | £5,000 to £20,000 | £30,000 to £100,000+ |
| Monthly maintenance | £500 to £1,000 | ��1,500 to £5,000 |
| Developer skill level | Liquid, HTML, CSS | React/Next.js, API integration, DevOps |
| Time to launch | 4 to 8 weeks | 12 to 24 weeks |
A headless build costs three to five times more than a theme-based store and takes two to three times longer. This is not a project you start on a whim.
Ongoing complexity
Every feature that comes free with a standard Shopify theme needs to be built and maintained in a headless setup. Cart functionality, product filtering, search, customer accounts, wishlists, gift cards, discount code entry: all of these require custom development.
When Shopify releases a new feature, theme-based stores get it automatically. Headless stores need a developer to integrate it via the API, if the API even supports it yet.
App compatibility
Most Shopify apps are designed for Liquid themes. Going headless means losing access to the majority of the app ecosystem. Review apps, loyalty programmes, upsell tools, and chat widgets all need custom integration or replacement with API-first alternatives.
| Feature | Theme-Based (App) | Headless (Custom Build) |
|---|---|---|
| Product reviews | Install Judge.me, done | Build custom review UI, connect via API |
| Search | Shopify search or Searchanise | Integrate Algolia or build custom |
| Wishlist | Install app | Build custom with customer metafields |
| Loyalty | Install Smile.io | API integration or build custom |
| Live chat | Install widget | Embed script or integrate API |
Hosting and infrastructure
A standard Shopify store is hosted by Shopify. A headless frontend needs separate hosting. Shopify's Oxygen platform hosts Hydrogen storefronts, but alternatives include Vercel, Netlify, and Cloudflare Pages.
| Hosting Option | Cost | Best For |
|---|---|---|
| Shopify Oxygen | Included with Shopify plan | Hydrogen storefronts |
| Vercel | From $20/month (Pro) | Next.js storefronts |
| Netlify | From $19/month (Pro) | Static and SSR storefronts |
| Cloudflare Pages | Free tier available | Edge-rendered storefronts |
What is Shopify Hydrogen?
Hydrogen is Shopify's official framework for building headless storefronts. It is built on Remix (a React framework) and comes with pre-built components for common commerce features: product displays, cart, checkout redirect, and customer account flows.
Hydrogen advantages:
- Officially supported by Shopify, so it stays in sync with Shopify's backend features
- Hosted on Oxygen (included with Shopify), reducing infrastructure costs
- Pre-built commerce components save development time
- Server-side rendering for strong SEO performance
Hydrogen limitations:
- Requires React and Remix expertise
- Still in active development, with some features lagging behind Liquid themes
- Smaller community and fewer resources than Next.js
- Tied to Shopify's ecosystem (less portable if you ever switch platforms)
For stores committed to headless on Shopify, Hydrogen is the most logical choice because of its tight integration with the Shopify backend.
When should you seriously consider headless?
Headless makes sense when the limitations of Shopify's theme system are genuinely costing you revenue or preventing you from executing your strategy.
Strong indicators for headless:
- You need a highly custom frontend experience that Shopify themes fundamentally cannot support (interactive product configurators, editorial-heavy content sites, unique navigation patterns).
- You are a large brand doing £5M+ annually with the budget and team to maintain a custom frontend long-term.
- You need a multi-channel content strategy where the same product data powers web, app, and physical retail experiences.
- Performance is critical and measurable. You have data showing that faster page loads will generate meaningful revenue improvement, and you have exhausted theme-level optimisation.
- You are on Shopify Plus and need advanced customisation that even Plus's theme capabilities cannot deliver.
Red flags that suggest headless is not right for you:
- Your annual revenue is below £1M. The development costs are disproportionate to the benefit.
- You rely heavily on Shopify apps. Losing the app ecosystem will create more problems than headless solves.
- Your team does not include or have budget for React developers. Headless requires ongoing specialist maintenance.
- You want headless because a competitor has it. Their requirements may be completely different from yours.
- Your current theme performs well and your conversion rates are healthy. Do not fix what is not broken.
What are the alternatives to full headless?
Going fully headless is not the only option. Several middle-ground approaches offer some benefits of headless without the full commitment.
Shopify's theme architecture (Online Store 2.0)
Modern Shopify themes built on OS 2.0 with JSON templates and sections everywhere offer significant customisation. Combined with metafields, Shopify Functions, and custom Liquid code, you can achieve a lot before hitting genuine limitations.
Hybrid headless
Use Shopify's theme for most pages but build specific high-value pages (homepage, landing pages, product configurator) as custom React components embedded via Shopify's theme architecture. This gives you custom functionality where it matters without rebuilding the entire storefront.
Shopify Plus with custom checkout
If checkout customisation is your main driver, Shopify Plus offers Checkout Extensibility, which lets you customise the checkout experience without going headless. This solves one of the most common reasons merchants consider headless.
Key actions to take now
- Honestly assess whether your current Shopify theme is holding you back. List specific limitations, not vague feelings.
- Calculate the true cost of a headless build, including ongoing maintenance, hosting, and the loss of app functionality.
- Explore whether Online Store 2.0, metafields, and custom Liquid development can solve your needs first.
- If headless is genuinely justified, start with Hydrogen and Oxygen for the tightest Shopify integration.
- Budget for 12 to 24 weeks of development time and ongoing monthly maintenance.
- Ensure you have access to React developers (in-house or agency) for long-term support.
The decision to go headless should be made with clear-eyed analysis of costs, benefits, and alternatives. A Shopify developer can help you evaluate whether your specific requirements genuinely need headless architecture or whether custom theme development achieves the same outcome at a fraction of the cost. Most stores that think they need headless actually need a better theme.
Frequently Asked Questions
How much does a headless Shopify build cost?
A headless Shopify storefront typically costs between £30,000 and £100,000 to build, compared to £5,000 to £20,000 for a custom theme-based store. Ongoing monthly maintenance for a headless build runs to £1,500 to £5,000, versus £500 to £1,000 for a standard theme. Budget for 12 to 24 weeks of build time. These figures assume a competent agency or in-house React team with Shopify Storefront API experience.
What is Shopify Hydrogen and do I need it?
Hydrogen is Shopify's official React framework for building headless storefronts. It is built on Remix and comes with pre-built components for cart, checkout, and product displays. It is hosted on Shopify's Oxygen platform at no extra cost. You only need Hydrogen if you have decided headless is genuinely justified for your business. For most stores, a well-built Online Store 2.0 theme achieves comparable results without the complexity.
Will going headless on Shopify break my existing apps?
Most Shopify apps are designed for Liquid themes and will not work out of the box in a headless setup. Features like product reviews, loyalty programmes, wishlists, and upsell tools all require custom integration or replacement with API-first alternatives. This is one of the most underestimated costs of going headless: rebuilding app functionality that theme-based stores get for £10 to £50 per month.
What revenue level makes headless worth considering for a Shopify store?
Headless architecture starts to make commercial sense at around £5 million or more in annual revenue, where the budget for a £30,000 to £100,000 build and ongoing developer costs is proportionate to the potential performance gain. Below £1 million, the development investment is almost never justified. Between those figures, the answer depends on whether your theme is genuinely limiting your growth or whether better theme development would solve the problem.