Shopify · Headless Commerce · E-Commerce · Development

Headless Shopify: What Hydrogen and Sanity Actually Give You

Most Shopify stores run on a Liquid theme, and for most stores that is the right answer: it is fast to build, cheap to maintain, and every app in the ecosystem expects it. Headless is the other option. You keep Shopify running the commerce and replace the storefront with something you own outright. It is a bigger commitment, and it pays off for a specific kind of business.

This is what the pieces actually are, what you get for taking them on, and what it costs you.

What headless commerce means on Shopify

Shopify is two things bolted together: the commerce engine, products, inventory, carts, checkout, orders, payments, and the storefront that renders it. A Liquid theme couples them. Going headless separates them: Shopify keeps doing the commerce, and your storefront asks for what it needs through the Storefront API, a GraphQL API that exposes products, collections, carts and customer accounts to any front end you like.

Checkout stays on Shopify either way. That matters more than it sounds: you are not rebuilding the part that takes money, and PCI scope, fraud tooling and Shop Pay all stay where they are.

Hydrogen: Shopify's own headless framework

Hydrogen is Shopify's React framework for building custom storefronts. It ships with the parts you would otherwise write yourself, cart state, product and collection routing, Storefront API clients, server-side rendering, and caching tuned for commerce, so a headless build starts from working commerce primitives rather than an empty React app.

It deploys to Oxygen, Shopify's hosting for Hydrogen storefronts, which runs at the edge and is included with your Shopify plan. That removes the usual headless objection, that you have now signed up to run infrastructure, for most stores.

The important part is that Hydrogen is Shopify's own. A custom storefront on a third-party framework is a bet that someone keeps the integration current. Hydrogen is maintained by the company whose API it consumes.

Sanity: where the content that is not a product lives

Shopify models products well and everything else poorly. Editorial pages, campaign landing pages, buying guides, lookbooks, brand storytelling, the copy that surrounds a product and does the actual selling, all of it ends up in metafields, page templates, or a second system nobody agreed to.

Sanity is a headless CMS that models content as structured data rather than pages of markup. You define the shapes your business actually uses, editors fill them in, and the storefront queries them alongside the Shopify data. The same content can then feed a storefront, an email, an app, or a retail screen without being rewritten for each.

Paired with Hydrogen, the split is clean: Shopify owns commerce, Sanity owns content, and the storefront composes both. Merchandisers work in Shopify, editors work in Sanity, and neither is waiting on a developer to publish.

We build on Sanity as our content platform of choice, more on how we use it.

What you get

  • Performance you control. Liquid themes carry whatever the apps installed on them inject. A Hydrogen storefront renders on the edge and ships only the JavaScript you wrote, which is the difference between chasing Core Web Vitals and designing for them.
  • Design without theme constraints. Anything you can build in React, you can ship. No fighting a theme's assumptions to get the layout the brand actually wants.
  • Content and commerce move independently. A campaign page does not need a theme deploy. A product launch does not need an editor to learn Liquid.
  • Content that is reusable by design. Structured content is queryable and channel-agnostic, so the work that goes into a buying guide is not trapped inside one page template.
  • Checkout stays Shopify. Shop Pay, Shopify Payments, fraud analysis and PCI scope are unchanged.

What it costs you

Headless is a real trade, and an agency that does not tell you the downside is selling you something:

  • You own a codebase. A theme is configured; a storefront is maintained. Budget for it the way you budget for any application.
  • Some apps stop working. Anything that installs by injecting into a Liquid theme has no theme to inject into. Apps with proper APIs are fine; script-tag apps need replacing. This audit is the first thing to do, not the last.
  • More moving parts. Two systems, two sets of credentials, two publishing workflows. Worth it when the content side is genuinely doing work; overhead when it is not.
  • Theme editor conventions go away. Merchandisers who rearrange sections in the theme editor need an equivalent built for them, or they lose that control.

When it is worth it

Headless earns its keep when the storefront is a competitive surface rather than a catalogue: when content does the selling, when the brand needs a look no theme will give it, when performance is costing you conversion, or when the same content has to reach more than one channel. If your store is a well-merchandised catalogue that converts, a good Liquid theme is the better investment and we will tell you so.

How we approach it

We start with the app audit and the content model, because those decide whether the project is viable and what it will cost, not the framework choice, which is usually the easy part. Then we build the storefront in Hydrogen against a Sanity content model shaped around how your team actually works.

If you are weighing this up, our Shopify and Shopify Plus work is the place to start, or talk to us about whether headless is the right call for your store.