What headless Shopify actually means
A standard Shopify store renders pages through Liquid themes. The theme is tightly coupled to Shopify's backend and handles layout, content and commerce in one system. A headless Shopify store keeps Shopify as the commerce backend (products, inventory, checkout, orders, customer accounts) but replaces the Liquid theme with a custom frontend, typically built on a framework like Next.js, Remix, Astro, Nuxt or Shopify's own Hydrogen.
The frontend reads from Shopify through the Storefront API (GraphQL) and renders pages however the team decides. The checkout stays on Shopify's hosted checkout, which is the reason headless Shopify works well for most merchants but also the reason it has real limits.
When headless is the right answer
Most Shopify stores do not need to go headless. Liquid themes are fast, well-supported, and handle the vast majority of use cases. The cases where headless is worth the extra cost:
Content and commerce need to work together. Editorial pages, product stories, brand journalism, configurators, long-form guides, all rendered consistently with product pages. Shopify's CMS is lighter than a dedicated headless CMS like Storyblok. For content-heavy brands, headless with Shopify plus Storyblok is a stronger endpoint than Shopify alone.
Frontend performance is a direct business driver. Mid-market and enterprise merchants with large catalogs, heavy traffic and strict Core Web Vitals targets sometimes find Liquid's performance ceiling limiting. A headless frontend on a modern framework can deliver better INP and LCP scores, though the gap has narrowed as Liquid has improved.
Custom UX beyond what themes support. Product configurators, multi-step quote builders, embedded tools, live data from other systems. Possible in Liquid with work, but more natural in a React or Vue frontend.
Multi-brand or multi-site from one backend. Several storefronts sharing the same Shopify catalog, each with its own brand, design and content. Possible with Liquid but cleaner when the frontend is decoupled.
When headless is not the right answer
Going headless for the wrong reasons is one of the fastest ways to blow a Shopify budget. The cases where it typically is not worth it:
A straightforward D2C store with standard product pages, no editorial layer, and no performance ceiling being hit. Liquid themes handle this faster, cheaper and with less maintenance.
Teams without frontend engineering capacity. Headless means ongoing ownership of a separate codebase. If there is no in-house team and no agency retainer for maintenance, the frontend becomes a liability.
Merchants who picked Shopify for its app ecosystem. Many Shopify apps assume a Liquid theme and hook into it. On a headless frontend, those apps either need to be replaced with API-level equivalents or custom-built. This is often the hidden cost that surprises teams mid-project.
Hydrogen, React and the framework choice
Hydrogen is Shopify's own React-based framework for headless storefronts. It is deeply integrated with Shopify's Storefront API and ships hosted on Shopify's Oxygen platform. For teams committed to Shopify long-term and happy with React, Hydrogen is the path of least resistance.
The alternatives are framework-first: Next.js, Remix, Astro or Nuxt, with Shopify accessed through the Storefront API directly. This route gives more flexibility in hosting, deployment and tooling, at the cost of building more of the commerce integration yourself. For content-heavy sites that pair Shopify with Storyblok or similar, Next.js with Vercel or a similar edge platform is common.
The framework choice is less about performance (they are all fast enough) and more about team skills, hosting strategy and long-term maintenance. A framework the team already uses in other products usually wins over a framework they have to learn.
Storyblok plus Shopify, the content-first pattern
For brands where content and commerce carry equal weight, pairing Storyblok as the CMS with Shopify as commerce is a recurring pattern. Storyblok handles pages, components and editorial workflows with a visual editor that content teams actually use. Shopify handles products, inventory, orders and checkout. The frontend reads both and renders unified pages.
This works well because Storyblok's component-based model maps cleanly to how brands think about page building, and Shopify's commerce features map cleanly to how merchants think about selling. The integration point is the frontend. The frontend pulls product data from Shopify and content data from Storyblok, and renders the result.
The trade-off is complexity. Two systems to maintain, two APIs to consume, two sets of caching to manage. For content-heavy brands this pays back. For product-catalog-first D2C stores, it is usually overkill.
SEO on headless Shopify
Headless SEO is where projects fail or succeed. With a Liquid theme, SEO defaults are largely handled, such as meta tags, structured data, canonical URLs and sitemap generation. On a headless frontend, every piece has to be implemented explicitly.
Server-side rendering is non-negotiable. Pages must render server-side or with static generation, not client-side. Google crawls and renders, but a pure client-side SPA still loses SEO battles. Next.js SSR/SSG, Hydrogen, Astro and Remix all handle this well.
URL structure needs explicit design. Shopify's URL structure (/products/handle, /collections/handle) is often not what a headless team wants. Custom URLs are possible but must map cleanly to Shopify's resource identifiers and preserve redirect paths from any migration.
Structured data must be implemented manually. Product schema, breadcrumb schema, article schema, FAQ schema. Every type that matters needs explicit JSON-LD output from the frontend.
Sitemap generation is the team's responsibility. Shopify generates a sitemap for Liquid themes, but a headless frontend needs its own. Usually built from Shopify's catalog plus content from the CMS.
See our Shopify migration guide for more on SEO preservation during a move to headless.
Checkout, the fixed point
The checkout stays on Shopify regardless of what the frontend looks like. Shopify's hosted checkout handles payment, tax, shipping and order creation. This is the reason headless Shopify works well for most markets, and also the reason it has limits.
Custom checkout logic has to fit within what Shopify Plus allows through checkout extensibility. For B2B checkout with invoice, PO numbers and approval flows, the B2B checkout supports the native fields. For more complex B2B scenarios with quote approvals and multi-level flows, the checkout becomes a constraint.
For Nordic payment methods, Klarna, Svea, Walley, Adyen and Mollie all integrate with Shopify Plus checkout. For B2B, Briqpay handles invoice and credit checks.
Hosting and deployment
Shopify's Oxygen is built for Hydrogen and is the simplest route for teams on Hydrogen. Beyond Oxygen, the common options are Vercel, Cloudflare Pages, AWS or a managed Node host. The choice is framework-dependent. Next.js runs well on Vercel or self-hosted, Astro on Cloudflare, Nuxt on multiple options.
Edge rendering is where modern frontends have a real speed advantage. Cached product data served from edge locations near the user, plus on-demand commerce data from Shopify, delivers the hybrid experience most headless builds are aiming at.
What a headless Shopify project costs
A straightforward headless Shopify build with a single frontend and standard integrations typically runs €60,000 to €120,000. A build with Storyblok integration, custom UX, multi-market support or B2B layers generally runs €100,000 to €250,000. The Shopify Plus licence sits on top. Ongoing maintenance, typically frontend developer time plus infrastructure, is in the range of €2,000 to €6,000 per month depending on scope.
Compared to a standard Liquid theme build (€20,000 to €50,000), headless is always a premium. The question is whether the specific reasons justify it. Contact us for a scoping conversation if you are weighing the trade-off.