Shopify Hydrogen: storefronts without the theme ceiling
Hydrogen is Shopify's toolkit for building custom storefronts: a set of components, utilities, and patterns for working with the Storefront API, deployed to Oxygen on Shopify's global edge network. The storefront becomes a custom codebase instead of a theme, while checkout, payments, and the Shopify admin carry on exactly as they do today.
Fontis builds and supports Hydrogen storefronts for Australian retailers who have run out of room inside a theme.
What Hydrogen gives you
A Liquid theme renders inside Shopify's template system, which sets the outer limit on what the storefront can do. Hydrogen replaces the theme with a custom frontend and leaves everything behind the Buy button in place.
A Custom Frontend Codebase
Storefronts are built as components on top of a modern JavaScript framework, with component reuse, typed data, automated tests, and a real build pipeline. On a large storefront, that is the difference between shipping a change confidently and hoping nothing else moves.
Oxygen Hosting
Oxygen runs Hydrogen storefronts on Shopify's global edge network at no extra charge on paid Shopify plans, with separate preview environments so work can be reviewed before it ships. Compared with a self-hosted headless build, it removes the infrastructure, deployment, and scaling work that going headless usually brings with it.
Server Rendering by Default
Pages render on the server and stream to the browser, so the first paint does not wait for a JavaScript bundle to download and boot. That is what lets a Hydrogen storefront hold its own on Core Web Vitals while still giving you full control of the frontend.
Direct API Access
Products, collections, metaobjects, and cart operations come through the Storefront API, with customer sign-in and order history handled by the Customer Account API. Because every query is written explicitly, a single page can compose merchandising data, CMS content, and search results in one render.
Shopify's Checkout, Intact
The cart is handed to Shopify's hosted checkout, so Shop Pay, local payment methods, fraud analysis, and everything Shopify has done to tune checkout conversion still apply. Hydrogen replaces the storefront and leaves the commerce engine alone.
Content From Anywhere
Editorial content can come from Shopify metaobjects, an external CMS, or both at once, composed in the same page as live product data. For brands running content-led commerce, that flexibility is often what makes the case.
When to build on Hydrogen
Hydrogen makes sense when the storefront has to do something a theme cannot: product configurators with real logic behind them, discovery journeys the section model cannot express, large catalogues needing navigation built around how customers actually shop, or content and commerce pulled from separate systems into one page.
The trade-off is control over layout. A Liquid theme lets a merchandiser rearrange a page in the customiser; on Hydrogen, layout sits with developers. Good builds narrow that gap deliberately, driving copy, imagery, campaign content and page composition from metaobjects or a CMS so the marketing team keeps its autonomy. How far to take that is a decision we make with you at the start, and it shapes the cost of running the storefront for years afterwards.
Online Store 2.0 has closed some of the old gap. Sections everywhere, app blocks and metaobjects handle plenty of what once forced a headless build, and where a theme already covers what you need, we will tell you. That question gets settled in scoping, before anyone writes code.
What we build with Hydrogen
Fontis builds and maintains custom storefronts, on Liquid and on Hydrogen, and connects them to the systems retailers already run.
Custom Hydrogen Storefronts
Storefronts built from your design system, with the component library, routing, and data layer set up so the storefront can keep growing without rework. Deployed to Oxygen with preview environments, so stakeholders review real pages rather than mockups.
Theme to Hydrogen Migration
Moving a storefront off Liquid while holding onto its search performance. URL structure, redirects, structured data, metafield and metaobject mapping, and analytics continuity are all in scope, with a staged rollout wherever the catalogue allows one.
Performance Engineering
Hydrogen makes a very fast storefront achievable, and getting there still takes deliberate work. Query waterfalls, oversized bundles, and third-party scripts will sink a custom storefront as thoroughly as a Liquid one. We bring the same performance discipline to Hydrogen builds that we apply to themes.
Integrations and Composable Backends
Connecting a headless storefront to a CMS, a search provider such as Algolia or Typesense, a PIM, and an ERP. Our backend integration practice covers the systems behind the storefront, which is where most of the real difficulty in a headless project sits.
Why Fontis for headless Shopify
A Straight Answer on Fit
We have written at length about when headless makes sense on Shopify. You get a clear recommendation either way, based on what your storefront needs to do and what it will cost to run.
Frontend and Backend in One Team
On a headless project, the integration layer is usually where the difficulty lives. Fontis has spent 20+ years on commerce backends, ERP integrations, and data migrations, so the storefront and the systems feeding it are built by people who talk to each other daily.
We Track Where Hydrogen Is Going
Hydrogen is on two tracks. Production storefronts run on the stable React releases, while Shopify rebuilds Hydrogen as a framework-agnostic toolkit, currently a developer preview. We follow both, because the decisions that make a build expensive to move forward later are the ones made at the start.
Support From the Team That Built It
After launch, the engineers who built your storefront keep it running and keep extending it, including the Hydrogen and Storefront API upgrades that a custom storefront needs over its life.
How a Hydrogen project runs
Scoping and Fit
We establish what the storefront needs to do, what a theme can already express, what it will take to maintain, and what the total cost looks like across several years rather than at launch. You get a written recommendation and a scope before anyone writes code.
Architecture and Build
Data sources, routing, caching strategy, and the content model are settled before component work starts, because those are the decisions that are expensive to revisit. The build runs in stages against preview deployments on Oxygen, so the work stays reviewable throughout.
Launch and Ongoing Development
Cutover is planned around redirects, structured data, and analytics continuity so search performance holds through the transition. Afterwards we support and extend the storefront on a retainer, including keeping it current with Hydrogen and Storefront API releases.
Common questions about Hydrogen
Do we need Shopify Plus to use Hydrogen?
No. Hydrogen storefronts can be built on standard Shopify plans, and Oxygen hosting is included on the paid plans at no extra charge. Plus adds things that often matter to the same merchants considering Hydrogen, particularly checkout customisation and higher API limits, and our Shopify Plus page covers what that tier unlocks.
What happens to our checkout?
Nothing changes. Hydrogen replaces the storefront only. The cart is handed to Shopify's hosted checkout, so Shop Pay, payment methods, fraud analysis, and post-purchase flows all keep working as they do today. Customising the checkout itself is a separate piece of work, and one that depends on your plan rather than your storefront.
Can our merchandising team still edit the site?
Yes, as far as the build provides for it, which is a scoping decision rather than a platform limitation. Copy, imagery, campaign content, and page composition can all be driven from Shopify metaobjects or an external CMS so the marketing team works without a developer. The difference is that a theme exposes this automatically through the customiser, where on Hydrogen it is designed in deliberately. We agree where that line sits before the build starts.
Will a Hydrogen storefront be faster than our theme?
A well-built one can be very fast, because you control exactly what loads and when. That control has to be used deliberately. A Hydrogen build carrying unoptimised queries and the same stack of third-party scripts will not beat the theme it replaced. We treat performance as something to design in and measure, on Hydrogen the same as on Liquid.
Can we host somewhere other than Oxygen?
Yes. Hydrogen runs on other JavaScript runtimes, and there are legitimate reasons to use one, usually an existing platform commitment elsewhere in the business. Oxygen is the default because it removes the infrastructure work and costs nothing extra on a paid Shopify plan. If self-hosting suits you better, we will scope it.
What does it cost to run compared with a theme?
Hosting is rarely the difference, since Oxygen comes at no extra charge on paid Shopify plans. The ongoing cost is engineering capacity: a Hydrogen storefront needs developers available for changes a theme would let a merchandiser make. How large that gap is depends on how much you drive from a CMS, which is exactly what the scoping stage is for.
Talk to us about Hydrogen
A 30-minute conversation about what your storefront needs to do, what it would take to build on Hydrogen, and what it would cost to run. You get a straight recommendation, including when a theme would serve you better.
Not ready to talk? Read when headless makes sense on Shopify