“Headless” gets thrown around a lot in Shopify circles, usually without much explanation of what it actually means or whether it applies to your store. If you’ve heard the word Hydrogen mentioned by a developer or agency and nodded along without being entirely sure what you were agreeing to, you’re not alone.
This guide explains what Hydrogen and Oxygen actually are, in plain terms, how a Hydrogen storefront differs structurally from the standard Shopify theme most merchants use, and, most importantly, when going headless genuinely makes sense versus when it’s an expensive solution to a problem you don’t have.
We’ll also be upfront about the trade-offs, because headless isn’t a strictly “better” option. It’s a different set of engineering decisions with real costs attached, and it’s not the right fit for every merchant, or even most merchants.
What Is Shopify Hydrogen?
Hydrogen is Shopify’s own React-based framework for building custom storefronts. Instead of using Shopify’s Liquid templating language inside a theme, developers use Hydrogen to build the entire customer-facing storefront as a React application, pulling in product, collection, cart, and customer data from Shopify’s Storefront API (Shopify’s GraphQL API designed specifically for building custom shopping experiences).
Practically, this means:
- The storefront’s front end is written in React components, not Liquid sections and snippets.
- Data (products, prices, inventory, cart state) is fetched from Shopify via API calls rather than being rendered directly by Shopify’s theme engine.
- Shopify still runs the backend, admin, checkout, order management, inventory, Hydrogen only replaces the customer-facing storefront layer.
- Hydrogen is built on modern React tooling (originally on Remix, which has since evolved into React Router), giving developers server-side rendering, routing, and data-loading patterns that are familiar to React developers working outside the Shopify ecosystem.
In short: Hydrogen is “commerce is still Shopify, but the storefront is custom-built code” rather than a configured theme.
What Is Oxygen?
Oxygen is Shopify’s own hosting platform, purpose-built for Hydrogen storefronts. When you deploy a Hydrogen storefront, Oxygen is where it actually runs.
A few things worth knowing about Oxygen:
- It’s globally distributed hosting on Shopify’s own infrastructure, designed to serve a Hydrogen storefront close to the shopper for fast response times, in the same way Shopify’s standard theme hosting is built for performance out of the box.
- It integrates directly with Shopify’s deployment tooling, so pushing a new version of a Hydrogen storefront is handled through Shopify’s own pipeline rather than a separate third-party hosting account.
- Because Oxygen is Shopify’s own product, it’s built to work smoothly with the Storefront API and checkout handoff, you’re not stitching together a separate hosting provider with a separate CDN and hoping the integration holds up.
You don’t strictly have to use Oxygen to host a Hydrogen storefront, Hydrogen is a standard React application under the hood and can technically be deployed elsewhere, but Oxygen is Shopify’s supported, purpose-built option, and it’s what most Hydrogen builds use in practice.
Hydrogen vs a Standard Online Store 2.0 Theme: What Actually Changes
This is the part most explainers skip, and it’s the part that matters most for deciding whether headless is right for you.
A standard Shopify theme (built on Online Store 2.0) gives you:
- Sections and blocks that a merchant or marketer can rearrange in the theme editor, without touching code.
- Native compatibility with the enormous majority of Shopify apps, which are built to install into a Liquid theme via app blocks and app embeds.
- Shopify hosting and rendering handled entirely by Shopify, with no separate deployment pipeline to manage.
- A relatively fast path from “make a change” to “see it live,” even for non-technical team members.
A Hydrogen storefront gives you:
- Full control over the front-end architecture, UI, and user experience, anything that’s technically possible in a modern React app is possible, not just what a theme’s section schema allows.
- A codebase that developers can build, test, and deploy the same way they would any other software project, with proper version control and CI/CD.
- The ability to build genuinely custom experiences, unconventional navigation patterns, non-standard checkout-adjacent flows, deep integration with non-Shopify systems, that a theme’s section-and-block model isn’t designed for.
- No native drag-and-drop editor for marketers. Layout and content changes generally require a developer to write and deploy code, not a merchant adjusting settings in the theme customiser.
That last point is the trade-off that catches merchants out most often. A theme is designed so a marketing team can make changes without engineering involvement. A Hydrogen storefront is designed the opposite way, it’s a proper software product, with all the flexibility and all the process that implies.
When Headless/Hydrogen Genuinely Makes Sense
Based on the pattern of stores where headless builds actually pay off, Hydrogen tends to be a good fit when:
- The storefront needs to do something a theme’s section model genuinely can’t do. Highly custom interactive experiences, configurators, or non-standard navigation and browsing patterns that go well beyond what sections and blocks support.
- You’re building more than one front end against the same Shopify backend, for example, a web storefront and a mobile app, or storefronts across multiple brands or regions that need to share commerce logic but look and behave very differently.
- Performance and front-end architecture are genuinely business-critical at scale, and your team wants full control over rendering strategy, caching, and bundle size rather than working within a theme’s constraints.
- You already have (or are committing to hire) a development team capable of building and maintaining a React application on an ongoing basis, not just at launch.
- The business is integrating deeply with non-Shopify systems at the storefront layer, custom PIM, bespoke personalisation engines, or unusual checkout-adjacent flows, where a theme’s app-based integration model becomes limiting.
Larger and fast-scaling brands, and merchants already running (or planning to run) Shopify Plus, are the businesses most likely to have both the genuine technical requirement and the internal resourcing to make a Hydrogen build worthwhile.
When Hydrogen Is Overkill
Just as important is being honest about when it isn’t the right call, because we see merchants sold on “headless” as a status symbol more often than as a genuine technical requirement.
Cost. A custom Hydrogen build is a software development project, not a theme configuration project. It involves significantly more upfront development time than customising or building an Online Store 2.0 theme, because you’re building front-end infrastructure, routing, data fetching, cart logic, SEO handling, that a theme gives you for free. For a smaller or mid-sized merchant without a specific technical need driving the decision, that additional cost is very hard to justify against the outcome.
Development complexity. Building a production-ready storefront in React, correctly handling things like SEO metadata, structured data, cart persistence, and accessibility, takes real front-end engineering skill. This isn’t a project for a generalist who’s mostly worked in theme customisation, it needs developers comfortable with modern React patterns and Shopify’s Storefront API.
Ongoing maintenance. A theme mostly maintains itself; Shopify handles the platform, and app updates are largely self-contained. A Hydrogen storefront is a codebase you own, dependencies need updating, the Storefront API evolves over time, and someone needs to be responsible for deployments, monitoring, and fixing things when they break. This isn’t a “build it once” cost; it’s an ongoing commitment, similar in nature to running any other custom web application.
Loss of native app compatibility. This is the trade-off merchants underestimate most. The vast majority of Shopify apps, reviews, upsells, loyalty, subscriptions, personalisation, are built as theme app extensions designed to plug into a Liquid theme’s app blocks. On a Hydrogen storefront, that plug-and-play installation model largely disappears. Where an app is compatible at all, it typically requires custom integration work against its own API, and some apps simply don’t offer a headless-compatible integration path yet. Before committing to headless, it’s worth listing every app the store currently depends on and checking, honestly, whether each one has a genuine path to working on a custom storefront, not assuming it will “probably be fine.”
A Simple Framework: Should You Go Headless?
Run through these questions before committing to a Hydrogen build:
- Is there a specific thing the storefront needs to do that a theme’s sections and blocks genuinely cannot do? If you can’t name it concretely, that’s a signal headless isn’t solving a real problem yet.
- Do you have a development team (in-house or agency) committed to building and maintaining this long-term, not just launching it?
- Have you audited your current or planned app stack to confirm the apps your business depends on have a real headless integration path?
- Is the cost difference between a theme build and a custom Hydrogen build justified by the business outcome you’re chasing, more revenue, a capability you couldn’t otherwise offer, or a genuine multi-front-end requirement?
- Can your marketing team still do their job if day-to-day layout and content changes need a developer, rather than the theme customiser?
If most of your answers point toward “we don’t have a clear yes here,” a well-built, well-optimised Online Store 2.0 theme is very likely the more sensible choice, and it’s not a lesser one. Plenty of large, high-performing Shopify stores run entirely on themes.
When to Bring In a Specialist
Deciding between headless and a theme isn’t something to work out alone from a blog post, particularly once your app stack, multi-region requirements, or existing tech investment enter the picture. This is exactly the kind of scoping conversation our headless Shopify development team has regularly, working through what a Hydrogen build would actually involve for your specific store, what it would cost against a theme-based alternative, and being honest if a theme is genuinely the better call. If a theme build is what you actually need, our Shopify web design and development service covers that instead.
FAQ
Is Hydrogen only available to Shopify Plus merchants?
No. Hydrogen and Oxygen are Shopify’s own tools and aren’t restricted to a single plan tier. That said, most businesses that end up genuinely needing a Hydrogen build tend to be larger or fast-scaling brands that also benefit from Shopify Plus features, so the two often go together in practice rather than by requirement.
Do I lose SEO by going headless with Hydrogen?
Not inherently, Hydrogen supports server-side rendering, which is what search engines need to properly crawl and index content, and it gives developers direct control over metadata, structured data, and URL structure. But none of that is automatic the way it is with a theme; it has to be deliberately built and correctly maintained, so a poorly built Hydrogen storefront can absolutely underperform a well-built theme on SEO.
Can I move to Hydrogen gradually, or is it all-or-nothing?
It’s technically possible to run a Hydrogen storefront alongside a Shopify theme for different sections of a business, but in practice most merchants treat it as a full replatform of the storefront front end rather than a partial migration, because the underlying rendering and data-fetching models are fundamentally different.
How long does a Hydrogen build typically take compared to a theme project?
In our experience, custom Hydrogen builds take meaningfully longer than a theme-based project of similar visual scope, because you’re building front-end infrastructure a theme already provides. Exact timelines depend heavily on scope, but it’s realistic to expect a Hydrogen project to run for a good number of months rather than weeks, particularly once app integrations and edge cases are accounted for.
What happens to my existing apps if I switch to Hydrogen?
Each app needs to be checked individually. Apps built as theme app extensions for Liquid themes generally won’t work out of the box on a Hydrogen storefront, and you’ll need to either find a headless-compatible integration path for that app, build a custom integration against its API, or find an alternative tool. This is one of the most commonly underestimated parts of a headless migration.
Not Sure Whether Headless Is Right for Your Store?
If you’re weighing up Hydrogen against a standard theme and want an honest read on which one actually fits your business, book a call with our team and we’ll talk through the trade-offs specific to your store, your app stack, and your growth plans.
