Headless Shopify gets pitched as the "serious" option for growing brands. For some stores it is. For many others it doubles the cost of every change and slows the marketing team down. This guide is for founders and ecommerce leads weighing a headless build against an Online Store 2.0 theme, with the October 2026 Hydrogen release in mind.
Key takeaways
- On October 14, 2026, Shopify made the new Hydrogen generally available. It is now a framework-agnostic JavaScript library rather than a framework built on React Router, with starters for React Router and Next.js.
- Existing Hydrogen storefronts keep working, and Shopify says there is nothing you need to do today. Oxygen hosting remains free.
- Headless means your storefront is a separate app that talks to Shopify through the Storefront API. Checkout stays on Shopify either way.
- A Liquid theme is still the right default for most DTC brands. Headless pays off when you have a real reason: content-heavy experiences, an existing JavaScript app, multiple front ends, or a dedicated engineering team.
What "headless" means on Shopify
A standard Shopify store uses a Liquid theme. Shopify hosts it, renders it, and gives your team the theme editor to change sections, blocks and content without code. Online Store 2.0 themes support sections on every page, app blocks and metafield-driven content.
A headless store separates the front end from Shopify. Your storefront is a JavaScript application, hosted on Oxygen, Vercel or elsewhere, that fetches products, collections, search and the cart through the Storefront API. Customer login and order history come through the Customer Account API. Shopify still runs checkout, payments, orders, inventory and the admin. As Shopify's docs put it, Hydrogen "doesn't include checkout UI, because checkout stays on Shopify."
What changed with Hydrogen in 2026
Until this year, Hydrogen was a framework: first built on Remix, then on React Router. Choosing Hydrogen meant choosing Shopify's stack.
The 2026-10 release turns Hydrogen into a library that "works with any JavaScript framework." It handles the hard commerce parts (cart, variant selection, buyer-currency pricing, consent-aware analytics, Shop Pay and customer login) and you add it to the app you already have. The developer preview, announced in Shopify's Spring '26 Edition, was described as working with any framework including Next.js.
Practical consequences:
- Two starters. React Router 7 deployed to Oxygen, or Vercel Shop, a Next.js storefront maintained by Vercel (Hydrogen docs).
- Agent-ready tooling. The release ships with 20 skills for coding agents and support for shopping agents in WebMCP-enabled browsers, using the same standard storefront actions as Liquid themes.
- Existing builds are safe for now. Shopify says older Hydrogen storefronts keep working and offers a migration skill when you're ready. It didn't publish an end-of-support date.
This lowers the barrier for teams that already run a Next.js or similar site. It doesn't lower the ongoing cost of owning a custom front end.
Liquid theme vs headless: side by side
| Factor | Online Store 2.0 theme | Headless (Hydrogen or custom) |
|---|---|---|
| Who can edit pages | Marketing team in the theme editor | Usually developers, or a separate CMS |
| App compatibility | Most storefront apps work via app blocks | Many storefront apps need custom integration |
| Hosting | Included with Shopify | Oxygen (free) or your own host |
| Speed potential | Good with a lean theme | Excellent, but only if engineered well |
| Upfront cost | Lower | Higher: custom app, CMS, integrations |
| Ongoing cost | Theme updates, app fees | Engineering team, hosting ops, dependency updates |
| Checkout | Shopify checkout | Shopify checkout |
| Time to launch | Weeks | Months |
When headless is worth it
In my experience, headless earns its cost when at least one of these is true:
- You already have a JavaScript web app. A media site, a content platform or a SaaS product that wants to add commerce. The new Hydrogen library is built exactly for this.
- Content and commerce are deeply mixed. Editorial storytelling, interactive configurators or experiences a theme can't render well.
- You serve multiple front ends. Web, a native app, kiosks or in-store screens sharing the same commerce backend.
- You have engineers on staff. Not a freelancer once a quarter. Someone who owns the front end every week.
- You've hit a measurable theme limit. Performance or UX goals you've tried and failed to reach with a well-built theme.
When a Liquid theme is the better call
- You are a DTC brand under a few dozen people with no in-house developers.
- Your marketing team launches landing pages and campaigns weekly.
- You rely on storefront apps for reviews, loyalty, bundles or personalization.
- Your speed problems come from app bloat or heavy media, which headless doesn't fix by itself. See the Core Web Vitals guide.
Pro tip: Before going headless for speed, audit your theme. Removing unused apps and optimizing images often closes most of the gap at a fraction of the cost. The app stack audit guide shows how.
Hidden costs of headless
Budget honestly for these:
- A content system. Without the theme editor, you need a CMS (or Shopify metaobjects with custom tooling) so non-developers can edit pages.
- App replacements. Reviews, search, personalization and loyalty apps need headless SDKs or custom integration.
- SEO plumbing. Sitemaps, canonical tags, structured data, redirects and hreflang that a Liquid theme handles largely for you.
- Analytics and consent. Hydrogen includes consent-aware analytics, but custom builds must wire tracking and consent carefully.
- Maintenance. Framework upgrades, dependency updates and API version changes, every year.
A decision process
- Write down the problem. "We want to be modern" is not a problem. "Our product configurator can't run in a theme" is.
- Try to solve it in a theme. Custom sections, theme app extensions and metaobjects go further than most people expect.
- Price both options over three years. Include people, not just build cost.
- Consider a hybrid. Keep the Liquid theme for the store and build one headless experience (a configurator, a content hub) where it matters.
- If you go headless, start from a starter. Use the React Router or Next.js starter rather than building from scratch, and keep checkout on Shopify.
FAQ
Is Shopify Hydrogen free?
Hydrogen is an open-source library, and Shopify says Oxygen hosting remains free. Your real costs are development, a CMS, and ongoing engineering.
Do I need Shopify Plus for headless?
Headless storefronts use the Storefront API and the Headless or Hydrogen sales channels. Shopify's plan comparison lists up to 25 headless storefronts on Plus; check shopify.com/pricing for limits on your plan.
Does headless improve SEO?
Not automatically. A fast, well-built headless site can perform well, but you take on SEO work a theme handles for you. A poorly built one can do worse.
Can I use Next.js with Shopify now?
Yes. Hydrogen 2026-10 works with any JavaScript framework, and Shopify points to Vercel Shop as the Next.js starter.
What happens to my existing Hydrogen store?
Shopify says existing Hydrogen storefronts keep working with nothing to do today. A migration skill is available when you choose to move to the new library.
Next steps
Write down the one problem you think headless solves, then try to solve it with a theme first. If a theme genuinely can't do it, price a three-year headless plan including people and maintenance, and compare it against a hybrid. If you want an independent view before committing budget, book a Shopify consultation.