← The Ultimate Guide to Succeeding on Shopify
Publié01 Sep 2023
AuteurVolkier Bentinck
Lecture5 min

Headless Commerce: Who it's For, Why it Matters

Headless commerce is an e-commerce architecture where the front-end (the visible layer, what the customer sees and interacts with) is decoupled from the back-end (the engine that manages products, carts, payments, and...

Headless commerce is an e-commerce architecture where the front-end (the visible layer, what the customer sees and interacts with) is decoupled from the back-end (the engine that manages products, carts, payments, and orders). The two communicate via APIs. This separation offers almost total creative freedom, at the cost of significantly higher complexity and cost compared to a classic theme.

It's a powerful architecture, but rarely necessary. At Stellar Projects, after more than 100 Shopify projects, we advise against headless for the vast majority of our clients, and this page honestly explains why, who it's really for, what it costs, and what we do instead.

What is headless commerce?

By definition, headless commerce separates the storefront from the engine. In a classic Shopify store, the front and back are integrated: the theme displays pages and Shopify handles the business logic, all within the same system. In a headless architecture, the "head" (the front) is removed and rebuilt on an independent technology (React, Vue, Next.js), connected to Shopify's back-end via the Storefront API.

Specifically, the separation is as follows:

Layer Role In headless
Front-end Design, pages, user journey, interactions Custom application (React, Next.js), separately hosted (Vercel, Netlify)
API Bridge between the two layers Shopify Storefront API
Back-end Catalog, cart, payment, orders, admin Shopify, kept as is

The theoretical gain: a 100% custom experience and cutting-edge performance. The downside: you leave the comfort of native Shopify (theme editor, certain apps, checkout extensions) and take on a second technical stack to build and maintain.

Headless vs. Theme: What truly changes

The difference with a classic theme is not just about performance. Here's an honest comparison, including advantages and disadvantages:

Criterion Shopify Theme (customized) Headless
Design freedom High, within the theme framework Total, without constraints
Performance Very good if the theme is clean Potentially excellent
Go-live time Weeks Months
Marketing team autonomy Strong (theme editor, sections) Low, everything goes through developers
App ecosystem Complete Partial, many apps no longer work
Maintenance One stack Two stacks, front and back
Cost of ownership Controlled High and recurring

The classic trap: choosing headless "for performance" when the slowness actually came from a poorly built theme or one overloaded with applications. In such cases, an optimized theme solves the problem for a fraction of the budget.

How much does a headless project cost?

This is the point that headless proponents rarely mention first. Two types of costs accumulate: the initial build, then the run, meaning the recurring operating cost.

Item Custom Theme Headless
Initial build €5,000 to €30,000 €40,000 to €150,000 and beyond
Annual run Shopify subscription and apps Front-end hosting, maintenance of both stacks, continuous development team
Evolutions Fast, often autonomously Each change requires a developer

These ranges are what we observe in the French market. The difference is not only in the initial purchase: headless involves a sustained maintenance burden, whereas a well-built theme can be managed by the marketing team itself. To understand the budget of a standard Shopify project, our page how much a Shopify site costs details the items.

Who is headless justified for?

Headless has real use cases: very high volumes, extreme performance constraints, a radically unique brand experience, and a technical ecosystem already geared towards composable. Before saying yes to a client, we scrutinize five questions:

  1. Is your current theme really blocking you, or is it an integration and optimization problem that a good theme would solve?
  2. Do you have an in-house front-end development team, or the budget for continuous technical maintenance? Headless is not a project; it's a permanent commitment.
  3. Does your traffic and revenue justify a six-figure investment, including build and run?
  4. Do you have a real need that the native Shopify ecosystem, its apps, and its metaobjects do not cover?
  5. Are you ready to give up part of native Shopify: theme editor, checkout extensions, certain applications?

If the answer to most of these questions is no, headless will be expensive for a benefit you won't exploit. This is what we find in the vast majority of cases.

Our approach: bespoke customization

Let's be clear: Stellar does not practice headless. Not due to technical inability, but because the e-commerce maturity level of our clients and their expectations in terms of experience and design do not require it. A poorly exploited headless solution is a high cost for value never recouped.

Our specialty is what we call bespoke customization: advanced theme customization. We start from an existing theme, retaining its proven functional set (drawer cart, mega-menu, filters, native checkout funnel), and we adapt it entirely to aesthetic mock-ups custom-designed by us. This gives you the best of both worlds:

  • A design entirely in your image, drawn by our teams, without the visual constraints of a standard theme.
  • The robustness and functionalities of native Shopify, maintained and compatible with the app ecosystem and theme editor.
  • A site that you manage autonomously, without depending on a developer for every modification.
  • A controlled budget and cost of ownership, without the dual stack of headless.

This is the approach we deploy for each of our Shopify creations and redesigns: a custom-level rendering, without the technical debt of headless.

Sufficient native alternatives

In the vast majority of projects, what brands expect from headless is already achievable natively, since the advent of Online Store 2.0 themes. Three building blocks are usually sufficient:

  • Sections everywhere: 2.0 themes allow adding modular sections on all pages, including products and collections, to create rich layouts without code.
  • Metaobjects: true structured databases in Shopify for your reusable content, without external applications. Details are available in our guide to Shopify metaobjects.
  • Advanced theme customization: targeted Liquid developments where the theme reaches its limits, without ever breaking native functionality.

This combination covers almost all the needs of a growing brand, for a budget and agility incomparable to a headless project.

Composable commerce and Hydrogen

Two terms often come up around headless. Composable commerce is the broader concept: building your entire e-commerce stack from interchangeable best-of-breed components, of which the decoupled front-end is just one element. Hydrogen is Shopify's official front-end framework, designed to build headless storefronts on Shopify faster, hosted on Oxygen.

If your context genuinely warrants a decoupled architecture, it's better to build it with the ecosystem's native tools. We detail the "how" in our page dedicated to Shopify Hydrogen. And if you're still hesitating, a 30-minute chat with an expert can save you a six-figure investment you didn't need.

 

Foire aux questions

Expect 40 000 to 150 000 € and beyond for the initial build, depending on the scale of the front end to develop, compared to 5 000 to 30 000 € for a customized theme. On top of that comes heavy recurring operations: front-end hosting, maintaining two stacks, and an ongoing development team. Headless is not a one-off project—it is a long-term cost commitment.

Consultation offerte

Vous avez un projet e-commerce
à nous confier ?

Réservez un call gratuit de 30min avec un expert Shopify

  • Diagnostic express
  • Pistes concrètes
  • Devis sous 48 h
Réserver 30 min