Shopify headless commerce means running Shopify's catalog, cart, checkout and order system behind a storefront you build and host yourself, instead of a Shopify theme. In 2026 that choice became easier to make and easier to undo: Hydrogen turned into a library that works with any JavaScript framework, including Next.js, while Shopify themes kept getting faster.
This guide covers how headless Shopify works, what Hydrogen and Oxygen do, what a headless build costs, the trade-offs, and how to tell whether your brand is ready, using Shopify's own thresholds.
What Is Shopify Headless Commerce?
Headless commerce separates a storefront's frontend from its backend. On Shopify, you build the frontend in any language or framework, and Shopify's APIs supply products, collections, customers, the cart, checkout and international pricing.
A standard Shopify store renders pages with a Liquid theme, and apps add features through theme blocks. A headless store renders pages in your own code, so the design, routing and performance are fully yours, and so is every bug.
|
|
Shopify theme (Liquid) |
Headless Shopify |
|---|---|---|
|
Frontend built by |
Theme developers, often an agency |
Your own engineers or a dedicated agency team |
|
Hosting |
Shopify |
Oxygen, Vercel or your own servers |
|
App Store apps |
Most work through theme blocks |
Storefront features need API work or a headless-ready version |
|
Checkout |
Shopify checkout |
Shopify checkout, handed off from your storefront |
|
Content editing |
Shopify's theme editor |
A separate CMS or custom tools |
How Headless Shopify Works
Every headless Shopify build combines the same four pieces:
- Storefront API: serves products, collections, search and the cart, then hands shoppers to Shopify checkout.
- Customer Account API: handles sign-in, orders, addresses and profiles.
- A frontend framework: Hydrogen with React Router or Next.js, or any stack calling the APIs directly.
- Hosting: Oxygen, Shopify's hosting for Hydrogen, or a host such as Vercel.
Store owners manage API access through the Headless channel, which issues and rotates tokens for storefronts hosted anywhere. Checkout stays on Shopify, so payments, Shop Pay and checkout settings carry over from a theme store.
Hydrogen, Oxygen and Next.js in 2026
Hydrogen 2026-10, released October 14, 2026, changed Hydrogen from a React Router-based framework into a library that adds Shopify commerce to any JavaScript framework. It ships ready-to-deploy starters for React Router and Next.js, and Vercel maintains a Next.js storefront built on Hydrogen called Vercel Shop.
For brands already on Next.js, that removes the old trade-off between Shopify's toolkit and the framework their engineers know. Existing Hydrogen storefronts keep working with no changes, and a migration skill moves them to the library when the team is ready.
Hydrogen also ships 20 skills that teach coding agents how to build storefront features. Oxygen hosting is still free, and Hydrogen storefronts can run on Vercel or any other host instead.
Benefits of Headless Shopify
The benefits are real, but they show up only when a brand uses the freedom:
- Full design control: custom page types, product builders and content layouts a theme can't express.
- One backend, many frontends: the same catalog can feed a website, a mobile app, in-store screens or a kiosk.
- The stack your team already knows: with Hydrogen 2026-10, a Next.js team keeps Next.js and still gets Shopify's commerce tooling.
- Content-heavy sites: pairing Shopify with a headless CMS suits editorial brands and multi-brand groups.
Drawbacks and Hidden Costs
Shopify itself warns that headless "can introduce increased complexity compared to traditional monolithic setups" and that "a totally blank slate can lead to ecommerce experiences that deliver below-average performance."
- You own the frontend for good: every feature a theme gives you, from search and filters to the cart drawer, becomes code your team maintains.
- App gaps: apps that add storefront features through theme blocks don't render on a headless store without extra API work.
- Marketers lose self-service: without the theme editor, landing pages and promotions need a CMS or a developer.
- SEO moves into your code: sitemaps, redirects, canonical tags and structured data that a theme handles have to be built and tested.
- More moving parts: more API calls mean more places for latency and failures, and several frontends add overhead.
How Much Does Headless Shopify Cost?
Shopify frames headless as a program, not a project. Its guidance pairs headless storefronts with budgets of $1 million or more and timelines of six months or longer, against under $1 million and under six months for a theme store.
Agency builds for a single storefront can start lower. DigitalSuits, for example, publishes $20,000 to $100,000 and 4 to 7 months for a headless Shopify B2B store. On top of the build, budget for a headless CMS subscription and the engineers who maintain the frontend after launch, a cost that recurs every month the site is live.
When Is Headless Shopify Worth It?
Shopify's own guidance is the clearest test. It says many merchants meet their customers' needs with a theme and recommends headless for brands with established internal technology and product teams.
|
Factor |
Shopify theme (Liquid) |
Headless storefront |
|---|---|---|
|
Budget |
Less than $1 million |
$1 million or more |
|
Timeline |
Less than 6 months |
6 months or longer |
|
Development |
Typically an external agency |
Internal technology and product teams |
|
Online revenue |
Less than $20M to $50M |
More than $50M to $100M |
Headless is worth it when at least one of these is true:
- You sell through several frontends, such as web, an app and in-store screens, and need one catalog behind them.
- Your experience needs something a theme can't do, and you've confirmed a custom section, an app or Shopify Functions can't do it either.
- You already run Next.js or React and have engineers ready to own the storefront.
For most brands under $50M in online revenue, a fast theme with custom sections and Shopify Functions gets the same results with less risk. SpeedTech Lights' module-by-module light bar configurator, for example, was rebuilt on Shopify Plus without going headless. That's where Netalico's Shopify speed optimization work and custom theme builds start.
Headless Shopify Examples
Shopify's own case studies include ButcherBox and Ruggable, both of which built headless storefronts on Shopify. Oatly's global site also went through a headless redesign, and Netalico, Oatly's US Shopify development team since 2019, kept the US store running smoothly through the transition.
The reverse move happens too. Better Brand came to Netalico with a headless site whose animations the team loved but couldn't edit or use to track marketing, and Netalico migrated it onto Shopify so the team could manage its growing product line itself.
Headless Shopify and AI Shopping Agents
AI shopping channels don't depend on your frontend. Shopify's Agentic Storefronts sync products to ChatGPT, Microsoft Copilot, AI Mode and Gemini from the Shopify admin, and Shopify publishes each store's commerce profile at /.well-known/ucp on its myshopify domain.
A headless store gets the same agent reach as a theme store, so agent readiness is a product data question, not an architecture one. Our guide to ACP vs UCP explains the protocols, and the AI shopping agents checklist puts dates on the setup work.
Headless or Theme: Getting a Second Opinion
Netalico, a Shopify Plus Premier Partner founded in 2011 with an in-house team across the Americas, has worked both sides of this decision, from supporting Oatly's US store through a headless redesign to moving Better Brand back to Shopify. Its Shopify Plus development team starts with Shopify's thresholds above and recommends the cheaper path whenever it gets the same result.
Shopify Headless Commerce: FAQs
What is headless Shopify?
A Shopify store whose storefront is built and hosted separately, often with Hydrogen or Next.js, while Shopify's APIs run the catalog, cart, checkout and orders.
Is headless Shopify faster than a theme?
It can be, but not by default. Shopify warns that a blank-slate build can perform below average, and a well-built theme on Shopify's infrastructure is fast enough for most brands.
How much does a headless Shopify store cost?
Agency builds for a single storefront start around $20,000 to $100,000. Shopify pairs full headless programs with budgets of $1 million or more and timelines of six months or longer.
Do I need Shopify Plus to go headless?
No. The Storefront API and Hydrogen work on paid plans, and Oxygen hosting is free. Plus adds checkout customization and the higher-volume features larger headless brands usually rely on.
What's the difference between Hydrogen and Next.js?
Since October 2026 they aren't alternatives. Hydrogen is Shopify's commerce library, and it runs inside Next.js, React Router or other JavaScript frameworks.
Do Shopify apps work on a headless store?
Apps that work in the admin or at checkout usually do. Apps that add storefront features through theme blocks need API integration or a headless-ready version.
Can I switch from headless back to a Shopify theme?
Yes. Products, customers and orders stay in Shopify, so moving back means rebuilding the storefront as a theme, as Better Brand did with Netalico.



