July 1, 2026 by Alex Massaad · 5 min read

Headless Shopify With Hydrogen: When You Actually Need It

Every few weeks a merchant asks us about going headless. Usually the question arrives second-hand: an agency pitched them a Hydrogen rebuild, or a competitor relaunched on a custom frontend and their site suddenly feels old. Almost never does the question start from a problem their theme can’t solve.

That’s the tell. Headless is a real architecture with real advantages, and it’s also the most oversold project in Shopify right now. This post is the conversation we have on those calls, written down: what headless actually is, where Hydrogen fits, the four situations where the move pays off, and the math for everyone else.

What Headless Actually Means

A standard Shopify store is one system. Shopify hosts your product data, runs checkout, and renders your storefront through the theme layer with Liquid templates. When you edit a section in the theme editor, you’re working inside that system.

Headless cuts the storefront off. Shopify keeps doing what it’s genuinely great at, which is the commerce engine: products, inventory, customers, checkout. Your storefront becomes a separate application that pulls data over the Storefront API and renders pages however you want. The “head” (the frontend) is yours; the body stays Shopify.

You gain a frontend with no theme-layer constraints. You lose the theme editor, the app ecosystem’s storefront widgets, and the comfort of Shopify maintaining your rendering stack. Every one of those losses becomes a line item in your budget, permanently.

Where Hydrogen Fits

You can build a headless frontend in anything. Next.js storefronts on Vercel are common, and for years that was the default stack, with a cart bolted together from API calls and optimism.

Hydrogen is Shopify’s answer: a React framework built specifically for Shopify storefronts, with first-party components for carts, product forms, and checkout handoff. Oxygen is the hosting layer Shopify provides for it, included with paid plans. Together they remove the worst part of old-school headless builds, which was maintaining your own glue between the frontend and the platform.

When we build headless, we default to Hydrogen for that reason. The integration surface that breaks in third-party stacks is the part Shopify maintains here. It’s the same logic that has us building apps on Gadget: stay close to the platform and let it absorb the undifferentiated work.

The Four Cases Where Headless Pays Off

After a decade and a half on this platform, these are the only patterns where we’ve watched headless clearly earn its cost.

1. Content is the product experience

If your buying journey runs through editorial, lookbooks, guides, and campaign pages, and marketing wants to ship those daily from a real CMS, the theme layer starts to fight you. Metaobjects and sections get you surprisingly far, but a Hydrogen storefront pulling from Sanity or Contentful treats content as a first-class citizen instead of a workaround.

2. The interface is genuinely custom

Product configurators, bundle builders, try-before-you-buy flows, anything that behaves more like an app than a page. You can force some of this into theme JavaScript. We’ve done it, and past a certain complexity it becomes unmaintainable. If your roadmap is full of interface work like this, owning the frontend is cheaper than fighting the theme.

3. Multiple storefronts, one codebase

Several brands or regional stores that share a design system and infrastructure but need distinct frontends. Headless turns “rebuild the theme four times” into “one codebase, four deployments.” Below three storefronts this rarely clears the bar.

4. You already ship frontend code

This one is less about the store and more about you. A headless storefront is a production application. If your team (or your agency retainer) includes people who write React comfortably, ownership is an asset. If it doesn’t, the same ownership becomes a liability the first week something breaks and nobody in the building can fix it.

Notice what’s missing from the list: speed. “Headless is faster” is the pitch that sells most of these projects, and it’s mostly outdated. A disciplined Online Store 2.0 theme scores well on Core Web Vitals, and an undisciplined React storefront scores terribly. Performance follows the build quality, not the architecture. If speed is your actual problem, start with why your store is slow; the fix is usually much cheaper than a replatform.

The Honest Math

A good custom theme build is a mid four-figure to low five-figure project that your existing team can operate afterward. A Hydrogen build starts in the mid five figures, and the bigger number is the ongoing one: you now own dependency upgrades, rendering bugs, SEO plumbing, and every storefront feature that a theme or app would have given you in an afternoon.

The question we ask merchants is blunt. What revenue does the headless version unlock that the theme version can’t? For the four cases above, there’s usually a concrete answer. For everyone else the answer is a shrug, and a shrug doesn’t fund a five-figure rebuild plus a permanent engineering line item.

If You Do Go Headless

Three things we treat as non-negotiable on Hydrogen projects:

• SEO parity before cutover. URLs, redirects, structured data, and meta behavior all move into your codebase. Rankings only survive the migration if someone owns that list. We verify crawlability on a staging domain before DNS moves.
• Checkout stays Shopify. Hydrogen hands off to Shopify checkout, and that’s a feature. Rebuilding checkout is where headless projects go to die.
• A handoff your team can operate. Monitoring, deploy runbooks, and documentation. A headless store without them is a support contract you didn’t mean to sign.

Where to Start

If you recognize your store in the four cases, our headless Shopify service starts with a readiness assessment, and we put the recommendation in writing whether it favors us or not. If you don’t recognize your store in them, that’s a good outcome too: a custom theme will get you the storefront you want with far less to maintain, and you can spend the difference on things that actually move revenue.

Either way, ask any agency pitching you headless one question first: “what specifically can’t my theme do?” If the answer is a feelings-based riff on modern architecture, keep your theme.