Headless Shopify with Hydrogen: the complete decision guide

Key takeaways

• Headless Shopify with Hydrogen means building your own React storefront on Shopify’s Storefront API, with Shopify keeping the backend and checkout. Hydrogen is the framework, Oxygen is the free hosting.¹
• The real cost is the team, not the software. Hydrogen and Oxygen are free. The ongoing React engineering they require is not, and it never stops.
• Most stores considering headless want design freedom and speed. Both are now achievable on a normal Liquid theme, without hiring frontend engineers.
• Headless is the right call for a specific minority: multi-surface brands, app-like storefronts, and teams that already have dedicated frontend engineers.
• As of August 2026, Oxygen also works on development stores and trial stores, so you can evaluate a Hydrogen build before paying for a plan.²³

Headless Shopify with Hydrogen is the setup where Shopify runs your products, inventory, customers, and checkout, while your own React application renders the storefront. Hydrogen is Shopify’s framework for building that application, and Oxygen is Shopify’s hosting for running it.

This guide is a decision guide, not a sales pitch in either direction. It covers what headless and Hydrogen actually are, what a build costs in people and money, who genuinely benefits, who does not, and how the choice compares to staying on a Liquid theme in 2026.

We build a tool that improves Liquid themes, so read our conclusions knowing that. We have tried to make this the fairest explainer you will find, because the honest answer helps more merchants than a scare piece would.

---

Why you can trust us

We have been in the Shopify space for over four years and have worked with hundreds of stores across both architectures.

Jacques, our CTO, has more than 15 years of development experience, including React storefront work, so the engineering estimates below come from building these things, not from reading about them.

We build Fudge, an AI storefront editor with a 4.9 rating on the Shopify App Store. Fudge is our product and it competes for the same budget a headless build would consume - judge the recommendation sections with that in mind.

---

What is headless Shopify?

Headless means separating the storefront from the platform that powers it.

In a standard Shopify store, the Online Store channel renders your Liquid theme. Shopify controls the rendering, the hosting, and the connection to your data. One system does everything.

In a headless store, you delete that middle layer. Shopify still owns the admin, products, inventory, customers, discounts, and checkout. Your own application, running anywhere, asks Shopify for data and renders the storefront itself.

That conversation happens over the Storefront API, a GraphQL API that exposes products, collections, carts, search, pages, and blogs to any client.⁴ It is versioned quarterly (2026-07 at the time of writing) and authenticates with public tokens for browsers and private tokens for servers.⁴

One thing headless does not change: checkout stays on Shopify. Your custom storefront builds the cart, then hands the buyer to Shopify’s hosted checkout. Checkout customization works the same way on both architectures.

Headless swaps Shopify’s rendering layer for your own application; everything behind the storefront stays Shopify.

---

What is Hydrogen?

Hydrogen is Shopify’s own framework for building headless storefronts in React.

You could build a headless storefront with Next.js, Astro, or plain React. Hydrogen exists because most of that work is undifferentiated plumbing: cart state, Shopify analytics, Shop Pay, customer accounts, SEO routes. Hydrogen ships those pieces pre-built, which is why Shopify positions it as “headless in half the time.”⁵

What you get out of the box:

• A full storefront skeleton - routes for home, products, collections, cart, search, blogs, accounts, policies, robots.txt, and sitemap.¹
• Commerce components - cart forms, variant selectors, money formatting, media, pagination, and a Shop Pay button.⁵
• Built-in integrations - Shopify analytics, customer accounts, and caching tuned for the Storefront API.⁵

Since the 2025.5 release, Hydrogen is built on React Router 7, the successor to the Remix framework it originally used.¹ That matters for hiring: any React developer can work on a Hydrogen codebase, but they still need to learn Hydrogen’s data patterns and Shopify’s APIs.

Hydrogen and its companion Oxygen are what Shopify calls its “recommended stack for headless commerce.”¹ If you go headless on Shopify in 2026, this is the supported path.

What is Oxygen?

Oxygen is Shopify’s hosting platform for Hydrogen storefronts, a worker-based edge runtime that deploys straight from the Shopify CLI or a GitHub integration.

The commercial detail that surprises people: Oxygen is included at no extra charge on paid Shopify plans.¹ You do not pay Vercel-style hosting bills to run Hydrogen the supported way.

Two rollouts in August 2026 removed the last barrier to trying it:

• August 3, 2026 - Oxygen became available on development stores, so agencies and developers can deploy real Hydrogen builds without a paid plan. Deployment URLs require a store login, since development stores have no public environments.²
• August 25, 2026 - the same arrived for trial plan stores, with the same login-gated URLs.³

Oxygen has runtime limits worth knowing before you architect around it: 30 seconds of CPU time per request and 128 MB of memory.¹ Heavy server-side work belongs in a separate service, not in the storefront worker.

Hydrogen is free, Oxygen is free on paid plans, and since August 2026 you can trial both on a development store - the cost of headless is entirely in the engineering.

---

What changed in August 2026: the Hydrogen developer preview

Shopify’s August 18, 2026 Hydrogen developer preview update is worth reading closely, because it shows both how actively the platform is improving and what headless builders have been living without.⁶

The preview includes six changes:⁶

Update	What it fixes
Cart session attribution	Carts and customer account sessions stay in sync, so signed-in shoppers reach checkout with their saved details instead of a guest flow
Cart attributes	Attach order-wide data (gift messages) to the cart and per-line data (engraving text) to individual lines
Standard page view events	Storefronts now emit a page view event on every navigation; previously only the initial page load reached analytics tools
Faster Shop Pay button	The button rendered blank until Shopify’s hosted script loaded; Hydrogen now renders it styled and clickable before any JavaScript runs
Local HTTPS for customer accounts	Test login flows on a trusted local hostname without tunnels or hand-rolled certificates
Pluggable logging	Control log levels and forward warnings and errors to your own observability tooling

Read that list honestly and you see the trade at the heart of headless. Every item on it is something a Liquid theme has had by default for years. Signed-in checkout, complete analytics events, an instant Shop Pay button - on the Online Store channel, Shopify wires these for you. On headless, they were gaps until Shopify closed them, and your team owns whatever gaps remain.

That is not a criticism of Hydrogen. It is the definition of the architecture: you take ownership of the storefront layer, including the parts you did not know Shopify was quietly handling. Our August 2026 Shopify updates roundup covers the rest of that month’s platform changes alongside these.

---

What headless Shopify actually costs

Hydrogen has no license fee and Oxygen has no hosting fee. The cost is the team. Here is the honest comparison, based on our experience building and maintaining both kinds of storefront.

	Liquid theme	Headless with Hydrogen
Software cost	Free or one-time theme purchase (typically $0 to $400)	Free (Hydrogen + Oxygen)
Team to build	A merchant with the theme editor, plus occasional theme developer help	1 to 3 React developers who know (or learn) Hydrogen and the Storefront API
Initial build time	Hours to set up; days to weeks for heavy customization	Commonly 3 to 6 months for a full production storefront
Typical build cost (agency)	Usually under $10,000 for deep theme customization	Commonly quoted from $50,000 to $250,000+ depending on scope
Ongoing maintenance	Optional theme updates; Shopify maintains the platform	Continuous: dependency upgrades, quarterly API version bumps, framework migrations (Remix to React Router 7 was real work for existing builds)
Ongoing team cost	Near zero between projects	At least part of a frontend engineer’s time, permanently
App integrations	Most storefront apps work out of the box via theme app extensions	Every app’s storefront surface is custom integration work
Content and page changes	Theme editor, no developer needed	Developer work, or a headless CMS you also pay for and maintain

Treat the dollar figures as planning ranges, not quotes - scope moves them a lot. The rows that do not move are the structural ones: the build takes months, the maintenance never ends, and marketing loses self-service publishing unless you invest further in a CMS and preview tooling.

The maintenance row deserves emphasis because it is the one teams underestimate. A Liquid theme left alone for a year still works. A Hydrogen storefront left alone for a year has an out-of-date API version, stale dependencies with security advisories, and possibly a framework migration waiting. Someone has to own that, forever.

---

Who genuinely needs headless Shopify?

Headless is the right architecture for a real minority of stores. The pattern across the genuine cases: the storefront is an application, not a set of pages.

You are probably in that minority if several of these apply:

• You run multiple surfaces from one backend. A web store plus a native mobile app, in-store kiosks, or embedded commerce in another product. The Storefront API serving several clients is exactly what headless is for.⁴
• Your storefront is app-like. Product configurators, virtual try-on, custom subscription dashboards, logged-in experiences with heavy interactivity. When the frontend is genuinely a React application, building it in a React framework is honest architecture rather than fashion.
• Content is your moat and it lives in a CMS. Editorial-commerce hybrids that publish at magazine volume, already staffed and tooled for a headless CMS, can wire commerce into that pipeline rather than the reverse.
• You already have dedicated frontend engineers. Not access to an agency - engineers on payroll whose job is the storefront. Headless without them fails slowly and expensively.
• You have hit a real wall in Liquid. Not “the theme feels limiting,” but a specific, named capability you have tried and cannot build in a theme. Walls like that exist; they are just rarer than agencies suggest.

One more emerging case cuts both ways. AI shopping agents increasingly browse and buy on behalf of customers, and serving them well means structured data and clean APIs. Headless teams control that surface completely, but Shopify is shipping the same agent-facing infrastructure to every store, theme or not - our guide to agent-ready Shopify storefronts covers what actually matters there. Agent readiness alone is not a reason to go headless.

If your storefront is genuinely an application serving more than one surface, headless earns its cost; if it is pages, it usually does not.

---

Who should NOT go headless

This group is much larger than the first one. Stay on a Liquid theme if any of these describe you:

Your motivation is design freedom. This is the most common reason merchants explore headless, and in 2026 it is the weakest. Liquid themes are not a design ceiling - custom sections, custom CSS, and custom layouts are all native theme capabilities. The historical problem was that reaching them required a developer. That problem now has cheaper solutions than a six-month React build, which we cover in the next section.

Your motivation is speed. Headless does not automatically make a store fast, and the assumption that it does has burned a lot of budgets. More on this below.

You have no in-house engineers. If an agency builds your Hydrogen storefront and leaves, every future change - a banner, a section reorder, a bug - is a contract and an invoice. The stores that regret headless most are the ones that bought the build but not the team.

Marketing publishes weekly. Landing pages, campaign sections, seasonal swaps: on a theme these are editor work; on headless they are tickets in an engineering queue or a CMS project on top of the build. If your growth depends on publishing velocity, headless works against it.

You depend on many storefront apps. Reviews widgets, bundles, quizzes, loyalty displays - apps integrate with themes automatically through theme app extensions. On headless, each one is bespoke integration work against that app’s API, if the app has one at all.

Your revenue does not cover a permanent engineering line item. As a rough sanity check: if a fraction of a frontend engineer’s salary is a significant share of your margin, the maintenance alone is disqualifying, regardless of the build budget.

None of this is a knock on Hydrogen, which is the best version of headless Shopify there has been. It is a knock on choosing an architecture whose costs you will pay and whose benefits you will not use.

---

The design freedom question: what most stores actually want

Here is the honest pattern we see. A brand outgrows its theme’s look, gets told “for real design freedom you need headless,” and starts pricing React agencies. But the thing they want is not an architecture. It is a storefront that looks custom and ships fast.

That is now a solved problem inside the theme layer. AI theme tools write the same custom Liquid, CSS, and JavaScript a theme developer would, directly against your existing theme - our Shopify AI toolkit guide maps that tooling category, including why this generation of tools replaced the old widget-injection page builders rather than extending them.

This is the job Fudge, our product, does. You describe the section or page you want, Fudge reads your store’s actual theme and builds native code in a draft theme you preview before anything goes live. The output is standard theme code you own - it survives uninstalling the app, which no headless build and no legacy page builder can say. There is a free plan, with build-credit plans from $25/month, and the AI page builder page shows what that looks like in practice.

The fair comparison, then, is not “headless vs a stock theme.” It is:

• Headless with Hydrogen: total design control, months of build, permanent engineering ownership.
• A Liquid theme with AI-built custom code: near-total design control for pages and sections, hours to days per change, no engineering team, and the theme editor keeps working for your marketers.

Headless still wins when the requirement is application behavior or multiple surfaces. For the majority whose requirement is “make our store look and convert like the brands we admire,” the theme layer now gets there at a fraction of the cost.

Most “we need headless” conversations are really “we need custom design without waiting on developers” - and that no longer requires leaving the theme.

---

Is headless Shopify actually faster?

Sometimes. Not by default, and this is where honesty matters most.

A well-built Hydrogen storefront is genuinely quick: server-side rendering at the edge, tight control over every script, no theme baggage. The August 2026 preview’s Shop Pay button fix is a good example of Shopify sanding down the remaining rough edges.⁶

But architecture does not guarantee outcomes. A Hydrogen build loaded with client-side JavaScript, heavy images, and third-party scripts is slower than a disciplined Liquid theme, and we have measured plenty of both. Modern Online Store 2.0 themes are fast when you keep them clean; the store-killers are the same on both stacks - script weight, image weight, and app bloat.

Two resources if speed is your actual goal: our Shopify mobile speed guide covers the fixes that move Core Web Vitals on a theme, and the State of Shopify performance 2026 report shows what real stores achieve on each architecture.

If your store is slow today, diagnose before you re-platform. Most slow Shopify stores are slow for reasons a rebuild would faithfully reproduce.

---

Headless Shopify decision checklist

Score yourself honestly. Count a point for each statement that is true:

1. We operate, or will operate within 18 months, a second storefront surface beyond the web store (native app, kiosk, embedded commerce).
2. Our storefront needs application behavior a theme cannot express, and we can name the specific feature we have already tried and failed to build in Liquid.
3. We have at least one frontend engineer on payroll who will own the storefront permanently.
4. Our content team already works in a headless CMS, or we have budgeted one plus the integration.
5. We have audited every storefront app we rely on and priced its custom integration.
6. We can fund a 3 to 6 month build and a permanent maintenance line without starving acquisition or CRO.
7. Marketing accepts that page and section changes go through engineering or the CMS, not a theme editor.

Five or more: you are a genuine headless candidate. Spin up a Hydrogen storefront on a development store - since August 2026 that costs nothing² - and validate with a real prototype before committing.

Three or four: the trade is live but not obvious. Prototype on a dev store and, in parallel, test whether AI-driven theme work closes your actual gap for a fraction of the spend.

Two or fewer: stay on Liquid. Spend the difference on design, speed, and conversion work that ships this quarter instead of next year.

---

Summary

Headless Shopify with Hydrogen is a mature, well-supported architecture in 2026. Hydrogen is a real framework on React Router 7, Oxygen hosting is free on paid plans and now open to development and trial stores, and Shopify is visibly closing the gaps, as the August developer preview shows.¹⁶²³

The software is free; the architecture is not. A Hydrogen build costs months of engineering up front and engineering ownership forever, and it moves storefront publishing from your marketers to your developers.

That price is worth paying for multi-surface brands and app-like storefronts with engineering teams. For most stores, the goals driving the conversation - custom design, faster pages, freedom from theme constraints - are now reachable inside the theme layer, in days instead of months.

Decide from the checklist, not from the demo.

---

FAQ

Footnotes

1. “Hydrogen and Oxygen fundamentals,” Shopify developer documentation, describing Hydrogen and Oxygen as Shopify’s recommended stack for headless commerce, React Router as the framework Hydrogen is built on, Oxygen at no extra charge on paid Shopify plans, and the 30-second CPU / 128 MB worker limits. Checked September 2026: https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷

2. “Oxygen is now available on development stores,” Shopify developer changelog, August 3, 2026, noting that deployment URLs on development stores require a store login: https://shopify.dev/changelog/oxygen-is-now-available-on-development-stores ↩ ↩² ↩³ ↩⁴

3. “Oxygen is now available on trial plan stores,” Shopify developer changelog, August 25, 2026: https://shopify.dev/changelog/oxygen-is-now-available-on-trial-plan-stores ↩ ↩² ↩³

4. “Storefront API,” Shopify developer documentation, covering GraphQL access to products, collections, carts, and search, public and private access tokens, and the 2026-07 API version. Checked September 2026: https://shopify.dev/docs/api/storefront ↩ ↩² ↩³

5. Hydrogen framework site, with the “headless in half the time” positioning and the list of commerce components and built-in Shopify integrations. Checked September 2026: https://hydrogen.shopify.dev/ ↩ ↩² ↩³

6. “Hydrogen developer preview update: August 18, 2026,” Shopify developer changelog, listing cart session attribution, cart attributes, standard page view events, the pre-rendered Shop Pay button, local HTTPS for customer account development, and pluggable logging: https://shopify.dev/changelog/hydrogen-developer-preview-update-august-18-2026 ↩ ↩² ↩³ ↩⁴