When to Move From Shopify to Headless, and When Not To

Move to headless when the storefront is what holds you back: you need a front end a theme cannot produce, content from another system on every page, or several storefronts on one catalogue, and you have developers to own it. Stay on a theme if the problem is checkout, pricing or payments. Headless keeps Shopify's checkout and commerce rules exactly as they are.

This guide is for brands already on Shopify who keep hearing "go headless" from agencies and want to know whether it solves their actual problem. Every Shopify fact below comes from Shopify's developer documentation, checked on 29 September 2026. RAITHub has not shipped a headless Shopify storefront for a client, so read this as engineering guidance, not a case study.

What does "headless Shopify" actually mean?

It means Shopify keeps running products, inventory, orders and checkout, but the pages your customers see are a separate application that reads from Shopify through an API. The "head" is the storefront; you replace it and keep the body.

Shopify offers two routes (Shopify: headless commerce):

• Hydrogen and Oxygen. Hydrogen is Shopify's framework for headless storefronts. Shopify describes it as "a set of components, utilities, and design patterns that make it easier to work with Shopify APIs", and a Hydrogen project is a React Router application with Shopify features pre-configured. Oxygen is Shopify's "global serverless hosting platform, built for deploying Hydrogen storefronts at the edge" (Shopify: Hydrogen and Oxygen fundamentals).
• Bring your own stack. Any framework and any host, such as Next.js on Vercel, talking to the same APIs.

Both routes read data through the Storefront API, which Shopify says "provides commerce primitives to build custom, scalable, and performant shopping experiences" (Shopify: Storefront API). And both still send the buyer to Shopify to pay. When a buyer is ready, the storefront reads the cart's checkoutUrl, and in Shopify's words, "the response includes a URL that redirects customers through Shopify's web checkout" (Shopify: manage a cart).

That last point decides most of this article. Headless changes what happens before checkout. It does not change checkout itself, pricing rules, payment methods or B2B limits.

What changes when you move from a theme to headless?

You gain full control of the front end and take on everything a theme used to do for you. The table compares the two on the things store owners notice after launch.

Area	Online Store theme	Headless storefront
Front end	Liquid theme, within the theme editor's model	Any design and any page structure you can build
Hosting	Shopify	Oxygen for Hydrogen, or your own host
Checkout	Shopify checkout	Still Shopify checkout, through checkoutUrl
Apps that add storefront features	Install and enable in the theme editor	Theme app extensions target Online Store 2.0 themes, so each feature needs an API integration or a rebuild
Who edits pages	Marketing, in the theme editor	Developers, or a content system you connect
Upgrades and security fixes	Theme updates	Your framework, dependencies and API version, maintained by your team
Ongoing cost	Theme plus apps	Developer time every month, plus any hosting and content-system fees

The app row surprises people most. Shopify's documentation says "theme app extensions can integrate with Online Store 2.0 themes" (Shopify: theme app extensions). Reviews widgets, upsell blocks and size guides that you switched on with a click in the theme editor do not appear on a headless storefront by themselves. Before you commit, list every app that puts something on a page and check how each one works without a theme.

When is moving to headless worth it?

When at least two of these five signals are true and you have, or will hire, developers to look after the storefront for years, not months.

1. The design cannot be built in a theme. Interactive product builders, editorial layouts that mix content and products freely, or navigation that does not fit the template model. If a skilled theme developer says "possible, but hacky" more than once, count it.
2. Content lives somewhere else. A content management system, a recipe or guide library, or a knowledge base that must share pages with products. Headless lets one front end read from both.
3. You run several storefronts on one catalogue. Different brands, regions or languages that need genuinely different front ends, not just translated text.
4. The storefront is part of a larger product. A member area, a configurator or a custom account experience that already runs as a web application, where the shop should feel like part of it.
5. You need front-end performance a theme cannot reach after real optimisation. Only after the theme and its apps have been cleaned up and measured. Many slow stores are slow because of apps and images, which headless does not fix on its own.

When should you not go headless?

When the problem sits behind the storefront. Headless replaces the pages, so it cannot fix anything that lives in Shopify's commerce engine.

• Checkout rules. A rule that must stop an order before payment still runs in Shopify's checkout, with the same plan conditions. See Shopify's limitations and when to go custom for the checkout, Functions and payments walls.
• B2B pricing and credit. Catalog limits and net terms are Shopify settings, not storefront features; Shopify B2B tiered pricing without Plus covers the options.
• Payment methods Shopify does not support in your market. The checkout is the same, so the gap is the same.
• Multi-vendor payouts or verification before sale. Those are platform rules. They point to a custom platform, not a custom storefront.
• A small team with no developer. A headless storefront is software you own. Without someone to maintain it, every small change becomes a ticket and every dependency update a risk.

If most of your list is in this section, compare a theme with a full custom build instead, starting from Shopify vs custom ecommerce.

Hydrogen or your own stack: which should you pick?

Pick Hydrogen on Oxygen if the storefront is the only application and your developers are happy with React Router. Pick your own stack when the shop has to live inside an application you already run.

Factor	Hydrogen on Oxygen	Your own stack (for example Next.js)
Framework	React Router, with Shopify components and patterns	Whatever your team already uses
Hosting cost	Oxygen at no extra cost on Starter, Basic, Grow, Advanced, Plus and Pause and Build plans	Your host's pricing
Shopify-specific helpers	Built in	You write or choose them
Other data sources and your own backend	Possible	Natural, if you already run one
Fits best when	The storefront is the whole product	The shop is one part of a bigger application

The Oxygen plan list is from Shopify's Hydrogen fundamentals, which also notes that Oxygen is not available on Agentic plans.

What does a headless storefront look like in code?

At its core it is GraphQL requests to the Storefront API, with the API version in the URL. A minimal TypeScript sketch: read products, create a cart, and hand the buyer to Shopify's checkout. The public-token header is from Shopify's Storefront API reference, which listed 2026-07 as the current version when this was written.

const SHOP = process.env.SHOPIFY_STORE_DOMAIN! // your-store.myshopify.com
const TOKEN = process.env.SHOPIFY_STOREFRONT_PUBLIC_TOKEN!
const API = 'https://' + SHOP + '/api/2026-07/graphql.json'

async function storefront<T>(query: string, variables: Record<string, unknown> = {}): Promise<T> {
  const res = await fetch(API, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': TOKEN,
    },
    body: JSON.stringify({ query, variables }),
  })
  const json = await res.json()
  if (!res.ok || json.errors) throw new Error(JSON.stringify(json.errors ?? res.status))
  return json.data as T
}

export const listProducts = () =>
  storefront(`{ products(first: 12) { nodes { handle title
    priceRange { minVariantPrice { amount currencyCode } } } } }`)

// Create a cart with one line, then send the buyer to Shopify's checkout.
export async function checkoutUrlFor(variantId: string, quantity = 1) {
  const data = await storefront<{ cartCreate: { cart: { checkoutUrl: string } } }>(
    `mutation ($lines: [CartLineInput!]) {
      cartCreate(input: { lines: $lines }) { cart { checkoutUrl } }
    }`,
    { lines: [{ merchandiseId: variantId, quantity }] },
  )
  return data.cartCreate.cart.checkoutUrl
}

Two things in that sketch matter in production. The API version is pinned, so you choose when to upgrade rather than having behaviour change underneath you. And the public token is only for browser-visible queries; for server-side calls, Shopify provides private tokens and asks you to send the buyer's IP in the Shopify-Storefront-Buyer-IP header so its bot protection works properly. Shopify also states that requests from real buyers "aren't subject to a fixed request-per-minute limit", while checkout creation is throttled per minute.

How do you move to headless without losing search traffic?

Treat the launch as a migration with a checklist, because a new storefront is a new website as far as search engines are concerned.

1. Keep the URL structure. If product pages lived at /products/<handle>, keep that pattern. Every URL you change needs a permanent redirect.
2. Rebuild what the theme gave you for free. Page titles, meta descriptions, canonical tags, product structured data, the XML sitemap and robots.txt. A theme ships these; a headless storefront ships what you build.
3. Render product pages on the server. Prices and titles should be in the HTML, not filled in later by JavaScript.
4. Measure speed on real devices before and after. A headless front end can be slower than a theme if it ships a large JavaScript bundle. If yours is built on Next.js, why a Next.js app is slow in production covers the usual causes.
5. Run both for a short overlap on a staging domain, and switch the domain only when the checklist passes.

Why RAITHub for this

Because the hard part of a headless storefront is not the first release but running a web application well for years, and that is RAITHub's daily work.

• Deep in the stack most headless builds use. RAITHub builds on Next.js, React and TypeScript. TheSkinProof, the founder's own marketplace venture rather than a client project, runs on Next.js 16 with 217 API endpoints and 750+ automated tests.
• Honest about scope. RAITHub has not shipped a headless Shopify storefront for a client. The Storefront API work is ordinary API integration, and this post's Shopify facts come from Shopify's own documentation.
• Tests and SEO as part of the build. Redirects, structured data and sitemaps are checked in CI, not trusted to a launch-day spreadsheet. The Next.js development service sets out how it works.
• Fixed scope, your code. A free 15-minute technical audit, then a written fixed quote. You own the code; an NDA is standard.

When you don't need us

• Your theme does what you need. A good Online Store 2.0 theme and a tidy app list serve most brands well. Keep it.
• You want Hydrogen and have React developers. Shopify's Hydrogen documentation and templates are a practical starting point for an in-house team.
• Your real wall is the platform. If multi-vendor payouts, verification or local payment rails are the issue, a custom platform is the conversation; see custom ecommerce and marketplace development and the ecommerce industry page.

If you are weighing headless, send your app list, your current Core Web Vitals and the design or content you cannot build today, and book the free 15-minute technical audit.

Last reviewed: 29 September 2026. Shopify documentation checked on 29 September 2026.

Frequently asked questions

What is headless Shopify?

Shopify keeps running products, orders and checkout, while your storefront is a separate application that reads from Shopify through the Storefront API. Buyers are still sent to Shopify's checkout to pay.

Does headless Shopify change the checkout?

No. A headless storefront reads the cart's checkoutUrl, which redirects customers through Shopify's web checkout. Checkout rules, payment methods and plan limits stay the same.

Is Hydrogen hosting free?

Shopify says Oxygen, its hosting for Hydrogen storefronts, is available at no additional cost on Starter, Basic, Grow, Advanced, Plus and Pause and Build plans. It is not available on Agentic plans. Developer time is the real cost.

Do Shopify apps work on a headless storefront?

Not automatically. Theme app extensions integrate with Online Store 2.0 themes, so any app that adds something to your pages needs its own API integration or a replacement on a headless storefront. Check every app before you move.

Will going headless make my Shopify store faster?

Only if the front end is built well. Many slow stores are slow because of apps, scripts and images. Fix those in the theme first; a headless storefront with a heavy JavaScript bundle can be slower than a clean theme.

Should I use Hydrogen or Next.js for headless Shopify?

Hydrogen on Oxygen suits a storefront that is the whole product. Next.js or another framework suits a shop that has to live inside an application you already run. Both use the same Storefront API.