Shopify Hydrogen in 30 seconds.

• What it is. Hydrogen is Shopify's React framework for building a custom, headless storefront that pulls products, cart, and orders from Shopify through the Storefront API and deploys to Oxygen, Shopify's free hosting.
• The honest verdict. Most brands shouldn't go headless. Optimized Hydrogen scores a few Lighthouse points higher than a tuned Liquid theme, but it costs three to five times as much to build and run.
• The part nobody budgets for. Going headless rebuilds your storefront, not your support stack. The phone line, the order-status lookups, the WISMO workflow: those don't migrate with the frontend. This guide is for the founder, COO, or Head of CX at a $10M to $100M Shopify or Shopify Plus brand deciding whether the rebuild is worth it.

If you just got a six-figure quote to rebuild your storefront on Hydrogen, or you finished the build and noticed your team somehow got busier instead of less busy, this is for you. Hydrogen is real, it's good at what it does, and for most Shopify brands it's still the wrong call. The trick is knowing which group you're in before you spend the money, not after.

I run phone support for a living, so I look at this decision from a different angle than the agencies pitching it. Most write for the developer scaffolding the build. I want to talk to the operator signing off on it, because there's one line item that's missing from every headless budget I've seen, and it's the one that decides whether your customers actually have a better experience or just a faster homepage. If you're weighing a headless build and you run a $10M to $100M Shopify brand, book a 30-min call and we'll talk through what it does to your support before you commit.

Most $10M+ Shopify brands evaluating Hydrogen are getting solid advice on the frontend and zero advice on what happens to the phone. We've launched AI phone support for 50+ Shopify brands, and the pattern is consistent: the storefront gets a rebuild, the phone backlog does not. Book a 30-min call and we'll map where your support stands either way.

What Shopify Hydrogen actually is

Hydrogen is Shopify's open-source React framework for building a custom storefront. Instead of a Liquid theme, where Shopify owns the whole front end, you build the storefront yourself as a standalone React app and pull everything from Shopify through the Storefront API.

That's the "headless" part. The head is the customer-facing front end, and headless means you've detached it from the backend. Products, collections, cart, and checkout still live in Shopify. Your React app just fetches them and renders whatever experience you want on top.

Hydrogen gives you full control of the front end while Shopify keeps running the parts you'd never want to rebuild, like checkout and payments. As of 2026 it runs on React Router v7, the framework that grew out of Remix, uses Vite to build, and ships with built-in tools for caching and server-side rendering. You deploy it to Oxygen, Shopify's global edge hosting, which is included free on paid Shopify plans (it isn't on Starter or development stores).

The pitch is straightforward: full creative control of the front end, modern React tooling your developers actually like, and the parts of commerce that are genuinely hard (checkout, payments, fraud) stay with Shopify. The catch is everything that control implies, which is where the honest comparison starts.

One more thing worth knowing, because it changes how "headless" Hydrogen really is. You don't fully decouple from Shopify. Deployment is tied to Oxygen, checkout stays native on non-Plus plans, and Shopify's payment fees come along regardless. As of the April 2026 release, the Storefront API proxy became mandatory and Shopify started enforcing stricter rate limits on bots and agents hitting the API. The direction is clear: Hydrogen is getting more tightly coupled to Shopify, not less. For an operator that's actually reassuring, because it means the hard, regulated parts of commerce stay on rails you don't have to maintain.

Hydrogen vs Liquid: the honest comparison

Liquid is Shopify's native templating language. It's the default, it's coupled to the backend, and thousands of themes and apps work with it out of the box. Hydrogen is the React route. Here's the side by side.

The performance gap is real but smaller than the marketing makes it sound. An optimized Hydrogen storefront scores 95 to 99 on mobile Lighthouse, while a well-tuned Liquid theme already sits around 90. In real terms that's roughly 0.4 to 1.2 seconds of LCP improvement over a good Liquid theme, not the "10x faster" line you'll see in sales decks. That claim benchmarks Hydrogen against badly built Liquid themes, which is not a fair fight.

So Hydrogen isn't automatically faster. It gives you more control over the things that influence speed, and if your team uses that control well, you can squeeze out a better number. But you're paying three to five times the build cost for a 5 to 10 point Lighthouse bump that may or may not move your conversion rate.

The bigger day-to-day difference is who can change things. On a Liquid theme, your marketing manager swaps a hero banner in seconds. On Hydrogen, unless you've invested in a visual editor, that same change is a developer ticket. That gap shows up every single week.

App compatibility is the other place the comparison bites. On Liquid, the entire Shopify app ecosystem works because every app is built with theme extensions as the integration layer. On Hydrogen, a chunk of those apps either break or need to be wired back in through the API. That's not a one-time hit either. It becomes part of your maintenance forever, because every app update and every Hydrogen release is a thing your team now owns. If your store leans on a stack of apps to run, and most $10M+ brands do, that's a real cost that rarely makes it into the original quote.

When going headless is actually worth it (and when it isn't)

There are real reasons to go headless. There are also a lot of bad ones, and the bad ones cost six figures.

Choose Hydrogen if

• You need UX a theme can't do. Real-time 3D product configurators, room visualizers, complex multi-step purchase flows, interactions that feel like a native app. Liquid will fight you the whole way on these.
• You're hitting a content-composition ceiling. Your merchandising team needs to compose pages in ways themes genuinely can't support.
• You have a real performance ceiling at scale. You've already squeezed everything out of a tuned theme and you have the traffic where a fraction of a second moves real money.
• You have in-house React talent. Not "we can hire it." You have it, and you'll keep it, because Hydrogen is a thing you own and maintain forever.

Stay on Liquid if

• None of the above is a hard yes. "It's the modern choice" is not a reason. Neither is a Lighthouse bump that doesn't change revenue.
• Your team depends on the app ecosystem. Every app you rely on was built assuming a Liquid theme.
• Marketing needs to move fast. If content can't wait on developer cycles, headless will frustrate everyone.

The honest industry read backs this up. One agency that's built a dozen headless storefronts says plainly that for 80% of brands under $10M a year, you should optimize the Liquid theme first, and that they talk twice as many merchants out of headless as into it. Most brands that go headless do it for reasons that don't survive the first invoice.

What Hydrogen actually costs

Oxygen hosting is free, which is the number everyone quotes. The build and the upkeep are the numbers that matter.

Those numbers are from a 2026 cost breakdown of real headless Shopify builds, and they don't include the stuff that gets bolted on after launch: a CMS so non-developers can edit ($0 to $2,000 a month), a search tool like Algolia, monitoring, and the visual editor you'll wish you'd budgeted for on day one.

Add it up and a headless build is commonly a $300K to $600K year-one investment once you count the build, the stack, and the engineering to keep it running. For a $10M brand that's a serious bet, and it should clear a high bar before you make it.

A useful gut check: that's roughly the loaded cost of a small team. Six customer service reps at $4,000 a month each is $24,000 a month, or $288,000 a year. So a year-one headless budget is in the same range as your whole support payroll. The frontend gets all the attention in that math. The thing that quietly doesn't is support, and that's the part that touches your customer every day. If you want to compare what a faster storefront does for revenue against what fixing the phone does, book a 30-min call and we'll do the math live on your numbers.

The line item nobody puts in the headless budget: support

Here's the pattern I watch play out. A brand goes headless, ships a beautiful storefront, and three weeks later the operations side is a mess. There's a name for it in the dev community: "beautiful code, weak operations." The front end is gorgeous and the back office is on fire.

Part of it is content. Marketing can't edit a page without a developer, so simple changes pile up. But the part that actually hurts customers is the support stack, because a lot of it was riding on your Liquid theme and it doesn't come along for the ride.

Your apps are the first casualty. Most Shopify apps hook into the theme through Liquid extensions, so on a headless front end they either break or need an API-level rebuild. That includes the support-adjacent ones: the live chat widget, the order-tracking page, the review app. Each of those is now a project.

And then there's the phone. The phone line was never part of the storefront, so the rebuild doesn't touch it, which sounds fine until you realize the rebuild also doesn't fix it. The same after-hours calls roll to voicemail. The same WISMO questions ("where's my order") come in over and over. The same voicemails you never return pile up on Monday. Your storefront got faster and your phone backlog stayed exactly where it was.

Here's the part that's actually useful, and that nobody writing about Hydrogen seems to mention. Order status, returns, and customer lookups don't live in your theme. They live in the Storefront and Admin API. So any support layer that reads from the API survives a headless migration untouched, while a support widget embedded in your theme has to be rebuilt. That distinction is the whole game when you're deciding what to keep and what to replatform.

Run the test on your own stack before you commit to the build. For every support tool you use, ask one question: does this read from the API, or is it bolted into the theme? The API-native ones come through the migration fine. The theme-bolted ones are line items, and the more of them you have, the bigger the support gap on launch day. Most brands find out which is which the hard way, a week after go-live, when a customer can't track an order and the WISMO calls start stacking up.

The phone is the cleanest example of this. A phone agent that pulls order status from the API will read "your order shipped Tuesday, here's the tracking" exactly the same way before and after you go headless, because it never touched your front end to begin with. That's the kind of support infrastructure you want around a replatform: the kind that doesn't notice it happened.

It's why we built Ringly the way we did. It's AI phone support that reads orders straight from Shopify's API, so it does not care whether your storefront is Liquid or Hydrogen. Across 50+ brands it resolves 73% of inbound calls on its own, at roughly $0.42 per resolved call. If you're staring at a replatform and wondering what happens to the phone, book a 30-min call and we'll walk through it with your actual call data.

How Ringly fits whether you're on Liquid or Hydrogen

Ringly.io is AI phone support for Shopify brands. The phone shouldn't be a tax on your support team, and it definitely shouldn't be the thing that breaks when you replatform.

The AI answers inbound calls 24/7. It finds orders in your Shopify store, processes returns and exchanges, answers product questions from your knowledge base, and rescues abandoned carts. Because it all runs off the API, none of it depends on how your front end is built. Calls that need a person escalate cleanly to Gorgias, Richpanel, Reamaze, or whatever help desk you already run.

The most common thing customers say after a call is that it didn't feel like AI.

"My customers also feel like it's a normal person. They feel like they can communicate if they have questions."
Claudia Droge, TechCraft Studio

WashCo, a Shopify brand we launched, recovered $22,664 in its first 7 days on the phone. That's revenue that was previously hanging up on voicemail. Whether the brand is on a Liquid theme or a Hydrogen build doesn't change that math, because the calls and the API don't care about the front end. Plans start at $349/mo with a 65% resolution guarantee, and you're live in under an hour.

Frequently asked questions

Is Shopify Hydrogen free? The framework itself is free and open source, and Oxygen hosting is included on paid Shopify plans. What costs money is the build (commonly $10K to $150K+) and the developers to maintain it. Free framework, expensive project.

Do I need Shopify Plus to use Hydrogen? No. You can build a Hydrogen storefront on standard Shopify plans and deploy it to Oxygen. Shopify Plus matters more for things like custom checkout and higher API limits, which is why a lot of Shopify Plus brands are the ones evaluating headless in the first place.

Is Hydrogen faster than a Liquid theme? Not automatically. An optimized Hydrogen build scores ~95-99 on mobile Lighthouse versus ~90 for a well-tuned Liquid theme, so the real-world gain is around 0.4 to 1.2 seconds. It gives you more control over speed, but a badly built Hydrogen store can easily be slower than a good Liquid one.

Will my Shopify apps work with Hydrogen? Many won't, at least not out of the box. Apps that hook into your Liquid theme through extensions need API-level rebuilds on a headless front end. Budget for replacing or rebuilding the apps your business depends on, including support tools like chat and order tracking.

What happens to my customer support when I go headless? The storefront gets rebuilt; your support stack mostly doesn't. Theme-embedded support widgets break, but anything that reads from the Storefront or Admin API (order status, returns, a phone agent) keeps working. Plan the support migration the same way you plan the frontend, or your customers feel the gap.

Is Hydrogen worth it for a $10M brand? Usually only if you have a genuine reason themes can't satisfy (custom UX, content composition, a real performance ceiling) plus in-house React talent. For most brands under $10M, optimizing the Liquid theme first delivers more for less. The honest agency consensus is that 80% of brands that age should stay on Liquid.

Do I have to use Oxygen to host a Hydrogen store? No, but it's the default and it's free on Shopify plans, so most teams use it. You can deploy a Hydrogen app to Vercel or Netlify instead, which adds $20 to $500+ a month and some coupling trade-offs. For most Shopify-committed teams, Oxygen is the path of least resistance.

Talk to us

If you run a $10M to $100M Shopify brand and your phone still goes to voicemail after 6pm, a 30-min call is the fastest way to see what you're leaving on the table, whether you're on Liquid today or planning a Hydrogen build.

The 3-layer guarantee.

1. Live in 14 days or it's free until launched.
2. 65% resolution in 90 days or we refund the last 3 months of subscription fees.
3. We keep working free until we hit 65%.

Ruben (Ringly co-founder) takes these calls personally.

Book a 30-min call →