Shopify Headless Commerce: When It's Worth It, When It's Not, and What It Actually Costs

Updated May 2026.

We migrated Denham from Salesforce Commerce Cloud to headless Shopify. Their site got 3x faster. Veloretti's headless storefront hits a 80+ Lighthouse score while running a configurator with 100+ bicycle combinations across four languages. These are real numbers from production stores, not benchmarks from a demo environment.

We also talked roughly 75% of the brands who came to us wanting headless into choosing native Shopify Plus instead. Because headless is not an upgrade. It is a different architecture, with different trade-offs, and the wrong choice costs six figures and months of runway for no meaningful return.

After 200+ Shopify migrations, this is the framework we use to make that call.

What is Shopify headless commerce?

Shopify headless commerce separates the storefront from the backend. The frontend is a standalone React application that talks to Shopify through the Storefront API, while Shopify keeps running the entire commerce engine: catalog, checkout, payments, fulfillment.

In a standard Shopify setup, the platform handles both the storefront (what customers see) and the backend (products, orders, checkout). They are tightly coupled. When a visitor loads a page, Shopify's servers render it using Liquid templates and serve it directly.

Headless Shopify separates these two layers. Shopify still runs the entire commerce backend: catalog, checkout, payments, fulfillment, order management. But the storefront becomes a standalone application, typically built with React, that talks to Shopify through its Storefront API.

You keep Shopify's operational engine. You replace the presentation layer with something you fully control.

Why this matters in practice

The difference is not abstract. Here is what it looks like:

With native Shopify, your design and functionality options live within what Liquid templates and the theme architecture allow. That ceiling is high (Shopify's Online Store 2.0 is genuinely capable), but it exists. When Veloretti needed a product configurator that dynamically renders 100+ bicycle combinations with real-time pricing across four languages, that ceiling was the problem.

With headless, the frontend is a React application. There is no ceiling. You can build whatever the browser can render. The trade-off: you are now maintaining a custom software application, not configuring a theme.

Shopify Hydrogen: the framework that changed the equation

Before Hydrogen, going headless on Shopify meant stitching together a React framework, Shopify's APIs, a hosting provider, and a deployment pipeline from scratch. It worked, but it was expensive to build and fragile to maintain.

Hydrogen changed this. It is Shopify's own React framework, purpose-built for commerce:

• Server-side rendering and streaming SSR out of the box (critical for SEO and performance)
• Pre-built commerce components: cart, product, collection hooks that wire directly to Shopify
• Oxygen hosting: Shopify's own infrastructure, deployed from your repo, no separate hosting to manage
• Storefront API integration without the boilerplate

When we built Denham's headless storefront, the Hydrogen ecosystem was not mature enough. We built a custom headless system with Contentful as the CMS layer. Today, Hydrogen is our default for new headless builds because it cuts weeks off the timeline and reduces long-term maintenance complexity.

That said, Hydrogen is not the only option. We use Next.js when a project has heavy editorial content requirements or needs deep integration with non-Shopify systems. But for most commerce-first headless builds, Hydrogen is the right call.

Read that last row twice. We are a headless Shopify agency and we are telling you that native is the right choice for most brands. That conviction is earned, not performative. We have built both, and the brands that get the most value from headless are the ones that genuinely needed it.

The three-question filter

Before running through the full analysis, answer these three questions in order. If you hit a "no" at any point, go native.

1. Is platform performance your primary bottleneck? If your current storefront speed is directly limiting revenue, continue. If not, go native.
2. Do you want to build your frontend in React? If your team has a clear vision for the frontend and wants full control, continue. If not, go native.
3. Do you have CMS requirements that Shopify's native tools cannot meet? If you need granular content models, role-based access, or editorial workflows beyond the Shopify admin, headless is worth evaluating. If not, go native.

Three yeses and you should keep reading. Anything less and native Shopify Plus is almost certainly the right call. Below is the evidence behind each question.

Three signals that headless is worth it

1. Your platform speed is measurably costing you money

This is the first gate in the filter above. If speed is not the bottleneck, stop here.

Denham was on Salesforce Commerce Cloud. Their storefront was slow, the infrastructure was expensive, and the platform was actively limiting their ability to iterate. After migrating to headless Shopify, their site speed improved 3x. That is not a theoretical benchmark. Three times faster, in production, with real traffic.

But context matters. If your current Shopify theme loads in 2.5 seconds and your conversion rate is healthy, headless will not magically double your revenue. The performance unlock matters most when you are starting from a meaningfully broken baseline, like a legacy platform that was never built for modern web performance.

The test: Run Lighthouse on your homepage and top 5 product pages. If your LCP is consistently above 3.5 seconds and you have already optimized your theme, the problem might be architectural.

2. You want to build your frontend in React

This is the signal most agencies downplay because it complicates the sale. A headless Shopify storefront is a React application. It needs React developers for every meaningful change after launch. If your answer to question two was hesitant, that hesitation is the answer.

Denham and Veloretti both have agency partnerships (with us) for ongoing development. That is one model. Other brands bring frontend development in-house. Either works, but you need one of the two.

If your team is non-technical and you do not plan to maintain an agency retainer, headless creates a permanent dependency that gets expensive. A well-built native Shopify Plus theme that your team can manage independently might deliver more long-term value.

3. Your content and commerce operations have outgrown Shopify's native tools

The third gate. If your content team can do their job inside the Shopify admin, you do not need headless to solve a content problem.

Veloretti needed to manage a bicycle configurator with 100+ combinations, four languages, and a content workflow where non-technical staff could update everything from banners to product specs without touching code. Their old platform required developer involvement for every content change.

On headless Shopify with Contentful as the CMS, their team now manages the entire storefront independently. As their founder put it: "It makes us less dependent on developers."

This is the pattern we see repeatedly with enterprise brands:

• Content teams blocked by the Shopify admin who need a dedicated CMS workflow
• Custom product experiences like configurators, bundles, or personalization that push beyond Liquid's limits

If your marketing team submits Jira tickets to change a homepage banner, headless solves that problem at the architecture level.

Five situations where headless is the wrong call

We talk brands out of headless regularly. Not as a negotiating tactic, but because the wrong architecture decision burns six figures and 6+ months.

Your budget is under 100k EUR

A properly executed headless Shopify build starts at 100-150k EUR. That includes strategy, design, Hydrogen development, Shopify Plus configuration, data migration, QA, and launch. Complex enterprise builds run 200-600k+.

If your total replatforming budget is 50-80k, put it into a strong native Shopify Plus implementation. You will get live faster, with lower ongoing costs, and you can evaluate headless for a future phase once the business case is clearer.

You need to be live in under 4 months

Headless builds take 5-8 months for a proper implementation. We have done MVPs faster (Veloretti's initial e-bike launch was a 4-week sprint), but a full-scope headless storefront is a 5+ month commitment.

If time-to-market is the priority, launch on native Shopify Plus first. You can always migrate the frontend to headless later without rebuilding the backend.

Your current site is already fast and converting well

If your Shopify theme loads in under 2.5 seconds, your conversion rate is in a healthy range, and your team can execute without bottlenecks, headless adds complexity without proportional return. Do not rebuild something that works.

You are a single-brand, straightforward e-commerce operation

Headless is designed for complexity: multi-region, multi-brand, complex content, custom experiences. If you sell products online and your content needs are standard, Shopify's native capabilities are more than sufficient. Online Store 2.0 with a well-built theme covers a very wide range of requirements.

Nobody on your side will maintain it after launch

A headless storefront is a custom application. It needs ongoing updates, security patches, performance monitoring, and feature development. If you do not have an internal team or a retainer agreement to maintain it, technical debt accumulates within months. We have inherited headless builds from other agencies where the original team walked away post-launch. The cleanup is always more expensive than doing it right from the start.

What headless Shopify actually costs

Most guides are deliberately vague here. We will not be.

Build investment

A headless MVP typically runs between 100-150k EUR and takes 4-5 months. This fits brands with a straightforward catalog migrating from a legacy platform, where the scope is limited to a single region.

A standard headless build lands in the 150-350k EUR range with a 5-7 month timeline. This is where most of our projects fall: content-rich storefronts with Sanity or Contentful integration, often serving multiple regions.

An enterprise headless implementation starts at 350k EUR and can exceed 500k, taking 6-10 months. These are multi-brand setups, combined B2B and DTC operations, or projects with heavy third-party integrations and custom checkout requirements.

All ranges include strategy, design, development, data migration, QA, and launch support.

Ongoing costs (year 1 and beyond)

Beyond the build, plan for these recurring costs. Shopify Plus runs 2,300+ EUR per month. Hosting is included if you use Oxygen (Shopify's own infrastructure), or 500-2,000 EUR per month for Vercel or alternatives. Maintenance and development is where most brands underestimate: budget 2,000-5,000+ EUR per month for bug fixes, updates, and new feature development. CMS costs (Sanity or Contentful) add 300-3,500 EUR per month depending on your plan and usage.

Total cost of ownership over 3 years for a headless Shopify storefront is roughly 2-3x that of a native Shopify Plus implementation. That premium must be justified by measurable business outcomes: faster load times leading to higher conversion, content team autonomy reducing operational cost, or multi-market expansion that was technically impossible before.

The comparison most people do not make

A 200k headless build that increases conversion rate by 15% on a store doing 5M EUR annually generates 750k in additional revenue over the same 3-year period. That is a clear business case.

A 200k headless build on a store doing 500k annually, where the previous Shopify theme was already performing well? That payback period extends beyond any reasonable planning horizon. Go native.

Brands can deliver stunning, memorable e-commerce experiences without breaking the monolithic structure.

The tech stack, explained

Backend: Shopify Plus

Shopify Plus is the backbone of every headless build we do. It handles:

• Product catalog and inventory management
• Checkout (Shopify Checkout is still the highest-converting checkout in e-commerce)
• Payments and subscriptions
• Order management and fulfillment
• B2B and wholesale capabilities
• Backend logic and integrations
• Automations
• Shopify settings

In a headless setup, none of this changes. You keep all of Shopify's operational power. You are only replacing the frontend layer.

Headless brands with physical retail need a unified commerce backbone — see our complete Shopify POS guide for how the platform handles in-store and online inventory in one system.

Frontend: Hydrogen (our default) or Next.js

Hydrogen is our recommendation for most headless Shopify builds. It is Shopify's framework, optimized for Shopify's APIs, and deploys to Shopify's hosting (Oxygen). Less integration overhead, fewer moving parts, lower maintenance long-term.

Next.js is the alternative when a project requires heavy editorial content, complex routing, or integration with non-Shopify systems. Both Denham and Veloretti were built before Hydrogen matured, using custom headless frontends with Contentful. Today, we would evaluate Hydrogen first for both.

Content management: when you need a CMS and when you do not

Denham and Veloretti were built on Contentful. More recently, we built Mr Marvis on Sanity, and it has become our preferred CMS for new headless projects. Sanity offers better developer flexibility, a more intuitive content modelling experience, and a pricing model that scales more predictably.

In all three cases, the pattern is the same: commerce data (products, variants, pricing, inventory) lives in Shopify, while product and editorial content (landing pages, brand stories, configurator logic, campaign pages) lives in the CMS.

The reason to go with an external CMS is not just about content independence. It comes down to the level of granularity you need in your content model and the role-based access controls available. Shopify's native content tools (metafields, metaobjects) work for structured product data, but they lack the fine-grained permissions, approval workflows, and content modelling depth that enterprise teams require. When your content operations involve multiple editors, reviewers, and regional teams with different access levels, an external CMS is not optional.

Our CMS recommendations:

• Sanity (our current default) for its developer flexibility, real-time collaboration, and content modelling depth
• Contentful for enterprise brands already invested in its ecosystem or with complex multi-market setups
• No external CMS if your content needs are straightforward and your team is small

Hosting

• Oxygen (Shopify's hosting): our default when building with Hydrogen. No separate infrastructure to manage.
• Vercel: the standard for Next.js deployments. Strong edge network and preview capabilities.
• Cloudflare Workers / Pages: emerging option for teams that want edge-first architecture.

The migration process

We follow this process for headless Shopify migrations. Timelines assume standard complexity.

Phase 1: Discovery and architecture decision (weeks 1-3)

This is where we determine if headless is even the right call. We audit the current platform, map integrations, and define the target architecture. Roughly 75% of the time, this phase ends with a recommendation to go native instead.

Deliverable: architecture decision document with technology choices, integration map, and performance targets.

Phase 2: Design and prototyping (weeks 3-6)

UX/UI design, component library definition, interactive prototypes for key flows. Critically, we define a performance budget per page type at this stage, not after development.

Phase 3: Shopify Plus setup (weeks 5-8, parallel)

Store configuration, product migration, checkout customization, payment/shipping setup, Shopify Flow automations. This runs in parallel with frontend development.

Phase 4: Frontend development (weeks 6-16)

The core build: Hydrogen application, component development, CMS integration, API layer, performance optimization, internationalization. This is the longest phase and where most of the budget goes.

Phase 5: QA, migration, and launch (weeks 16-20)

Testing, SEO migration (redirects, sitemaps, structured data), final data migration, staged rollout, and post-launch monitoring.

The most common reason headless projects go over timeline: scope expansion during Phase 4. The flexibility of headless makes it tempting to add features mid-build. We manage this by locking scope after Phase 1 and tracking any additions as a separate backlog.

It's increasingly important to invest in an outstanding digital brand experience.

Performance: real numbers from real stores

Not benchmarks. Production data.

Denham (headless Shopify, migrated from Salesforce Commerce Cloud):

• 3x faster than previous platform
• 3 currencies, 2 languages
• Content team manages frontend independently via Contentful

Veloretti (headless Shopify + Contentful):

• 95+ Lighthouse score on production store
• Product configurator with 100+ bicycle combinations
• 4 languages
• Initial e-bike launch prototype built in 4 weeks
• E-bike presales sold out within days; subsequent rounds sold out in hours
• Non-technical team manages all content independently

Nike x Corteiz (native Shopify Plus, not headless):

• 100,000 concurrent visitors during launch
• 50,000+ simultaneous carts
• Complete sellout in minutes, zero technical issues
• Proof that native Shopify Plus, done well, handles extreme scale

That last example is deliberate. Nike x Corteiz did not need headless. Shopify's native architecture handled 100,000 concurrent visitors without breaking a sweat. The architecture choice should match the problem, not the ambition.

Performance targets we commit to in headless projects

On every headless build, we target a Largest Contentful Paint (LCP) under 1.5 seconds, where the industry standard for "good" is 2.5 seconds. This is the metric that matters most for both user experience and SEO ranking.

For interactivity, we aim for a First Input Delay (FID) under 50ms (industry good: under 100ms), ensuring the site responds instantly when visitors click or tap. Cumulative Layout Shift (CLS) should stay under 0.05 (industry good: 0.1), meaning the page stays visually stable as it loads.

On the infrastructure side, we target a Time to First Byte (TTFB) under 200ms, well below the 800ms that Google considers acceptable. And the overall Lighthouse score should land at 90 or above, compared to the 70+ that most sites consider decent.

An important caveat: going headless does not automatically make your site fast. We have seen headless builds from other agencies that are slower than a well-optimized Liquid theme. The architecture gives you the performance ceiling. Your development team and their discipline determine how close you get.

Headless Shopify and SEO

The question we hear in every headless conversation: will it hurt our search rankings?

It will not, if the migration is done right. It will help, if performance improves meaningfully. Here is what matters:

Server-side rendering is mandatory. Both Hydrogen and Next.js support SSR. Search engines receive fully rendered HTML, identical to a traditional server-rendered page. Client-side-only rendering (where the browser assembles the page from JavaScript) is an SEO risk that no competent agency should ship in 2026.

The redirect map is the highest-risk item in any migration. Every URL from your old site needs a 301 redirect to its new equivalent. This is the most common SEO failure point, headless or not. We build and test redirect maps before launch, not during.

Structured data must be explicitly implemented. Native Shopify themes generate JSON-LD for products and collections automatically. In a headless build, you build this yourself. It is straightforward, but it must not be overlooked.

Speed improvements translate directly to ranking improvements. Google uses Core Web Vitals as a ranking factor. When Denham went 3x faster, the SEO impact was measurable. We have consistently seen 25-40% organic traffic increases in the months following headless migrations where performance improved significantly.

The decision checklist

Before investing in a headless evaluation, run through these ten questions. Score yourself honestly.

1. Is your current site speed measurably hurting conversion? (Not "could be better," but actually costing money)
2. Is your annual online revenue above 2M EUR?
3. Does your team have a clear opinion on how the frontend should be built, and want full control over the technology stack?
4. Does your content team need capabilities beyond what the Shopify admin provides?
5. Do you need custom product experiences (configurators, builders, personalization)?
6. Is your total replatforming budget above 150k EUR?
7. Can you commit to 5+ months before launch?
8. Do you have React developers internally, or budget for an ongoing agency retainer?
9. Are you migrating from a legacy platform (Magento, SFCC, custom) where performance and flexibility are current pain points?
10. Are you planning for multi-brand, B2B, or other structural complexity within the next 2 years?

7-10 yes: Headless is likely the right architecture. Start with a paid discovery to validate.

4-6 yes: It depends on which ones. If #1, #2, and #8 are all yes, headless may still be the right call. If the "yes" answers are mostly aspirational (#5, #10), consider native Shopify Plus now with a headless migration planned for a later phase.

0-3 yes: Go native. A well-built Shopify Plus theme will serve you well, cost less, and launch faster. Revisit headless when the business outgrows it.

Frequently asked questions

Is Shopify headless by default?

No. Shopify is a tightly coupled platform out of the box. The storefront and backend run together, with Liquid templates rendering pages on Shopify's servers. Headless is a deliberate architectural choice that requires building a separate frontend, typically with Hydrogen or Next.js, and connecting it to Shopify through the Storefront API.

What is a headless Shopify store?

A headless Shopify store keeps Shopify Plus as the commerce backend while replacing the native storefront with a custom React application. Brands like Denham and Veloretti run this setup to unlock performance, design freedom, and content workflows that the native theme architecture cannot deliver.

What is the Shopify headless API?

Shopify's Storefront API is the primary interface for headless storefronts. It exposes products, collections, carts, customer accounts, and checkout to a custom frontend. The Admin API handles backend operations. Together they let a headless frontend operate as a full commerce experience while Shopify remains the system of record.

What is the real ROI of going headless on Shopify?

We will give you the honest answer, not the sales pitch. Denham saw a 3x speed improvement migrating from Salesforce Commerce Cloud to headless Shopify. Veloretti's team went from developer-dependent to fully autonomous on content. Those are real, measurable returns. But brands that migrate from an already-decent Shopify theme to headless often see marginal performance gains that do not justify the 2-3x cost increase. ROI is strongest when you are solving a specific, measurable problem, not upgrading for the sake of upgrading.

Is Shopify Hydrogen the same as headless Shopify?

Hydrogen is Shopify's official React framework for building headless storefronts. It is the most common way to go headless on Shopify, but not the only way. Next.js, Remix, and other frameworks work too. Hydrogen's advantage is that it is purpose-built for Shopify: pre-built commerce components, native Storefront API integration, and deployment to Shopify's own Oxygen hosting.

Hydrogen or Next.js: how do you choose?

Hydrogen when the project is commerce-first and you want the tightest Shopify integration with the lowest maintenance overhead. Next.js when you need heavy editorial content, complex page routing, or deep integration with non-Shopify systems. In 2026, Hydrogen covers the majority of use cases. We default to it and only move to Next.js when there is a concrete technical reason.

Do I need Shopify Plus for headless?

Technically, Shopify's Storefront API is available on all plans. Practically, every headless build runs on Shopify Plus. You need Checkout Extensibility, Shopify Functions, advanced API rate limits, and the operational features Plus provides. Given the total investment in a headless build, the Plus subscription cost is negligible.

What happens to my Shopify apps when I go headless?

Backend apps (payment providers, fulfillment, inventory, ERP integrations) keep working normally. Frontend apps (review widgets, popups, chat overlays, loyalty programs) need to be rebuilt or replaced as part of the headless frontend. This is a standard part of migration planning and usually adds 2-4 weeks to the timeline depending on the number of apps.

How long does a headless Shopify migration take?

5-8 months for most implementations. Fast-track MVPs (like Veloretti's 4-week e-bike launch sprint) are possible for limited scope. Full enterprise builds with multi-region, B2B, and complex integrations run 6-10 months. The biggest timeline variables: design complexity, integration count, and data migration scope.

What are the real disadvantages?

Cost (2-3x native), timeline (2-3x native), React developer dependency, loss of Shopify's plug-and-play app ecosystem, higher ongoing maintenance, and the risk of a poorly executed build performing worse than a good Liquid theme. We list these upfront because every brand should weigh them against the benefits for their specific situation.

What is headless commerce?

Headless commerce separates the customer-facing storefront (the "head") from the commerce backend (the "body"). The two communicate through APIs. The brand gets full control over the customer experience while keeping the reliability and scale of an established platform like Shopify. It originated as an enterprise architecture pattern and has become increasingly accessible as frameworks like Hydrogen have lowered the implementation barrier.

Want to hear more?

Ask Phill is a Shopify Platinum Partner with 200+ migrations, including headless implementations for Denham, Veloretti, and other enterprise brands. We help fashion, lifestyle, and beauty brands make the right architecture decision, then execute it.

Book a 30-minute technical assessment to find out whether headless is the right move for your brand. Or explore our headless case studies to see what we have built.

Get in touch here!