×
Shopify agency background 1 Shopify agency background 2 Shopify agency background 3 Shopify agency background 4

Headless Shopify Explained: Is It Right for Your Store?

SHOPIFY E-COMMERCE CMS
Blog image
Post Image

Ayo is the founder of Why Matters, a Shopify agency based in Brighton. With over 20 years of experience in ecommerce, digital marketing, and ROI-driven growth, he has helped hundreds of Shopify brands build, launch, and scale their online stores. Why Matters is a certified Shopify, Klaviyo, and Recharge partner.

SHARE

Key Takeaways

  • Headless Shopify replaces the theme with your own storefront, while Shopify still runs products, carts, customers, checkout and orders through the Storefront API.
  • Hydrogen is Shopify's free, open source toolkit built on React Router, and Oxygen hosting is included at no extra charge on the Starter, Basic, Grow, Advanced and Plus plans.
  • You do not need Shopify Plus to go headless, and Shopify's new developer preview lets Hydrogen's commerce tools work in frameworks such as Next.js.
  • Headless is not automatically faster, and it usually means a separate CMS, extra work for theme based apps and more SEO responsibility.
  • The real cost is people: the build, the integrations and years of ongoing development, not software licences.
  • In our audits of 265 Shopify stores, 196 were still on legacy themes, so for most growing brands a modern theme is the first upgrade to make before considering headless.

Quick Answer

Headless Shopify means replacing your Shopify theme with a custom storefront that connects to Shopify through its APIs, while Shopify still handles products, carts, customers and checkout. It suits brands with omnichannel needs, heavy content or complex product experiences and developers to maintain it. For most growing stores, a well built Liquid theme is quicker to launch, easier for marketing teams to edit and cheaper to run. You do not need Shopify Plus: Hydrogen is free, and Oxygen hosting is included on paid plans from Starter upwards.

Table of Contents

Headless Shopify is often sold as faster pages, total design freedom and no more theme limits. The reality is more nuanced: it can be an excellent choice for a business with complex requirements, capable developers and a clear commercial reason, but it also brings more development, integrations, testing and maintenance. So the useful question is not whether headless is better, but what problem it would solve that Shopify's normal storefront cannot.

What Is Headless Shopify?

A Shopify store has two parts: the commerce system that handles products, prices, stock, customers, orders and checkout, and the storefront customers see. On a normal store, that storefront is a theme built with Liquid, HTML, CSS, JavaScript and JSON templates, arranged in sections and blocks. Headless replaces the theme with your own application, so the journey runs from the customer to a custom front end, then through Shopify APIs to Shopify commerce; Shopify describes this as a model in which the front end and back end run independently (Shopify).

Going headless does not mean rebuilding Shopify. Products, collections, prices, stock, carts, customer accounts, markets and orders stay in Shopify, and a custom storefront can still send buyers through Shopify Checkout (Shopify Help Center). The connection is the Storefront API, which Shopify calls the foundation of custom storefronts, covering products, collections, contextual pricing and carts (Shopify), and the storefront on the other side could be a website, a mobile app or an in store screen.

How headless Shopify fits together Separate CMS for content Hydrogen site Next.js site Mobile app In store screen Storefront API Products, collections Prices and markets Customers and carts Orders and admin Buyers pay on Shopify Checkout Shopify runs
Simplified view. You are building an alternative storefront for Shopify, not an alternative to Shopify.

Headless vs a Shopify Theme at a Glance

AreaShopify themeHeadless Shopify
Front endLiquid themeYour own application
Content editingTheme editor, sections and blocksUsually a separate CMS
AppsMany plug straight inSome need APIs or custom work
HostingIncluded with ShopifyOxygen or another host
SkillsLiquid, HTML, CSS and JavaScriptModern JavaScript, often React
CostUsually lower to build and runUsually higher to build and run
SpeedFast when well builtFast when well built
Best forMost Shopify businessesSpecific experience or architecture needs

How Do Hydrogen and Oxygen Work?

Hydrogen is Shopify's toolkit for custom storefronts. Its projects are React Router apps preconfigured with Shopify features, including ready made components wired to Shopify data and command line tools for development and deployment (Shopify). It covers common storefront work such as products, collections, cart, search, customer accounts, markets and analytics, so developers do not start from scratch, and it is open source with a free Shopify app. With Liquid, Shopify's theme architecture provides much of the structure; with Hydrogen, you gain far more front end freedom and take on more responsibility.

Oxygen is Shopify's hosting platform for Hydrogen storefronts, running at the edge and handling deployments, environment variables, caching and Shopify's CDN. Every change can go to a preview environment for testing before production, with continuous deployment through GitHub. Older guides say Oxygen needs Shopify Plus, but Shopify's developer documentation now lists it at no extra charge on the Starter, Basic, Grow, Advanced, Plus and Pause and Build plans, and on development and sandbox stores for testing, though not on Agentic plans (Shopify).

Hydrogen Is Changing

In June 2026, Shopify released a developer preview of a framework agnostic Hydrogen whose commerce building blocks work in Next.js, SvelteKit, Astro, SolidStart and Nuxt (Hydrogen), and a Next.js and Hydrogen starter now deploys to Vercel (Shopify). Shopify still recommends current Hydrogen for its fully supported React Router route (Shopify), so separate what is supported today from where the platform is heading. You do not have to use Oxygen either: Shopify documents self hosting on Vercel, Netlify and Cloudflare Workers (Shopify), which suits teams with existing hosting standards.

What Are the Benefits of Headless Shopify?

The strongest reason to go headless is needing freedom that Shopify's normal storefront cannot provide efficiently. Developers control routing, interface and behaviour, which makes interactive product builders, complex configurators, advanced quizzes, editorial experiences woven into commerce and highly animated brand journeys easier to build. You also control your address structure, but Shopify recommends a server side redirect from the standard product path if you change it (Shopify), so treat new URLs as SEO work rather than an automatic advantage.

Because the front end talks to Shopify through APIs, one Shopify back end can serve a website, a mobile app, in store screens, a product configurator and international storefronts, and Shopify itself names complex omnichannel and CMS requirements as reasons to consider a custom storefront (Shopify). You can also choose your own CMS, such as Sanity or Contentful, along with search, personalisation, analytics, testing and hosting, and developers can release through Git workflows, preview deployments and automated testing. Every extra choice needs implementing, integrating, monitoring and maintaining, so freedom and complexity tend to arrive together.

What Are the Downsides of Headless Shopify?

The biggest trade off is that someone has to own all that freedom. On a theme, a marketing manager can change homepage sections, swap images, add banners and build landing pages in Shopify's theme editor (Shopify Help Center); on a custom storefront, that workflow disappears unless you add a separate CMS or editing tool, which is why Shopify's showcase lists Sanity and Contentful in many Hydrogen stacks (Hydrogen showcase). Your stack becomes Shopify plus a front end application plus a CMS, and all three have to work together.

Apps need auditing too. Many Shopify apps add features through app blocks and theme app extensions built for the theme editor (Shopify), so a reviews, subscriptions, search, loyalty or bundles app that works in your theme may need an API, dedicated headless support or custom development; Shopify keeps a list of apps that extend Hydrogen builds. For each app, check whether it offers an API, supports Hydrogen, provides front end components and still works with Shopify Checkout, and who will maintain the integration.

Who looks after what Shopify theme Headless Hosting Storefront code Content editing Apps on the page SEO set up Checkout Shopify Oxygen (included) Liquid theme Theme editor App blocks Mostly built in Shopify Shopify Your developers Separate CMS API or custom Your developers Provided by Shopify Your team builds and runs it
Illustrative comparison. The exact split depends on your apps, CMS and hosting choices.

SEO also becomes more of your responsibility. Hydrogen includes tools for titles, descriptions, canonical URLs, social metadata and structured data, plus sitemap and robots.txt routes (Shopify), but your developers still have to implement them, along with internal links, rendering and redirects. You also become more dependent on developers for templates, components, integrations, deployments, API upgrades and debugging, and six months spent rebuilding the storefront is six months not spent on a better subscription flow, a wholesale portal, new markets or conversion work.

How Much Does Headless Shopify Cost?

Hydrogen is free and Oxygen is included on supported plans, but software is rarely the expensive part; the real cost is people. A theme build starts from a storefront framework that already exists, while a headless project is closer to software development, with navigation, search, collections, product pages, cart, accounts, markets, CMS, reviews, recommendations, subscriptions, analytics and SEO all to build and connect, so it will normally cost significantly more than customising a strong theme. Our guide to what a Shopify store costs to build gives wider context.

A separate CMS adds a subscription, content modelling, integration and training, but the ongoing work matters most: front end development, app integrations, API changes, new features, testing, monitoring and performance. So compare the total cost of ownership over several years, a theme build with apps and maintenance against a headless build with a CMS, integrations and ongoing engineering, rather than a theme price against free Hydrogen.

Is Headless Shopify Faster?

Headless can be fast, but it is not guaranteed to be, so be wary of dramatic speed or conversion claims presented without evidence. A well engineered headless store gives developers control over server rendering, caching, data fetching, code splitting, images and scripts, and Hydrogen and Oxygen are built with performance in mind. Yet a headless store can still ship huge JavaScript bundles, heavy images, excess third party scripts and slow APIs, and Shopify notes that code, apps, third party services, images, video and analytics all affect speed (Shopify Help Center).

If your store is slow, find out why before rebuilding it: app overload, unoptimised images, tracking scripts, poor theme code, video and widgets can all be fixed without going headless. Judge performance on real user Core Web Vitals, meaning Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift, rather than one laboratory score, since Shopify itself says there is no such thing as a perfect speed score. Our Shopify speed score guide explains what to measure instead.

What About SEO and AI Shopping?

Headless does not stop a store ranking, but it changes who makes technical SEO work. Oxygen blocks search engines from indexing non production environments to avoid duplicate content (Shopify), but the biggest risk is usually the migration: if a product that has ranked for years at /products/trainers moves to /running/trainers without mapping, you can create 404 errors, lose backlinks, break internal links and disrupt rankings. Treat a headless launch as an SEO migration; our Shopify SEO guide covers the fundamentals.

Headless does not automatically help with AI shopping either. Through Shopify Catalog, Shopify shares eligible product titles, descriptions, images, options, prices and availability with AI channels whatever your front end (Shopify Help Center), and Shopify's Agentic Storefronts make eligible products discoverable in ChatGPT, Google AI Mode and Gemini, Microsoft Copilot and Meta (Shopify Help Center). Clean, complete product data matters most, although your storefront should still be crawlable, properly rendered and well structured for AI systems that read the open web; our agentic commerce guide explains more.

When Does Headless Make Sense?

Headless can be exactly the right architecture in these situations:

  1. Several experiences share one commerce system. A website, mobile app, in store screens, kiosks and a configurator can all run on the same Shopify back end.
  2. Your brand is heavily content led. Long form editorial, buying guides, video and campaign storytelling can benefit from a dedicated CMS woven into commerce.
  3. Your product experience is software. Quizzes, personalised recommendations, configurators, previews and bundle builders make sense headless when developers are constantly fighting the theme.
  4. Markets need very different storefronts. Shopify Markets already handles much of international selling within themes (Shopify Help Center), so headless matters when content, navigation and merchandising must differ substantially by country.
  5. Your team already knows modern JavaScript. Shopify suggests a custom storefront when you already use a front end stack that does not rely on Liquid, and React or Next.js developers can bring their workflow with them.

Rather than rely on old brand lists, check Shopify's current Hydrogen showcase, which features TOMS, Drake Related, Denim Tears, Chubbies, Manors Golf, Oru Kayak and Honeylove (Hydrogen showcase). Their stacks add content management, reviews, search, personalisation, returns and support tools, which is part of the appeal of headless and part of its complexity.

When Should You Stay on a Shopify Theme?

For most growing Shopify businesses, a good theme is the stronger choice if you have a small team, marketing staff edit the site often, your buying journey is conventional, your key apps already work and the budget could earn more elsewhere. Shopify's own guidance is to consider a custom storefront only when the architecture, process or experience you need cannot reasonably be achieved with existing channels, themes and apps (Shopify). So ask whether the theme system is really limiting you, or whether the problem is navigation, weak product pages, too many apps, slow images or an outdated theme, which headless would simply rebuild in React. Our guide to choosing the right Shopify theme is worth reading first.

Questions to Ask Before Going Headless

Before committing to a rebuild, answer these questions honestly:

  • Who maintains it? Not just who builds it, but also what those developers will not build in the meantime.
  • How long can we live with the rebuild? Scope, dependencies, integrations, testing and content and SEO migration all take time.
  • How will marketing edit the site? Design the CMS and publishing workflow as part of the project.
  • Which apps do we depend on? Confirm how each important app works headlessly before choosing the architecture.
  • Could something simpler work? Better theme development, metaobjects, app extensions, a new theme or performance work may solve the problem for less.
Should you go headless? Can a theme, apps or Can you fund developers Is the need omnichannel, metaobjects do the job? after launch? content or complex UX? Yes: improve No: stay on a No: recheck your theme theme for now the brief No Yes Yes Plan a phased headless build
A simplified decision path. Your answers may point to a hybrid or phased approach.

Going headless does not have to be one big switch. A phased approach, such as building one campaign experience, a product configurator or an editorial section while the main theme keeps trading, lets you prove the technical and commercial case before rebuilding everything.

How to Move to Headless Without Losing Rankings

An established store may carry years of SEO value, so map every old URL to its new one and add permanent redirects wherever addresses change. Hydrogen's storefrontRedirect utility can check Shopify's redirects when a route would otherwise return a 404, and Shopify recommends finishing and testing the build before redirecting traffic from the Online Store (Shopify). Preserve or improve titles, descriptions, canonical tags, structured data, internal links and alt text, check the sitemap, robots.txt, analytics, Search Console and ad tracking, and keep successful URLs where you can. For larger rebuilds, follow our Shopify migration checklist.

Why Matters Perspective

Headless Shopify is powerful, but powerful does not mean necessary. We would recommend it when a business can say "we need this architecture because our current storefront stops us delivering X", not when the reason is that headless sounds faster or more modern. In our audits of 265 Shopify stores, 196 were still on legacy themes that predate Online Store 2.0, and those upgrades produced an average 23 point gain in mobile PageSpeed, which shows how much a modern theme alone can change before anyone needs a new architecture.

Most of the merchants we have helped move from Magento to Shopify wanted lower maintenance costs and an end to heavy reliance on developers, and headless brings some of that reliance back. So for many growing stores, a strong theme, good UX, sound development and better marketing will earn more than a new storefront, while headless becomes compelling once the customer experience, content, international set up, digital touchpoints or development team have genuinely outgrown a theme.

Why Matters is a Shopify Select partner with Verified Skills across development and marketing. Our pricing is published, retainer clients are billed one month in arrears and never tied into long contracts, and every development project carries a 3 month guarantee. Read why a Shopify partner agency helps, see our Shopify packages, or email us if you are weighing up headless.

Frequently Asked Questions

What is headless Shopify?

Headless Shopify replaces the normal Shopify theme with a custom storefront that connects to Shopify through APIs such as the Storefront API. Shopify still runs products, carts, customers, checkout and orders, while your own application controls what shoppers see.

Do I need Shopify Plus to go headless?

No. Custom storefronts are not limited to Shopify Plus, and Shopify's developer documentation lists Oxygen hosting at no extra charge on the Starter, Basic, Grow, Advanced, Plus and Pause and Build plans.

Is Shopify Hydrogen free?

Yes. Hydrogen is open source and its Shopify app is free, so the real costs of headless are development, integrations, any separate CMS and ongoing maintenance.

Is headless Shopify faster than a theme?

Not automatically. Headless gives developers more control over performance, but heavy scripts, large images and slow integrations can still make it slow, while a well built theme can be fast, so measure real user performance.

Can I still use Shopify apps with a headless store?

Often, but not always in the same way. Apps that rely on theme app blocks need an API or dedicated headless support, so audit every important app before you commit.

Does a headless store still use Shopify's checkout?

Yes. A custom storefront can send shoppers to Shopify's own checkout, so you do not need to build a checkout of your own.

When should I not go headless?

When you cannot name a problem that a theme, apps or better development cannot solve. Small teams, frequent content editors and conventional buying journeys are usually better served by a well built Shopify theme.

Final Thoughts

Headless Shopify has matured: Hydrogen gives developers Shopify specific tooling, Oxygen provides Shopify managed hosting, the Storefront API connects custom experiences to Shopify, and the new developer preview widens framework and hosting choices. None of that means every store should go headless. Ask what you cannot achieve today, then compare improving your theme with building and maintaining a separate front end; if the need involves complex experiences, several touchpoints, rich content or a mature development team, headless can be an excellent investment, but if the goal is simply a better Shopify store, a good theme will usually get there faster and more cheaply. The right architecture is not the newest one but the simplest one that supports where your business needs to go.