Summarize with AI
Explore Shopify's Hydrogen framework and Oxygen hosting—tools designed to build fast, fully customized headless storefronts. Learn how these solutions enhance performance, flexibility, and scalability for your online store.
Shopify Hydrogen is Shopify's toolkit for building headless storefronts: it handles the cart, product variants, prices in the buyer's currency, customer accounts, Shop Pay and consent-aware analytics on top of the Storefront API. Since Hydrogen 2026-10 (released on October 14, 2026) it is a library that works with any JavaScript framework, not only a React Router framework. Shopify Oxygen is Shopify's hosting for these storefronts: it runs at the edge and costs nothing extra on paid Shopify plans. You can use Hydrogen without Oxygen (for example on Vercel), and you still need a Shopify plan behind both.
We first published this guide in 2023. This version reflects Hydrogen 2026-10, current Oxygen limits and plan rules (checked on October 28, 2026 in Shopify's documentation), and what we see in headless projects at wecanfly, a Shopify Premier Partner.
Hydrogen and Oxygen at a glance
| Hydrogen | Oxygen | |
|---|---|---|
| What it is | Open-source toolkit for headless Shopify storefronts (Storefront API and Customer Account API) | Shopify's serverless hosting for storefronts, deployed at the edge |
| Cost | Free (open source) | No extra charge on paid Shopify plans |
| Frameworks | Any JavaScript framework; starters for React Router 7 and Next.js | Runs the React Router template; other frameworks deploy where they run (for example Vercel) |
| Plan rules | Needs a Shopify store; the number of headless storefronts depends on the plan | Not available on the Agentic plan; development stores and trials have no public environments |
| Can you replace it? | Yes: any framework can call the Storefront API directly | Yes: Vercel, Cloudflare, your own Node server or any other JavaScript host |
Sources: Hydrogen docs, Hydrogen and Oxygen fundamentals, Hydrogen 2026-10 announcement.
What is Shopify Hydrogen in 2026?
Until October 2026, Hydrogen was a framework: a React Router app (React Router 7, the successor of Remix, the framework Shopify acquired in 2022) with commerce features built in. To use its cart or analytics, you built your whole storefront on it.
With Hydrogen 2026-10, Shopify turned it into a library. In Shopify's words: "Hydrogen now works with any JavaScript framework." The commerce logic lives in a core package that depends only on web platform APIs, and framework bindings expose it:
@shopify/hydrogen: Storefront API client, cart, products, collections and search, money formatting, Markets, analytics, Shop Pay and caching@shopify/hydrogen/reactand@shopify/hydrogen/vue: bindings for React and Vue@shopify/hydrogen/customer-account: Customer Account API client (sign-in and order history)- Vite plugins and a TypeScript plugin that validates
gql()queries against the Storefront API schema
For full storefronts Shopify lists frameworks that run server code: Next.js, React Router, Nuxt, Astro and SvelteKit. There are two starter templates: React Router 7, deployed to Oxygen, and Vercel Shop for Next.js, maintained by Vercel and deployed to Vercel (Hydrogen docs).
Two things Hydrogen deliberately does not do: it ships no UI components (the design is yours), and it covers only the Storefront and Customer Account APIs, not the Admin API. Syncing products from an ERP or orders to a WMS still goes through the Admin API and webhooks, exactly as in a Liquid store.
What else is new in Hydrogen
- Built for coding agents. Hydrogen ships with 20 skills that tell coding agents how to use it. Running
npx @shopify/hydrogen setupin a project copies them in, and they stay in step with the installed version. - Ready for AI shopping agents. In browsers that support WebMCP, an agent can search the catalog and update the cart, and Shopify Checkout completes the order after the buyer confirms. Hydrogen storefronts also serve a Universal Commerce Protocol business profile on the store's own domain (more in our UCP explainer).
- API version 2026-10. Hydrogen uses the 2026-10 versions of the Storefront API and Customer Account API. Shopify releases a new API version every quarter, so a headless store needs regular upgrades.
- Existing storefronts keep working. If you built on Hydrogen before October 2026, nothing breaks today; Shopify provides a migration guide for when you are ready (migrate from legacy Hydrogen).
Sources: Hydrogen updates, Storefront API.
What this means in practice: if your team already runs a Next.js or Nuxt site (for content, a configurator or a marketing site), you no longer have to rebuild it on a Shopify-specific framework to get a reliable Shopify cart and analytics. That lowers the switching cost of headless. It does not lower the cost of running it, which we come back to below.
What is Shopify Oxygen?
Oxygen is Shopify's global serverless hosting for Hydrogen storefronts. It handles deployment environments, environment variables, caching, logs and rollbacks, and it integrates with Shopify's CDN. Technically it is a worker-based JavaScript runtime built on Cloudflare's open-source workerd, so it supports web standard APIs (Fetch, Cache, Streams, Web Crypto), but not every Node.js API. Shopify says Oxygen has 300+ points of presence worldwide (hydrogen.shopify.dev).
Price and plans. Oxygen is available at no extra charge on paid Shopify plans: Starter, Basic, Grow, Advanced, Plus and Pause and build. It isn't available on the Agentic plan. Development stores, Plus sandbox stores and trials can use Oxygen to build and test, but their deployments always require a store login.
Environments. Your default Git branch deploys to production; other branches get preview deployments, and you can define custom environments linked to their own branches. Shopify's GitHub app adds a CI/CD workflow to your repository, or you can use your own CI/CD. The number of public environments depends on the plan:
| Shopify plan | Public Oxygen environments | Headless storefronts (pricing page) |
|---|---|---|
| Starter, Basic, Grow, Advanced, Pause and build | 1 | 1 (Basic, Grow, Advanced) |
| Plus | 25 | 25 |
| Development stores and trials | 0 | – |
Sources: Oxygen environments, Shopify pricing. For brands with several markets or brands on separate storefronts, the jump from 1 to 25 is one of the practical reasons to choose Plus; see our Shopify Plus vs Advanced comparison and the Shopify pricing guide.
Oxygen limits
| Limit | Value |
|---|---|
| Worker size | 10 MB or less |
| Worker startup time | 400 ms or less |
| CPU time per request | 30 seconds |
| Memory | 128 MB |
| Outbound API requests | Must complete within 2 minutes |
| Environment variables | 110 per environment |
| Static files | Images 20 MB, video 1 GB, 3D models 500 MB, other files 20 MB |
Source: Hydrogen and Oxygen fundamentals, checked October 28, 2026. These limits rarely matter for a typical storefront. They matter when you plan heavy server-side work, for example calling a slow ERP or pricing engine on every page view; that logic belongs in a cache or a background sync, not in the request.
Oxygen, Vercel or your own hosting?
| Oxygen | Vercel or another host | |
|---|---|---|
| Hosting bill | Included in the Shopify plan | Separate; bandwidth and compute are your budget items |
| Framework | React Router template (workerd runtime) | Whatever the host supports, for example Next.js with Vercel Shop |
| Setup | From the Shopify admin (Hydrogen channel), GitHub integration | Storefront API tokens from Shopify's Headless channel, your own pipeline |
| Limits | Oxygen limits above; public environments by plan | Set by the host and your plan with it |
| Good fit | New headless builds that want the shortest path and no extra vendor | Teams already on Next.js or another framework, or with a CMS and site already hosted elsewhere |
Our default advice: if you start a new Hydrogen storefront and have no strong reason to use another framework, Oxygen keeps the stack and the bills simpler. If you already run a production site on Next.js, the 2026-10 release means you can add Hydrogen to it instead of rebuilding.
What going headless does not change
Hydrogen replaces the layer your customers see. It does not replace Shopify's commerce engine, and a few things work differently from a Liquid theme:
- Checkout stays on Shopify. Buyers check out on Shopify's checkout. You customize it with Checkout Extensibility (checkout UI extensions, Functions, branding), since checkout.liquid is no longer supported. Our Checkout Extensibility guide explains what is possible on each plan.
- Theme apps don't appear on their own. Apps that add blocks to a Liquid theme (reviews, upsells, loyalty widgets) don't show up on a custom storefront automatically. Before a headless project we check every app: does it offer an API, a headless SDK or support for Shopify's standard storefront actions, or does it need to be replaced?
- SEO is now your code. Server rendering, canonical tags, hreflang, redirects, 404 status codes and sitemaps have to be built and tested. We describe the checklist in headless CMS SEO.
- Integrations stay where they were. ERP, PIM and WMS connections use the Admin API in the background; see our Shopify ERP integrations and PIM integrations.
Is Hydrogen right for your store?
Headless is not the default choice for us. In our podcast episode about migrating from Magento to Shopify, Maciek Czerniak put the AI-era temptation this way: "You can also write AI-assisted code very easily and quickly in headless Shopify, for example in Hydrogen, and you can vibe-code it. But why?" Building the storefront is the small part. Payments, checkout, peak traffic and the quarterly API upgrades are where the cost sits, and on a Liquid theme Shopify carries most of that for you.
Hydrogen pays off when the storefront itself is a competitive advantage:
- Product experiences a theme can't handle well, such as complex bundle builders or configurators that go beyond what app blocks offer. Check this carefully: many 3D and AR configurators now run inside a Liquid theme too. More examples of configurators in furniture e-commerce.
- Content-heavy brands whose editorial team works in a headless CMS (Sanity, Contentful, Storyblok and similar) and wants one front end for content and commerce.
- Hard SEO or URL requirements during a migration. In our migration podcast episode, Maciek recalls a project that fell apart over the URL structure of filtered pages that an SEO agency insisted on keeping: "That could have been avoided with a headless approach."
- Several brands or markets on separate storefronts, where Plus gives 25 headless storefronts and public Oxygen environments.
It usually doesn't pay off when the catalog and pages are standard, the current theme already passes Core Web Vitals, the launch date is a few weeks away, or there is no budget for ongoing development after launch.
We learned this on our own project. In 2023 we moved OPTISOFA, a Polish furniture brand, from WooCommerce to a headless storefront on Shopify Advanced with a 3D and AR configurator by Mimeeq. A few years later, when a redesign was due, the store went back to a custom Liquid theme. The headless front end was somewhat faster, but the team valued operational speed more: changing the store quickly, installing apps and testing new ideas without a developer for each change. Everything they wanted to launch could be built on Liquid. For the full decision framework, read when headless Shopify makes sense, and for inspiration, our examples of brands using headless Shopify.
Checklist before a Hydrogen project
- Which plan do you need? One public storefront is enough for a single brand; several markets or brands on separate storefronts point to Plus.
- Which framework? React Router 7 on Oxygen is the shortest path; Next.js with Vercel Shop if your team and hosting already live there.
- Which CMS will hold content, and who edits it?
- Which current apps have a headless option, and which need replacing or custom work?
- How will URLs, redirects, hreflang and sitemaps work, and who tests them before launch?
- Which data comes from the ERP or PIM, and is it cached rather than fetched on every request?
- Who upgrades Hydrogen and the API version every quarter, and who is on call after launch?
Need help with Hydrogen or headless Shopify?
We are a Shopify Premier Partner, working with Shopify since 2016, with 400+ delivered projects. We build headless Shopify storefronts and custom Shopify apps, migrate stores from platforms such as WooCommerce (WooCommerce to Shopify migration) and look after stores after launch with Shopify maintenance. If you are not sure headless is worth it, that is a good first conversation: send us your project brief and we'll tell you honestly whether Hydrogen or a well-built theme fits your goals better.
