Supported end to end
Framework, hosting and data layer all come from Shopify, so there is one place to take a problem.
SHOPIFY’S OWN FRAMEWORK
Shopify Hydrogen and Oxygen development
Hydrogen is Shopify’s own React framework for building a storefront that reads from the Storefront API instead of rendering Liquid templates, and Oxygen is the hosting Shopify provides for it at no extra platform cost. It is the shortest route to headless that keeps you inside supported territory: Shopify still owns the catalogue, cart, checkout and orders, so you gain control of the front end without rebuilding commerce logic you would then have to maintain forever.
IN SHORT
- Hydrogen is Shopify’s React framework for storefronts that read from the Storefront API instead of rendering Liquid.
- Oxygen is Shopify’s hosting for Hydrogen, included for Plus merchants at no additional platform fee.
- Choosing Hydrogen keeps you inside supported territory: the framework, the hosting and the data layer all come from one vendor.
- Checkout stays on Shopify, which is the part carrying PCI scope and the part you should never rebuild.
- You lose the theme editor on day one, so a content tool has to be chosen at the same time, not afterwards.
What Hydrogen gives you that an empty React project does not
Hydrogen
A React framework maintained by Shopify, built on Remix, with the commerce parts already solved — cart state, Storefront API clients, caching rules that understand which data can go stale and which cannot, and a deployment target in Oxygen. Starting from a blank Next.js project means building all of that yourself before you render a product page.
Hydrogen or a Liquid theme
| Liquid theme | Hydrogen | |
|---|---|---|
| Time to first launch | Weeks | Months |
| Merchandiser editing | Theme editor, included | Whatever CMS you integrate |
| App ecosystem | Everything works | API-based apps only |
| Front-end ceiling | Liquid and a lot of JavaScript | Anything React can do |
| Who can maintain it | Any Shopify developer | A React team that knows your codebase |
| Hosting | Shopify, invisible | Oxygen, included on Plus |
How we build it
- 01
Model the catalogue in queries
Collections, filtering, search and pagination designed as GraphQL queries against your real data. The Storefront API bills by query cost, so this is where performance is decided.
- 02
Build the component library
Product cards, variant pickers, cart drawer, filters. Built once as shared components so the surface stays consistent as the site grows rather than drifting page by page.
- 03
Wire cart and checkout
Cart handled in Hydrogen, then handed to Shopify Checkout at the boundary. Discounts, gift cards, taxes and local payment methods keep working because they never left Shopify.
- 04
Connect the content source
Editorial content from a headless CMS composed alongside product data, so marketing is not blocked on a deploy to publish a page.
- 05
Deploy on Oxygen
Preview environments per branch so merchandising and content can be reviewed on the real front end before release, and rollbacks are a redeploy rather than an incident.
- 06
Hold the performance budget
Budgets checked in CI against real device profiles. A Hydrogen build that is slower than the theme it replaced has failed at the thing it was bought to do.
What this is good at
Edge rendering
Oxygen runs close to the customer, which removes a class of latency that a single-region deploy cannot.
Preview per branch
Content and merchandising reviewed on the real front end before release, not on a staging URL that drifts.
Checkout untouched
Shopify Checkout keeps converting, keeps local payment methods, and keeps PCI scope off your codebase.
Decide these before the first commit
- Which CMS replaces the theme editor, and who models the content.
- Which script-injected apps are being replaced, and at what cost.
- The performance budget, in numbers, and who can block a release over it.
- Whether every template moves, or only the ones that justify the work.
- Who maintains this codebase in year two.
Where our Hydrogen work comes from
We have not shipped a client storefront on Hydrogen yet, and this page would be worth less if it pretended otherwise. What we have built repeatedly is the part of these projects that is actually hard — stateful, multi-step interfaces on Shopify, like the Tayst bundle builder and the Moonglow Find Your Moon tool. Those translate directly; the framework around them is the smaller half of the problem.
Who we have done this for
Clients from the roster whose work this page describes. Each links to what we actually built.
Tayst Coffee
A guided bundle builder for a coffee subscription: the customer answers what they drink, how many drinkers there are, which roast they want and how many cups, picks their cups, and the built bundle is handed straight to Recharge.
Moonglow
Moonglow sells jewellery set to the moon phase of a date that matters to you. We built Find Your Moon: the customer enters a date of birth or other significant date, the store renders that moon phase, and it drives the personalised product.
Eat Cake Today
A cake marketplace connecting customers to vendors across Malaysia. We built the back end that decides what can actually be delivered: each vendor has a daily capacity and each cake a lead time, and together they determine which dates and time slots a customer is offered at checkout.
Hydrogen questions
Is Hydrogen better than a Liquid theme?
Not inherently, and for most stores it is not. Hydrogen wins when you need a front end Liquid genuinely cannot express — a complex configurator, a shared front end across web and app, or content composed from several systems. If your problem is a slow theme or an app doing too much, fixing that is cheaper and faster than going headless.
Does Oxygen cost extra?
Oxygen hosting is included for Shopify Plus merchants at no additional platform fee. The cost of headless is engineering time and ongoing maintenance, not hosting — budget for the front end being a codebase your team now owns.
Can we still use the theme editor?
No. That is the main thing teams underestimate. Merchandisers lose the Shopify theme editor and get whatever content tooling you build or integrate instead, which is why a CMS decision usually has to be made at the same time.
What is Shopify Hydrogen?
Shopify’s own React-based framework for building headless storefronts. It provides routing, caching, cart handling and Storefront API bindings out of the box, so a headless build starts from commerce primitives rather than an empty project.
What is Shopify Oxygen?
Shopify’s global hosting for Hydrogen storefronts, included for Shopify Plus merchants at no additional platform fee. It runs at the edge and deploys from your repository, with a preview environment per branch.
Can Hydrogen use our existing apps?
Only apps that expose an API. Anything that works by injecting a script tag into a Liquid theme has nothing to inject into, so reviews, popups and personalisation tools usually need replacing with an API-based equivalent.
Related
Storefront API Front Ends
A custom front end on Next.js or your existing stack, reading catalogue and cart from the Storefront API.
Headless CMS Integration
Editorial content in Sanity or Contentful, product data in Shopify, composed into one front end without either team blocking the other.
Liquid to Headless Migration
Moving an existing theme to a headless front end without losing URLs, SEO or the merchandising your team relies on.
NEXT STEP
Free store audit
Most stores that ask about headless have a theme or app problem instead. A senior engineer will tell you which one you have, at no cost.