Headless Shopify with Hydrogen trades engineering complexity for storefront flexibility. The trade is worth it in roughly three specific scenarios. It is a net loss in roughly five common scenarios. Most brands asking us about headless Shopify do not actually need it — knowing the difference is the only Shopify-architecture decision that matters.
The short version: in standard Shopify, the same platform stores your products AND renders the storefront HTML through Liquid templates. In headless, Shopify is reduced to a commerce API (the Storefront API or Admin API via GraphQL); a separate frontend application built with Hydrogen (Shopify's React framework, built on Remix) renders the storefront and consumes Shopify's commerce data. The architecture sounds elegant. It is also dramatically more expensive to build and maintain, and most brands should not adopt it.
What headless Shopify actually changes
Change 1 — Two technology stacks instead of one
Standard Shopify is Liquid, Shopify's built-in admin, and the Theme Store ecosystem — one engineering stack, one codebase, one deploy. Headless Shopify with Hydrogen is Shopify on the commerce side AND a React + Remix application on the frontend, often deployed to Shopify's Oxygen hosting (or Vercel, or Netlify), pulling data through the Storefront API via GraphQL. That is two technology stacks, two engineering disciplines (Liquid + React), two CI/CD pipelines, two monitoring setups, and two release cycles. The team you need to maintain it roughly doubles, even if the customer-facing surface area is unchanged.
Change 2 — Editors lose what makes Shopify Shopify
Shopify's editing experience — sections, blocks, theme editor, in-context preview — is built on the assumption that Shopify renders the storefront. When you go headless, that assumption breaks. The theme editor still exists for the admin, but it has no effect on the actual storefront because the storefront is a React app reading from the Storefront API. Live preview stops working by default; merchandisers need a custom preview implementation in the Hydrogen app that pulls draft content from the API.
Editors notice this within the first week. The complaints we hear most often: “I can't see my changes in the theme editor.” “The collection sort I changed in the admin isn't reflecting on the live site.” “I rearranged the homepage but it still looks the same.” Every one of these is fixable with engineering, but the fixes are real work that does not exist in a standard Shopify build.
Change 3 — App ecosystem becomes selective
Many Shopify apps assume they render UI on the storefront via Liquid or script injection. Reviews apps that inject star ratings, recommendation apps that render product cards, currency conversion apps that swap prices on the page — all of these rely on the Liquid storefront. In headless, you can use any app that exposes its data through an API. You cannot use any app that injects HTML or JavaScript directly into Liquid templates. That filter rules out a significant percentage of the Shopify App Store.
The apps that still work cleanly headless: Klaviyo (data via API), Recharge (subscription via API), Shopify-native features (Shop Pay, Markets, B2B), most analytics tools that pixel-track headlessly, and any app with a real GraphQL or REST API. The apps that do not: most reviews apps, most upsell-on-page apps, most recommendation widgets, most chat widgets that integrate via theme app embed. Headless replacement for each requires either an alternative or custom integration.
The three scenarios where headless Shopify earns it
Scenario 1 — You need React-grade storefront UX
If the storefront experience genuinely requires React-quality interactivity — complex configurable products with real-time previews, AR try-on, dynamic bundle builders, customisation engines, deeply interactive product comparisons — Hydrogen makes sense. The React app needs to be a React app for product reasons. We have built this for fashion brands with serious customisation engines and beauty brands with shade-matching tools where the standard Shopify product page cannot deliver the experience the brand needs.
Scenario 2 — You need sub-second LCP globally and standard Shopify cannot deliver it
Standard Shopify with a well-built custom theme hits LCP under 1.5 seconds in most markets. Headless with Hydrogen and Shopify's Oxygen edge hosting can hit sub-800ms LCP globally because Oxygen runs at the edge and Hydrogen streams server-rendered React. For brands competing on storefront performance as a differentiator — large catalogue, content-led, multi-region with strict performance targets — headless can be the right architecture. We have built this for content-led D2C brands where every additional 100ms cost meaningful conversion.
Scenario 3 — You're a Shopify Plus enterprise serving multiple frontends
If the same Shopify commerce engine has to power a marketing website, a mobile app, in-store kiosks, a wholesale portal, and a marketplace — multiple frontends, one commerce backend — headless is the right answer. The Storefront API becomes the single source of truth; each frontend consumes it differently. We have built this for retail brands and B2B platforms where Shopify is the commerce engine but the customer experiences are radically different per channel.
The five scenarios where headless is a net loss
Standard D2C catalogue. A brand selling products through a single storefront. Standard Shopify with a well-built custom theme delivers near-identical performance and customer experience at half the cost.
Stores under roughly one million annual GMV. The complexity overhead does not pay back. Most growing D2C brands need their engineering and design budget on growth marketing, not on duplicating a working Shopify storefront.
Marketing-heavy editorial teams. If non-technical marketers need to ship landing pages, change merchandising, swap hero images, the standard Shopify theme editor is genuinely faster than the custom preview workflow you have to build in headless.
Stores reliant on Shopify App Store ecosystem. If your stack depends on 10+ apps that inject UI into Liquid — reviews, recommendations, upsells, currency, chat — replacing them in headless is significant engineering work that almost always falls outside the original scope.
“As cheap as possible” budgets. Headless Shopify is roughly 2 to 3 times the build cost of standard Shopify and roughly 1.5 to 2 times the ongoing maintenance cost. If the budget is tight, standard Shopify with strong performance and theme work delivers better outcomes.
The middle path: standard Shopify, very well built
For about 75% of clients asking about headless Shopify, the right answer is not “go headless” — it is “do standard Shopify properly.” A well-built standard Shopify store on a custom theme, with the seven performance fixes applied, hits sub-1.5-second LCP, 95+ Lighthouse mobile, conversion on par with headless implementations, and the editorial experience stays intact. It costs roughly half as much to build, half as much to maintain, and the marketing team can ship landing pages without engineering.
Going headless because “Shopify is slow” is often a category error. Slow Shopify is a build-quality problem (installed themes + apps + images), not an architecture problem. Fix the build quality and the speed problem disappears, without taking on the headless complexity tax.
What good headless Shopify looks like (if you do need it)
Use Hydrogen + Oxygen, not generic Next.js. Hydrogen is purpose-built for Shopify commerce data and Oxygen is the edge hosting platform Shopify built for it. Generic Next.js with custom GraphQL clients works but loses the integration polish and Shopify-native features.
Build the preview workflow first. Merchandisers will use the preview button before they use anything else. If preview fails or takes 30 seconds, editorial trust evaporates in the first week. Invest in a custom preview route in Hydrogen that pulls draft content from the Storefront API.
Plan the app strategy carefully. List every app you currently use, mark which ones expose data through APIs versus which inject UI. The “UI-injecting” apps either need API-only replacements or custom integration. This is a real cost — sometimes 25-40% of the headless build effort.
Use Shop Pay even in headless. The Shop Pay checkout converts dramatically better than alternatives on mobile. Hydrogen exposes Shop Pay components — use them.
Don't go headless for the wrong reasons. “We want to be modern.” “Our investors asked.” “Everyone is doing it.” None of these are good reasons. Architecture follows business need, not trend.
The honest recommendation
If you have to ask whether you need headless Shopify, you probably do not. The architecture serves specific problems — React-quality storefront UX, sub-second LCP for content-led brands, multi-channel commerce. For everything else, standard Shopify with the same engineering care delivers the same outcomes at half the cost.
At Dream Steps we have built both. We have rebuilt a few headless stores back to standard Shopify because the team that inherited them could not maintain the headless complexity. We have built standard stores into headless when the business genuinely outgrew the architecture. The decision is not technical fashion; it is fit. Make it on fit.
Common questions
Is headless Shopify actually faster?
Faster by default, yes — but the gap closes when standard Shopify is properly tuned. Hydrogen on Oxygen ships sub-800ms LCP globally because Oxygen runs at the edge and Hydrogen streams server-rendered React. A well-built standard Shopify store with a custom theme and the seven performance fixes ships sub-1.2-second LCP globally. The real-world difference is typically 200 to 400 milliseconds at the storefront level — meaningful for some businesses, marginal for most.
How much does headless Shopify with Hydrogen cost?
Roughly 2 to 3 times the build cost of a custom standard Shopify theme and 1.5 to 2 times the ongoing maintenance cost. Build cost is higher because you are shipping two applications (Shopify configuration plus the Hydrogen frontend) and integrating them. Maintenance cost is higher because the team needs both Liquid / Shopify expertise and React / Hydrogen expertise, and changes often touch both stacks. Hosting on Oxygen is included in Shopify Plus subscriptions; standalone Hydrogen hosting (Vercel, Netlify) adds another monthly cost.
Can I make my existing Shopify store headless?
Technically yes, but in practice it is a rebuild of the storefront rather than a migration. The Shopify admin, product catalogue, customer data, orders, and apps stay where they are; the storefront (theme, templates, anything that renders HTML) is replaced with a Hydrogen application. Budget the same time and cost as a fresh headless build. Roughly 10 to 16 weeks for a typical mid-size store, plus 2 to 3 weeks of additional time for app integration work that did not exist in the standard Shopify build.
What about other headless options — Next.js with Shopify, Vue / Nuxt, Vendure?
Generic Next.js with Shopify’s Storefront API works and was the standard approach before Hydrogen matured. We still build with Next.js + Shopify for clients who want the wider React ecosystem and are not committed to Shopify’s preferred path. Vue / Nuxt is rarer in our work but viable. Vendure is a different beast — it is its own commerce engine, not headless Shopify. If you are starting fresh and not committed to Shopify, evaluate Vendure, Medusa, and Commerce.js alongside headless Shopify; for brands already on Shopify, Hydrogen is the path of least resistance.
Should I just stay on standard Shopify?
Probably yes. Most brands asking us about headless do not actually need it. Standard Shopify with a properly built custom theme, the seven performance fixes, and tight app discipline hits the same conversion, performance, and customer-experience outcomes as headless — at half the cost and complexity. The exceptions are real but specific: React-grade storefront UX requirements, sub-second LCP differentiation as a business strategy, and multi-channel commerce serving the same catalogue across radically different frontends. If you do not fall into one of those three buckets, standard Shopify done well is the right answer.
Deciding between headless and standard Shopify?
Tell us about the catalogue, the team, the customer experience you need. We will come back with an honest read on which architecture fits, including realistic build costs for both.