Le headless commerce est une architecture e-commerce où le front-end (la couche visible, ce que voit et manipule le client) est découplé du back-end (le moteur qui gère produits, panier, paiement et commandes). Les deux communiquent par API. Cette séparation offre une liberté de création quasi totale, au prix d'une complexité et d'un coût nettement supérieurs à ceux d'un thème classique.
C'est une architecture puissante, mais rarement nécessaire. Chez Stellar Projects, après plus de 100 projets Shopify, nous déconseillons le headless à la grande majorité de nos clients, et cette page vous explique honnêtement pourquoi, à qui il s'adresse vraiment, ce qu'il coûte, et ce que nous faisons à la place.
Sommaire
Qu'est-ce que le headless commerce ?
Par définition, le headless commerce sépare la vitrine du moteur. Dans une boutique Shopify classique, le front et le back sont solidaires : le thème affiche les pages et Shopify gère la logique commerciale, le tout dans un même système. Dans une architecture headless, on retire la « tête » (le front) pour la reconstruire sur une technologie indépendante (React, Vue, Next.js), reliée au back-end de Shopify via la Storefront API.
Concrètement, la séparation se répartit ainsi :
| Couche | Rôle | En headless |
|---|---|---|
| Front-end | Design, pages, parcours, interactions | Application sur-mesure (React, Next.js), hébergée à part (Vercel, Netlify) |
| API | Pont entre les deux couches | Storefront API de Shopify |
| Back-end | Catalogue, panier, paiement, commandes, admin | Shopify, conservé tel quel |
Le gain théorique : une expérience 100 % sur-mesure et des performances de pointe. Le revers : vous quittez le confort du natif Shopify (éditeur de thème, certaines apps, extensions de checkout) et vous prenez en charge une deuxième stack technique à construire et à maintenir.
Ce tableau le montre : en architecture découplée, tout repose sur les échanges de données entre le front et Shopify. Avant de vous lancer, faites le point sur les API Shopify à maîtriser pour comprendre exactement ce qui transite entre les deux couches.
Headless ou thème : ce qui change vraiment
La différence avec un thème classique ne se résume pas à la performance. Voici le comparatif honnête, avantages et inconvénients compris :
| Critère | Thème Shopify (personnalisé) | Headless |
|---|---|---|
| Liberté de design | Élevée, dans le cadre du thème | Totale, sans contrainte |
| Performance | Très bonne si le thème est propre | Potentiellement excellente |
| Délai de mise en ligne | Semaines | Mois |
| Autonomie de l'équipe marketing | Forte (éditeur de thème, sections) | Faible, tout passe par les développeurs |
| Écosystème d'apps | Complet | Partiel, beaucoup d'apps ne fonctionnent plus |
| Maintenance | Une stack | Deux stacks, front et back |
| Coût de possession | Maîtrisé | Élevé et récurrent |
Le piège classique : choisir le headless « pour la performance » alors que la lenteur venait en réalité d'un thème mal construit ou surchargé d'applications. Dans ce cas, un thème optimisé règle le problème pour une fraction du budget.
Combien coûte un projet headless ?
C'est le point que les partisans du headless évoquent rarement en premier. Deux natures de coûts se cumulent : le build initial, puis le run, c'est-à-dire le coût récurrent de fonctionnement.
| Poste | Thème personnalisé | Headless |
|---|---|---|
| Build initial | 5 000 à 30 000 € | 40 000 à 150 000 € et au-delà |
| Run annuel | Abonnement Shopify et apps | Hébergement du front, maintenance des deux stacks, équipe de développement continue |
| Évolutions | Rapides, souvent en autonomie | Chaque changement mobilise un développeur |
Ces fourchettes sont celles constatées sur le marché français. L'écart n'est pas seulement à l'achat : le headless engage une charge de maintenance durable, là où un thème bien construit se fait vivre par l'équipe marketing elle-même. Pour comprendre le budget d'un projet Shopify standard, notre page combien coûte un site Shopify détaille les postes.
Pour qui le headless se justifie-t-il ?
Le headless a de vrais cas d'usage : très gros volumes, contraintes de performance extrêmes, expérience de marque radicalement singulière, écosystème technique déjà orienté composable. Avant de dire oui à un client, nous passons cinq questions au crible :
- Votre thème actuel vous bloque-t-il réellement, ou est-ce un problème d'intégration et d'optimisation qu'un bon thème réglerait ?
- Avez-vous une équipe de développeurs front en interne, ou le budget d'une maintenance technique continue ? Le headless n'est pas un projet, c'est un engagement permanent.
- Votre trafic et votre chiffre d'affaires justifient-ils un investissement à six chiffres, build et run compris ?
- Avez-vous un besoin réel que l'écosystème Shopify natif, ses apps et ses metaobjets ne couvrent pas ?
- Êtes-vous prêt à renoncer à une partie du natif Shopify : éditeur de thème, extensions de checkout, certaines applications ?
Si la réponse à la plupart de ces questions est non, le headless coûtera cher pour un bénéfice que vous n'exploiterez pas. C'est le constat que nous faisons dans la très grande majorité des cas.
Notre parti pris : le semi-mesure
Assumons-le clairement : Stellar ne pratique pas le headless. Non par incapacité technique, mais parce que le niveau de maturité e-commerce de nos clients et leurs attentes en matière d'expérience et de design n'en réclament pas. Un headless mal exploité, c'est un coût élevé pour une valeur jamais récupérée.
Notre spécialité, c'est ce que nous appelons le semi-mesure : la personnalisation avancée de thème. Nous partons d'un thème existant, dont nous conservons le bouquet fonctionnel éprouvé (panier drawer, méga-menu, filtres, tunnel de commande natif), et nous l'adaptons intégralement à des maquettes esthétiques conçues sur-mesure par nos soins. Vous obtenez ainsi le meilleur des deux mondes :
- Un design entièrement à votre image, dessiné par nos équipes, sans le carcan visuel d'un thème standard.
- La robustesse et les fonctionnalités du natif Shopify, maintenues et compatibles avec l'écosystème d'apps et l'éditeur de thème.
- Un site que vous administrez en autonomie, sans dépendre d'un développeur pour chaque modification.
- Un budget et un coût de possession maîtrisés, sans la double stack du headless.
C'est cette approche que nous déployons sur chacune de nos créations et refontes Shopify : un rendu de niveau sur-mesure, sans la dette technique du headless.
Les alternatives natives qui suffisent
Dans la grande majorité des projets, ce que les marques attendent du headless est déjà atteignable en natif, depuis l'arrivée des thèmes Online Store 2.0. Trois briques suffisent le plus souvent :
- Les sections partout : les thèmes 2.0 permettent d'ajouter des sections modulables sur toutes les pages, produits et collections comprises, pour composer des mises en page riches sans code.
- Les metaobjets : de véritables bases de données structurées dans Shopify pour vos contenus réutilisables, sans application externe. Le détail est sur notre guide des metaobjets Shopify.
- La personnalisation avancée de thème : développements Liquid ciblés là où le thème atteint ses limites, sans jamais casser le natif.
Cette combinaison couvre la quasi-totalité des besoins d'une marque en croissance, pour un budget et une agilité sans commune mesure avec un projet headless.
Composable commerce et Hydrogen
Deux termes reviennent souvent autour du headless. Le commerce composable (composable commerce) est le concept plus large : bâtir toute sa pile e-commerce à partir de briques best-of-breed interchangeables, dont le front découplé n'est qu'un élément. Hydrogen est le framework front officiel de Shopify, pensé pour construire des vitrines headless sur Shopify plus rapidement, hébergé sur Oxygen.
Si votre contexte justifie réellement une architecture découplée, mieux vaut la construire avec les outils natifs de l'écosystème. Nous détaillons le « comment » dans notre page dédiée à Shopify Hydrogen. Et si vous hésitez encore, un échange de 30 minutes avec un expert vous évitera un investissement à six chiffres dont vous n'aviez pas besoin.