Headless Shopify in 2026: Who Actually Needs Hydrogen

Most Shopify brands in the $100K–$10M range should stay on a theme. Headless means you replace the Online Store theme with your own frontend — Shopify's Hydrogen toolkit on Oxygen hosting, or another React app talking to the Storefront API — while Shopify keeps the admin, the catalog, tax, payments, and checkout. Hydrogen and Oxygen cost nothing extra on paid plans. The bill is the React team that has to keep the storefront alive after launch day. Go headless only when the storefront is genuinely an application and you already have the engineers to own it. If the brief is "make it faster" or "make it look more custom," start with theme choice, app count, and Core Web Vitals. Those are solvable without a rewrite.

What headless means on Shopify right now

Headless, on this platform, is a storefront decision. You stop rendering pages with a Liquid theme and start rendering them in an application you deploy yourself. The merchant admin, product records, discounts, markets, and order pipeline stay in Shopify. Customers still pay on Shopify-hosted checkout. Shopify's own migration guidance is explicit: regardless of Online Store or Hydrogen, buyers are directed to a Shopify-hosted checkout. The cart's checkoutUrl is the handoff, not a page you design in React.

Hydrogen

Shopify's storefront toolkit for custom frontends. A Hydrogen project is a React Router app with Shopify API clients, components, and a CLI. It is Shopify's recommended way to build a headless storefront.

Oxygen

Shopify's edge hosting for Hydrogen. It runs a worker-based JavaScript runtime, ships with the Hydrogen sales channel, and is included at no extra charge on paid plans. You can self-host Hydrogen elsewhere, but Oxygen is the default path.

Vendors blur the names in sales calls. Hydrogen is the React Router app: loaders fetch Shopify data on the server so HTML can ship before the browser runs your JavaScript. Oxygen is the host, and it turns on only after you install the Hydrogen sales channel (inventory publish, environments, variables, logs). The Headless sales channel is the other door — Storefront API tokens when you host the frontend yourself, for example a Next.js app on your own platform.

Checkout stays on Shopify either way. If your Hydrogen store is example.com, Shopify's migrate notes tell you to attach a checkout subdomain such as checkout.example.com, set the domain target to Online Store, and mark that domain Primary. Online Store password protection also blocks Hydrogen checkouts — turn the storefront password off before you test a real purchase, or every checkout attempt dies at the gate.

Product URLs have a convention you should not freelance. Shopify recommends /products/:handle. If your design wants /shop/:handle or /bag for the cart, add a server-side 3XX redirect from the canonical path. Cart permalinks should keep working. During a migration, Liquid and Hydrogen carts can share a cart cookie, but only if the same products are published to both the Online Store channel and the Hydrogen channel. Miss that publish step and the "shared cart" demo is an empty cart.

Treat headless and Shopify Plus as separate decisions. Whether Plus is worth it turns on Brand Agents, Copilot Checkout, checkout extensibility, and B2B — not on whether your pages are Liquid. A Hydrogen rebuild does not unlock those Plus products, and a Plus upgrade does not require Hydrogen. Scope them on different calls.

The test that decides yes or no

Run four questions in order. Headless is justified when the engineering answer is yes and at least one of the structural answers is yes. A beautiful mood board is not a structural answer.

Do at least two frontend engineers stay after launch? Two people whose job after go-live is this storefront: deploys, dependency bumps, and incidents when a Storefront API version moves. Hydrogen tracks those versions, and a breaking API version arrives as a breaking Hydrogen version. A freelancer sprint can ship a demo. It cannot own the next four quarters of upgrades. If the answer is no, stay on Liquid and spend the budget on the theme.

Is the storefront an application, or a set of pages? Real cases in this revenue band are narrow: a second surface on the same catalog (trade portal, kiosk, companion app), a configurator whose price changes as constrained options stack, or a CMS that already owns the marketing site and must own PDP layout with editors shipping every week. "We want it to feel like a magazine" is a theme-section problem. That decision lives in theme choice in the agentic era.

Have you already used what Liquid can do? Theme sections, metaobjects, Shopify Functions, and checkout UI extensions cover a large share of the customizations that used to force a replatform. Read the checkout extensibility guide before you treat checkout as the reason to go headless. Headless gives you a custom path up to the cart. Checkout stays Shopify's.

Will you rebuild the apps that make money? Theme app embeds and script tags do not follow you to Hydrogen. Reviews, subscriptions, search, bundles, and upsells each become a Storefront API integration or a supported headless app. If the stack is 15–25 apps, run the 6–8 app audit on the theme first. Many of those apps should go either way. On a headless cutover, every one of them goes quiet until someone re-implements it.

If you fail the engineer question, the other three do not rescue the project. If you pass the engineer question but every structural answer is "we want a fresher design" or "the theme feels slow," you are about to buy a rewrite to avoid an audit.

Oxygen limits you should budget before you sign

Oxygen is included on paid plans: Starter, Basic, Grow, Advanced, Plus, and Pause and build. It is not available on Shopify's Agentic plans — confirm the plan in admin before anyone promises a deploy. Development stores, Plus Partner sandboxes, and trial plans can deploy, but they have no public environments, so those URLs require a store login. Shopify opened Oxygen to trial plans on August 25, 2026; the login wall on trial and development stores remains. Shareable previews that outsiders can open start on Basic and above.

The worker limits are the numbers to put in the scope, because they are hard caps, not style guidance. From Shopify's Hydrogen and Oxygen fundamentals:

• The worker bundle must be 10 MB or less, and the file must be named index.js.
• Startup time must be 400 milliseconds or less.
• CPU time is capped at 30 seconds per request.
• Memory is capped at 128 MB. Go past it and requests can drop.
• You get 110 custom environment variables.
• Outbound API calls must finish within 2 minutes.
• Static asset ceilings include 20 MB images, 1 GB video, and 500 MB for 3D models.

Oxygen does not support a proxy in front of the deployment. Proxies conflict with its bot mitigation and cause SEO problems. An agency plan that puts another CDN in front "to fix caching later" fights the host. Self-hosting Hydrogen is allowed when you need a different edge — and then you own that host, the Headless-channel tokens, and the cache. Deployments are immutable snapshots, kept at least six months, with the ten most recent per environment kept regardless of age. A rollback is not a substitute for a team that notices one was required.

What you lose the week you leave the theme

The week of cutover is when headless stops being an architecture slide and becomes a store.

Apps go quiet. Theme app embeds and script tags do not render. Subscription widgets, review stars, size charts, and post-purchase offers need a new implementation, each as a scoped line item. "Headless-ready" on an app listing still means install, theme, and test against your routes.

SEO paths break if you invent URLs. Rankings sit on /products/:handle, /collections/:handle, and old campaign URLs. Server-side 3XX redirects, canonicals aimed at the Hydrogen host, and no proxy in front of Oxygen are the minimum. A domain or platform change still follows the migration-without-losing-rankings checklist.

Checkout fails on configuration, not on React. Password page left on. Checkout subdomain pointed at the wrong target. Products published to Online Store and missing from the Hydrogen channel, so the cart creates and checkout has nothing to sell. checkoutUrl aimed at a domain that is not the production environment. These are the usual first-launch incidents.

Editors lose the theme customizer. On Hydrogen a landing page is a route, a CMS entry, or a deploy. Weekly campaigns without a CMS in the scope wait on engineering. That trade is sound when engineers are staffed. It is a poor trade when headless was sold as freedom from developers.

Agents still need facts in the first HTML. React Router defaults to server rendering, which is the right direction. Hydrogen does not write your product facts for you. JSON-LD, metafield-backed specs, and stable copy remain the work in building a Shopify product page agents can read. A gallery that hides fabric, fit, and price until JavaScript runs is a weaker agent surface than a fast theme.

Speed is a theme problem until the test says otherwise

The usual pitch is performance. The measurable bar is public and small. Google's Core Web Vitals "good" thresholds are an LCP of 2.5 seconds or less, an INP of 200 milliseconds or less, and a CLS of 0.1 or less. Those are the numbers to hold a rebuild to — and the numbers a theme is capable of hitting when the app stack is thin and the template is server-rendered.

Oxygen's own startup budget (400 milliseconds before the worker may begin the request) is a reminder that the host will not save a heavy bundle. A 10 MB worker cap punishes the "install every library" frontend. If your current theme scores poorly, the cause is usually third-party scripts, an oversized theme, and images — the ground covered in Shopify speed and Core Web Vitals. Fix that first. Re-measure. If you are inside the good thresholds and the only remaining pain is a configurator or a second sales surface, then Hydrogen is a candidate. If you are outside the thresholds, a rewrite copies the mess into React and adds a deploy pipeline.

If a pitch says "go headless for speed," record mobile LCP, INP, and CLS on home, collection, PDP, and cart, then cut apps toward the jobs you still need. Native Search & Discovery, metafields, and Flow replace a lot of script tags. Re-test. Open a Hydrogen scope only if a structural requirement remains, and put the same three thresholds in the acceptance criteria.

Shopify operations work at this size is theme, apps, checkout, and catalog. Headless has to beat the theme on those metrics. A homepage screenshot is not the test.

If the test passes, build in this order

Passing the test means you are staffing a product, not buying a theme. Keep the Online Store live until the Hydrogen host can take a real order. Publish the catalog to the Hydrogen channel before you argue about design.

1. 1

   Keep Liquid as the fallback

   Leave the current theme in production. Link the Hydrogen project, pull environment variables, and deploy to an Oxygen preview. Do not cut DNS on the first green build.

2. 2

   Match the URLs you already rank for

   Serve products at /products/:handle. Add 3XX redirects for any path you insist on changing. Plan collection, page, and blog redirects in the same pass.

3. 3

   Hand checkout back to Shopify

   Create the cart with the Storefront API and send buyers to checkoutUrl. Attach checkout.yourdomain.com (or the subdomain you choose) with target Online Store and type Primary. Turn off the Online Store password before the first end-to-end purchase test.

4. 4

   Re-platform only the apps that earn a line

   Reviews, subscriptions, and search each get an owner, a headless-capable approach, and a test on the new routes. Everything else stays deleted. Do not put a reverse proxy in front of Oxygen to "make the old apps work."

5. 5

   Accept on Core Web Vitals and a real order

   Ship when mobile LCP, INP, and CLS meet the good thresholds on home, collection, and PDP, and when a full purchase completes on Shopify checkout — tax, shipping, and a payment method included.

Environment variables, the Hydrogen channel publish step, the redirect map, and checkout-domain DNS take more of a first launch than the homepage animation. The animation is what stakeholders remember. The checkout subdomain is what takes the money.

If you are still on the fence after the four questions, stay on the theme for the next sprint. A look at plan, app list, templates, and whether anyone on payroll writes React is enough to place you on one side of the test.