What is headless Shopify?
Headless Shopify is a setup where Shopify keeps running products, inventory, cart and checkout, but a separate front end, built with a framework like Hydrogen or Next.js, renders the storefront your customers see. The two talk through Shopify's Storefront API. The theme, Liquid templates and theme editor drop out of the picture.
In a standard Shopify store, the theme is the front end. You edit sections in the theme editor, install apps that inject features into the theme, and Shopify hosts everything. In a headless store, your team owns a codebase. That codebase fetches product data from Shopify, often content from a headless CMS, and sends shoppers to Shopify's checkout when they're ready to pay.
That separation is the whole point and the whole cost. You get full control over design, page structure, performance and content. You also take on everything Shopify used to do for the front end: hosting, builds, app integrations, analytics wiring and every bug fix. This hub walks through when that trade is worth making, what it costs, which framework to pick, and what to do instead when it isn't. If you only want the short version, read our honest verdict on Shopify native vs headless for DTC brands.
When is headless Shopify worth it?
Headless Shopify is worth it when you hit a limit that a theme genuinely can't solve and you have the team to own a custom app long term. Both conditions matter. A real limit with no team leads to a stalled storefront, and a team with no real limit leads to an expensive rebuild of what a theme already did.
These are the thresholds we look for. Two or more, plus an in-house or retained development team, is a good sign that headless is worth scoping. One on its own usually has a cheaper fix.
Threshold | What it looks like | Can a theme handle it? |
|---|---|---|
Content-heavy brand | Editorial stories, guides, lookbooks and campaigns that mix content and products on every page | Partly, but editors hit the limits of sections and metaobjects |
Complex integrations | Custom pricing, subscriptions, configurators, ERP or PIM data shown live on product pages | Sometimes, through apps; custom logic gets fragile |
Multiple storefronts | Several brands, regions or B2B and DTC fronts sharing one catalog | Possible with Markets and expansion stores, but design diverges |
Performance ceiling | App scripts and theme bloat you can't remove without losing features | Often fixable with an app and theme audit first |
Unique experiences | Interactive product builders, 3D, app-like account areas | Limited; this is where custom code earns its cost |
Team in place | Developers who will own the storefront for years, not just launch it | Not needed for a theme |
The last row is the one people skip. A headless storefront is software. It needs dependency updates, framework upgrades, monitoring and someone who knows the codebase when checkout breaks on a Friday. If nobody will own it after launch, the honest answer is no.
When is headless Shopify not worth it?
Headless Shopify isn't worth it when the real problem is brand, copy, design or a slow theme, because all of those are cheaper to fix inside Shopify. Most requests we hear for headless start with a store that looks dated or converts poorly, and neither of those needs a new architecture.
- Your store looks generic. A custom theme or a well-designed premium theme with custom sections fixes this. Design, not architecture, is the bottleneck.
- Your product pages don't convert. That's usually copy, photography, proof and offer structure. A headless build with the same copy converts the same.
- Your site is slow. Start with an audit of apps, scripts and images. Many slow themes are slow because of a dozen tracking and widget scripts that would follow you to headless anyway.
- You want nicer campaign pages. Build them on a visual builder or as custom Shopify pages. Our guide to the Shopify and Framer hybrid setup covers this route.
- You rely on many apps. Reviews, bundles, loyalty, upsells and subscriptions often assume a Liquid theme. Each one becomes integration work in headless.
There's also a growing group of brands who went headless, then found the maintenance cost higher than the benefit. We wrote a separate, deliberately contrarian piece on moving a headless Shopify store back to a theme for teams in that position.
What are the pros and cons of headless Shopify?
The main advantage of headless Shopify is control over every pixel and every request; the main disadvantage is that you now own all of it. Here's the trade in one view.
Pros
- Full design freedom, with no theme section limits
- Content and commerce mixed freely on any page, often from a headless CMS
- Control over performance: you decide what loads and when
- One codebase can power several storefronts, regions or channels
- Custom features built exactly to spec instead of stitched from apps
Cons
- Much higher build cost than a theme, and a longer project
- Ongoing developer time for upgrades, fixes and new features
- Many theme apps don't work without rebuilding their front end
- Marketers lose the theme editor unless you add a CMS and page builder
- More moving parts: hosting, CMS, API limits, preview and caching
Notice that every pro depends on the team using it. Design freedom is only valuable if someone designs well and ships often. That's why the team row in the threshold table carries so much weight.
How much does headless Shopify cost?
Headless Shopify builds commonly cost six figures through an agency, and the ongoing cost of running them is the part most budgets underestimate. Agency quotes we've seen for full headless commerce builds commonly start around €100,000–150,000 and go up from there, and they vary widely with catalog size, integrations and the number of storefronts.
- Typical agency quotes we see for a full headless Shopify build (they vary widely)
- €100k–150k+
- Designify's fixed price for one custom landing page, a cheaper first step
- $6,000
- Designify's monthly retainer for ongoing design and development
- $6,000/mo
The build is only the first bill. Budget for hosting, a headless CMS plan if you use one, monitoring, and most of all developer time for app integrations, framework upgrades and new features. A theme store gets much of that from Shopify and app vendors. A headless store gets it from your team or your agency, every month. Our headless Shopify cost guide breaks down the ranges by scope and what drives them.
Hypothetical example: how the running cost adds up
For example, suppose a DTC brand with a mid-sized catalog launches a headless storefront. In year one, alongside the build, it needs someone to rebuild its reviews widget, bundle builder and loyalty display against their APIs, plus fix issues found after launch. In year two, the framework ships a major version, the CMS changes its pricing tiers, and marketing wants a new campaign template every month.
None of those are unusual. Each one is developer time that a theme store would mostly have absorbed through app updates and the theme editor. The lesson: compare the three-year cost of both options, not the launch quote.
Should you build headless Shopify with Hydrogen or Next.js?
Choose Hydrogen if you want the shortest path to a Shopify-first storefront with Shopify hosting; choose Next.js if your storefront is content-led, mixes several data sources, or your team already runs Next.js elsewhere. Both are React and both call the same Storefront API, so the choice is mostly about team and content, not features.
Factor | Hydrogen | Next.js |
|---|---|---|
Made by | Shopify | Vercel and the open-source community |
Built on | React Router (formerly Remix) | Next.js App Router |
Default hosting | Oxygen, Shopify's hosting | Vercel, or any Node or edge host |
Shopify helpers | Built-in commerce components and cart utilities | Shopify's libraries or your own data layer |
Best for | Shopify-only stores, commerce-first teams | Content-led brands, multi-source data, existing Next.js teams |
We build in Next.js, so read our view with that in mind. Our full comparison of Shopify Hydrogen vs Next.js goes through team fit, content needs and lock-in factor by factor, and says plainly when Hydrogen is the better pick.
What's the cheaper alternative to going headless?
The cheaper alternative is to keep Shopify's theme for the store and fix the parts that actually hold you back: a stronger theme, a clearer product page, and custom landing pages for campaigns. For most DTC brands, this captures most of what headless promises at a fraction of the cost and with almost none of the maintenance.
There are three versions of this, and they stack:
- Upgrade the theme. Move to a well-built theme or a custom theme with sections your team can edit. Audit apps and scripts at the same time and remove anything that isn't earning its weight.
- Rewrite and redesign the key pages. Home, collection and product pages carry most of the revenue. Better copy, proof and photography usually beat a new stack.
- Put campaign and brand pages on a visual builder. Launch pages, stories and paid-traffic landing pages can live in Framer or Webflow on a subdomain or path, with buy buttons or links into Shopify. See Shopify to Webflow for brand sites and the Shopify and Framer hybrid setup for how that works.
If you do this and still hit the thresholds above, you'll go into a headless project with clearer requirements, better content and a team that knows what it needs. That's a far better starting point than going headless to fix a design problem.
How do you migrate a Shopify theme store to headless?
You migrate to headless in phases, with SEO and checkout as the two things you protect at every step. The catalog stays in Shopify, so there's no product data move, but every URL, template and app feature on the front end has to be rebuilt and checked.
Inventory the current store
List every template, app that touches the front end, tracking script and URL pattern. This becomes the scope.
Decide the content model
Choose where editorial content lives: Shopify metaobjects, or a headless CMS such as Sanity or Payload.
Build the storefront in staging
Rebuild templates, rewire apps through their APIs, and connect cart and checkout.
Map every URL
Keep Shopify-style paths where you can, and redirect the rest one-to-one.
Cut over in phases
Launch content pages or one market first when possible, then the full store, watching revenue and rankings.
Our step-by-step guide to migrating a Shopify theme store to headless covers the phased cutover plan in detail, including how to keep URLs stable and what to check in the first weeks after launch. If you're also moving content from another CMS, the patterns in our headless CMS migration guide apply too.
What breaks when you go headless on Shopify?
What breaks most often when you go headless is anything that depended on the theme: apps, the theme editor, some analytics and a few native features. None of these are dealbreakers on their own, but together they're the hidden scope in most headless projects.
- Theme apps. Apps that inject blocks into Liquid templates, like many review, upsell and bundle apps, need their API or a custom front end. Some don't offer one.
- The theme editor. Marketers lose drag-and-drop sections. You'll need a CMS with a page builder or structured content, plus live preview.
- Tracking. Pixels and analytics events the theme handled need to be wired up again in your app, and checked against Shopify's checkout events.
- Native features. Things like predictive search, localization switchers and customer accounts need building or connecting through the right APIs.
- Speed of small changes. Changing a banner can become a ticket and a deploy, unless you design the CMS for it.
The fix is to scope these up front. Before you approve a headless build, ask for a list of every app and feature, with how each one will work in the new stack and who will maintain it.
Who should build and run a headless Shopify store?
A headless Shopify store should be built by a team that will still be around to run it, whether that's your own developers or an agency on an ongoing arrangement. A launch-and-leave project is the most common way headless goes wrong, because the storefront starts aging the day the agency hands it over.
When you compare partners, ask who owns upgrades, who answers when checkout or an app integration breaks, and how marketing will ship new pages without a developer. The same questions apply to any platform migration, and our guide to hiring a Webflow or Framer migration agency lists the rest. If you're weighing headless for content more than commerce, our notes on headless WordPress with Next.js and on moving content to a headless CMS while keeping Framer cover the content side.
Our own model for continuous storefront work is the monthly retainer: $6,000 a month for an ongoing design and development team, no hourly tracking. It fits brands that ship new pages and features every month. It's not the right fit if you want a one-off build and nothing after, or if your needs are small enough that a theme and a few landing pages cover them.
Which headless Shopify guide should you read next?
Start with the guide that matches the decision in front of you. The table below groups the guides in this hub by question.
Your question | Read this |
|---|---|
Should we go headless at all? | |
Which framework should we use? | |
How do we migrate safely? | |
What will it cost? | |
We went headless and regret it | |
We only want a better brand site | |
We want campaign pages without theme dev | |
Our content needs a real CMS |
