---
title: "Shopify Headless Commerce: When It Pays Off"
source: https://refact.co/insights/ecommerce/shopify-headless-commerce
author: "Saeedreza Abbaspour"
date: "2026-08-05"
---

# Shopify Headless Commerce: When It Pays Off

There is a quiet rewriting of the headless pitch in Shopify’s own 2023 Core Web Vitals report. The numbers tell a story: traditional Liquid storefronts clear all three metrics 59.5 per cent of the time. Hydrogen comes in at 35 per cent, with other headless frameworks hovering near 28%. It is enough to put to rest the notion that headless is inherently faster or more flexible for a merchant. On a Plus store in particular, it does not supplant the parts of the stack one might think it would.

We have put together this guide for the ecommerce director, technical lead, or operator who is on the fence about a headless build versus a properly engineered Liquid theme. We look at what Shopify headless commerce has become in 2026 and the business and technical realities that distinguish the two. In short, while headless is a sound architectural decision, it is a far narrower one than marketing would have you believe. It suits a certain type of merchant and fails for the majority.

## What Shopify Headless Commerce Actually Is

To be headless on Shopify is to decouple the storefront from the commerce engine. Your team will put together a custom frontend in something like Next.js, Remix or Hydrogen to interface with the Storefront and Customer Account APIs. But do not mistake this for a platform replacement; Shopify still has its hands on the catalog, inventory, orders and payments.

That is the crux of the matter. It dictates what is changeable and what is not. Even Shopify has tempered its tone in its 2026 positioning, calling headless “an option for specific requirements” in line with [their guidance](https://www.shopify.com/enterprise/blog/headless-architecture). They see it as a fit for brands wanting cross-channel commerce and custom experiences, not a blanket upgrade for every store, especially with their Liquid engine rewrites making themes up to six times quicker on server response.

### Checkout stays Shopify-hosted

Do not expect to rebuild checkout on Shopify Plus. It is mandatory and hosted by Shopify. You can make use of Checkout Extensibility and Shopify Functions to put in your UI extensions or custom discount logic, but the page itself is not yours to replace. Some teams are caught out by this mid-project when they realise the mockups they have signed off on are unbuildable. For any project where a checkout redesign was the selling point of going headless, the ROI simply does not hold up once you run into the platform.

### The Storefront API is where the work happens

Then there is the Storefront API. As a versioned GraphQL endpoint (the current 2025-07 release being an example), it enforces cost-based throttling. If a team is not careful about query cost on product detail pages or recommendation feeds, rate limits will be hit when traffic picks up.

Authentication has undergone a shift as well. With the 2024-04 version of the API, Shopify has moved to OAuth 2.0 via the Customer Account API and done away with the old customer mutations such as `customerCreate`. A legacy headless build will require a fair bit of work to rewrite the session handling and account pages to comply. New builds have to get it right from the start.

![Shopify Hydrogen headless commerce documentation screenshot](https://cdn.refact.co/uploads/2026/08/image_placeholder_1-11.avif)

Witness the Storefront API in action, as a Hydrogen component directly queries product data, revealing the foundational code behind a custom headless storefront. · Source: truestorefront.com

## The Three Patterns Teams Actually Compare

In practice, most projects resolve into one of three architectures. The issue is less about whether to go headless and more about how much of the stack your team wants to be responsible for once you launch.

### Hydrogen on Oxygen

You have the opinionated route with Shopify’s stack. Hydrogen is a React framework with TypeScript codegen from the Storefront schema, built on Vite and React Router v7. Paired with Oxygen for edge hosting (free on all but the Starter plan), it is straightforward to operate. The [fundamentals docs](https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals) will show you how they are meant to be used. There is a developer preview for the next Hydrogen release that is [framework-agnostic](https://shopify.dev/docs/storefronts/headless/developer-preview), but if you want to bring your own middleware or routing, you will find less room to manoeuvre here.

### Storefront API plus Next.js on Vercel or similar

Agencies and enterprise builds tend to prefer this approach for the control it affords over non-Shopify integrations and the fact that engineers are already familiar with the framework. But you are on the hook for everything else: CI/CD, security, observability, caching. The TCO can run 3 to 5 times higher over a three-year period, a complaint you will see on Reddit that is only too true for a small team.

### Storefront API plus a dedicated headless CMS

Or you might put a CMS like Sanity or Contentful in front of Shopify. For a serious editorial operation with multi-market needs, the extra layer is warranted. For anyone else it is just a second CMS duplicating what the product model already does. We have a [breakdown of headless CMS for ecommerce](https://refact.co/insights/ecommerce/headless-cms-for-ecommerce) for those weighing the options.

> Our advice is to stick with Hydrogen on Oxygen unless you have a hard requirement to do otherwise. Only move to Next.js if your engineers are already working in it and the storefront demands behaviour Hydrogen cannot deliver. A separate CMS is warranted only if your content operations call for it.
> 
> ## Where the Performance Argument Actually Lands
> 
> There is some truth to the assertion that headless is faster, but it is also somewhat misleading. A well-engineered headless storefront will generally show Lighthouse scores of 90 to 100 and load in 0.8 to 1.5 seconds. You can expect a traditional Shopify Plus store of equal engineering quality to come in at 1.5 to 2.5 seconds with an 85 to 95 score. The difference is there, yet it is far less pronounced than one might be led to believe by a rebuild pitch and is wholly dependent on how disciplined the engineering is.
> 
> The marketing narrative is best put to rest by Shopify’s own 2023 CrUX study. At the time of that snapshot, Liquid had a better Core Web Vitals pass rate than Hydrogen. By 2026 Hydrogen has improved to about 78%, but do not attribute that to the framework. It is because the teams deploying Hydrogen have picked up on the necessary patterns: streaming SSR, lean GraphQL, route-level caching, and the like, while treating the Storefront API as an external service with its own cost and latency budgets.
> 
> Leave N+1 GraphQL queries and 400 KB of JavaScript to a six-figure headless build without any SSR discipline and it will be outperformed by a mature Liquid theme on nearly every count. One hears the same thing from practitioners on Reddit after a post-launch review: “We could have cleaned up the Liquid and been 80% of the way there.”
> 
> ![Core Web Vitals report for a Shopify storefront](https://cdn.refact.co/uploads/2026/08/image_placeholder_2-10.avif)
> 
> Even with a perfect Cumulative Layout Shift, this site’s poor Largest Contentful Paint and Interaction to Next Paint scores demonstrate that consistent engineering discipline is crucial for real-world performance gains. · Source: www.debugbear.com
> 
> ## What It Actually Costs
> 
> The figures from independent agencies are not kind. For a mid-market brand, a headless project runs $50,000 to $150,000, with hosting on top at $500 to $2,000 a month and $80,000 to $150,000 annually for a dedicated team. An honest quote for year one is in the $100,000 to $250,000 range. Enterprise work starts at $150,000 to $500,000 plus upfront and $5,000 to $50,000 per month in ongoing costs.
> 
> Put that side by side with a good Shopify Plus store on Liquid, which an agency will put in place for $50,000 to $150,000 and support for $3,000 to $8,000 monthly. You are looking at a 2x multiplier on both build and monthly expense. Our [Shopify website cost breakdown](https://refact.co/insights/ecommerce/shopify-website-cost) details how these numbers play out.
> 
> Then there are the hidden costs that tend to surface later. Take the app ecosystem. Most analytics hooks, upsells and bundles are built for a Liquid theme and must be replaced with an API-native version or rebuilt in your frontend. Or consider the merchant experience. Without the theme editor, your marketing staff cannot make a hero swap or change a layout without a developer unless you put in a headless CMS with a very deliberate UX. As one developer put it on Reddit, “I had effectively removed their ability to manage their own store.” That is not what you want to be told half a year into the launch.
> 
> ## When Headless Pays Off, and When It Doesn’t
> 
> Shreyansh Singh of Digital Heroes offers perhaps the most candid framework for this, having overseen over 2,000 Shopify projects. His view is in line with what data-driven agencies see:
> 
> -   **Under $500K GMV:** Stick with a standard theme. A three-year ROI on a rebuild is not in the cards.
> -   **$500K to $5M GMV:** This is where most rebuilds can be sidestepped with a custom Liquid theme and some app rationalization.
> -   **$5M to $10M+ GMV:** Headless may be justified, but only when Liquid hits a hard wall. We are talking about an omnichannel requirement across web and retail, a need for market-specific URLs in an international push, or a scale where checkout extensibility is maxed out.
> 
> You see the pattern in the success stories. TASCHEN went headless in five months and put 20% more sales on the table year on year. Nour Hammour turned to Hydrogen and Oxygen with Sanity for a 128% lift. Babylist saw iOS checkouts triple in the first month; Ruggable held 100% uptime on Black Friday across eight markets. In each instance there were named constraints, KPIs and executive buy-in.
> 
> The failures are the inverse. No pre-agreed metric to define success, no real constraint to address, a small team stretched thin over two codebases, and a merchant CMS strategy cobbled together after the fact.
> 
> ### What we see in practice
> 
> We have made this call for brands either [way. With Broya, the Canadian bone broth](https://refact.co/work/broya-living) company, we found that five years of conversion work on their existing Shopify store was worth more than any rebuild. The gains were in the product page structure and subscription UX, not the architecture. To have gone headless would have been a six-figure exercise in solving a non-existent problem.
> 
> With [Fiore Designs in Los Angeles,](https://refact.co/work/fiore-designs) the issue was genuine: the default Shopify checkout would not accommodate their delivery window selection and zone-based pricing. But the answer was targeted customization and workflow engineering, not a wholesale headless move.
> 
> The takeaway is consistent. Identify the constraint and then find the smallest architecture to deal with it. Do not lead with the architecture. If you cannot prove the current setup is the bottleneck, leave the money for design and content and stay on Liquid.
> 
> ## A Decision Checklist Before You Migrate
> 
> 1.  **Does the GMV justify it, and is the math sound?** For a business under $5M in GMV, the payback on a headless build tends to outlast the platform’s useful life. Put the AOV lift and model conversion up against a three-year TCO. Unless the numbers are unambiguously in your favor within 18 months, leave it alone.
> 
> 1.  **Where does Liquid fall short?** Be specific in writing it down. “We want a modern stack” is not a valid constraint. “We have to operate six markets with their own URLs and localized content while sharing inventory between iOS and the web” is.
> 
> 1.  **Is the team in place?** You will be managing two codebases and two pipelines, not to mention dependency upgrades, API versioning, security and performance engineering. These do not handle themselves. Should you put this in motion and have no one on staff to take ownership of the frontend post-launch, the build will show its age in a year.
> 
> 1.  **What of marketing?** Determine the review workflow, who is responsible for landing pages and in which tool they are edited. Make these calls before any code is written. More headless ventures come to grief here than for any technical deficiency.
> 
> 1.  **How is the phased plan structured?** A good implementation will ship a limited scope to start – one product line or market, perhaps a configurator – and grow from that. Be wary of anyone touting a multi-year big-bang replatform.
> 
> There is talk in 2026 of headless as the bedrock for AI-era commerce, with Shopify’s Universal Commerce Protocol and Agentic Storefronts leading the way. With AI-driven orders said to be 13x what they were last year, it is a trend to note. Yet UCP is compatible with Liquid storefronts; an AI surface does not need a decoupled frontend to make a purchase off your catalog. Before you put six figures into an architectural shift as some sort of hedge against agentic commerce, see what the protocol really demands.
> 
> Headless should be viewed as a strategic commitment rather than a simple toggle. It is well suited to organizations with the scale, engineering chops and hard constraints to warrant it. Those that adopt it because of some abstract notion of modernization or a competitor’s tweet on Hydrogen will find it a poor fit. For the majority of Shopify merchants we still point to a properly engineered Liquid theme with some app rationalization and performance work.
> 
> At Refact our discovery process is designed to answer whether a store truly requires headless or if a more focused Liquid build can deliver 80 per cent of the result at a third of the cost. We examine the team and the three-year expense before making a recommendation and have been known to tell brands to stick with Liquid when the case is made. For a straight assessment of your own store, I would suggest looking at our [Shopify development team](https://refact.co/services/shopify) or our guide to [Shopify store development services](https://refact.co/insights/ecommerce/shopify-store-development-services).
> 
> In the end, the correct architecture is the most modest one that meets the actual constraint. No more.
> 
> ## The Honest Bottom Line

## FAQ

### Do I need Shopify Plus to go headless?

Not strictly. Shopify allows headless setups on non-Plus plans through the Storefront API. In practice, Plus is standard for serious headless builds because Checkout Extensibility, Shopify Functions, and the scale features enterprise merchants need are Plus-tier. Non-Plus headless works for smaller experiments but rarely for a production storefront doing meaningful volume.

### Can I fully customize the Shopify checkout in a headless build?

No. On Shopify Plus, checkout stays Shopify-hosted. You customize it through Checkout Extensibility (UI extensions) and Shopify Functions (server-side logic for discounts, delivery, and payment rules). You cannot replace the checkout page itself. Teams that plan a fully custom checkout usually discover this limitation mid-project, after the design has already been approved.

### What broke when Shopify deprecated the legacy customer API?

As of API version 2024-04, the Storefront API customer mutations (customerCreate, customerAccessTokenCreate, customerRecover) are deprecated. New builds must use the Customer Account API, which is OAuth 2.0 based. Older headless builds still running on the deprecated flow need auth, session handling, and account pages rewritten. It is not a config change. Plan engineering time for it.

### Is Hydrogen just React, or is it its own framework?

Hydrogen is opinionated. It is built on React Router v7 (Remix lineage) and Vite, with streaming SSR, route-level caching, and TypeScript codegen from the Storefront schema. Teams that treat it as "just React" and fetch data at the component level often end up with duplicate requests and worse performance than Liquid. Learning the framework's conventions matters more than knowing React.

### How long does a typical headless Shopify build take?

Realistic mid-market timelines run three to six months from kickoff to launch for a scoped build, and longer for full replatforms with multiple markets or complex integrations. The successful case studies (TASCHEN at five months, Veloretti with a four-week configurator prototype) share a phased approach: ship a scoped surface, prove it, then expand. Big-bang multi-year replatforms are where most projects fail.