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 catalog, 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, available at no extra charge on paid Shopify plans.
- 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 React Router, 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, no extra charge on paid plans |
How we build it
- 01
Model the catalog 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 and filters are 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 less useful if it pretended otherwise. What we have built repeatedly is the hard part of these projects: 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 built.
Tayst Coffee
Tayst launched a new brand of compostable single-serve coffee pods. We built the Shopify store and a guided builder: shoppers say how they brew, how many drinkers there are, which roast they like and how many cups they need, get a recommended mix they can change, and the bundle becomes a Recharge subscription with a 15% discount. Tayst has grown about 20% month on month.
READ THE STORY →
Moonglow
Moonglow sells jewelry set with the moon as it looked on a date that matters to you. Shoppers were stuck on how it works, so we built a moon-phase calculator that shows the real moon for any date, and a builder that turns that date, an engraving and a metal into a piece of jewelry. Sales are up more than 25%.
READ THE STORY →
Eat Cake Today
Eat Cake Today is a funded Malaysian startup that sells cakes from many local bakers and kitchens and delivers them the same day. We built the Shopify storefront and the back end behind it: each vendor's capacity and each cake's making time decide which dates and times a shopper is offered, and each order goes straight to the kitchen and a rider. The service now covers three to four cities.
READ THE STORY →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 cannot express, such as 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 available at no extra charge on paid Shopify plans. 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 personalization 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 catalog 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.
