Shopify Plus headless
checkout guide.

What “headless Shopify” really means

It means a custom storefront up to the cart, with Shopify-hosted checkout behind it. You replace the Liquid theme with your own front end (Hydrogen or Next.js) talking to the Storefront API, but the checkout itself stays on Shopify and is customised through Checkout Extensibility. You go headless for the experience, not to rebuild payments. Still choosing a platform? See Shopify Plus vs Magento Hyvä.

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

It is worth it when the storefront experience is a differentiator and you have a team to own the complexity. It is not worth it when the goal is mainly speed and a premium look: a well-built Liquid theme on Shopify Plus delivers most of that at a fraction of the cost. We push back on headless when it adds complexity without a clear win.

The build, step by step

1. Decide if you actually need headless. Headless is worth it when the storefront experience is a differentiator and you have a team to own it. If you mainly need speed and a clean premium build, a fast Liquid theme on Shopify Plus gets you most of the way with a fraction of the complexity. Decide this before writing any code.
2. Keep checkout on Shopify, not headless. Shopify's checkout is not headless; it stays on Shopify and is customised through Checkout Extensibility (checkout UI extensions, Shopify Functions, branding API). Headless applies to the storefront up to the cart; the cart hands off to Shopify-hosted checkout. This is the single most misunderstood part.
3. Choose the stack: Hydrogen or your own. Hydrogen (React) on Oxygen hosting is Shopify's first-party headless stack and the path of least resistance. A custom Next.js front end against the Storefront API is the alternative when you want full control or shared code with other surfaces. Both talk to the same Storefront GraphQL API.
4. Build the storefront against the Storefront API. Model product, collection, cart and customer data from the Storefront API. Cart lives client-side and is created via the Cart API; checkout is a redirect/hand-off to Shopify's hosted checkout with the cart token. Keep PDP and cart fast; they are where conversion is won.
5. Customise checkout with Checkout Extensibility. Add upsells, custom fields, validation and branding through checkout UI extensions and Shopify Functions, configured in shopify.app.toml. This replaces the old checkout.liquid approach, which is being deprecated for Plus merchants.
6. Set a performance budget and ship. Headless can be slower than a good Liquid theme if the JS bundle is unmanaged. Budget LCP and INP, server-render where it counts, and measure on real mobile before launch. Ship behind the existing store and cut over per route.

FAQ

Is Shopify checkout headless?

No. Shopify's checkout always stays on Shopify, even in a headless build. You go headless for the storefront up to the cart, then hand the cart off to Shopify-hosted checkout. Checkout itself is customised through Checkout Extensibility, not replaced.

When does a Shopify Plus brand need headless?

When the storefront experience is a genuine differentiator and there is a team to own the added complexity. If the goal is mainly speed and a premium look, a well-built Liquid theme on Shopify Plus delivers most of the benefit at a fraction of the cost and maintenance.

Hydrogen or Next.js for a headless Shopify storefront?

Hydrogen on Oxygen is Shopify's first-party React stack and the simplest path. A custom Next.js front end against the Storefront API suits teams that want full control or want to share code with other surfaces. Both use the same Storefront GraphQL API.

Will headless improve site speed?

Only if the JavaScript is disciplined. Headless gives you control over rendering, but an unmanaged bundle can be slower than a good Liquid theme. The speed win comes from a performance budget and server-rendering, not from headless by itself.