Storefront API et headless : par où commencer

Depuis le guide 5 de ce parcours, tout ce que vous avez construit vit à l'intérieur d'un thème Shopify : Liquid génère le HTML, l'éditeur de thème pilote l'apparence, et le visiteur voit une page servie directement par Shopify. Ce dernier guide présente une approche différente, où la vitrine visible par le client n'est plus un thème Shopify du tout.

Ce que « headless » veut dire ici

Une boutique headless (littéralement « sans tête ») sépare la vitrine que voit le client de la plateforme qui gère les données commerciales. Shopify continue de gérer le catalogue, les commandes, les clients et les paiements, exactement comme aujourd'hui. Mais la vitrine elle-même, les pages que le visiteur charge dans son navigateur, est construite par une application web entièrement séparée, qui va chercher ses données chez Shopify plutôt que de laisser Shopify générer ses pages.

La Storefront API, la porte d'entrée de cette vitrine

Cette application externe récupère ses données via la Storefront API, une API GraphQL distincte de l'Admin API vue au guide 23. Là où l'Admin API expose des données de gestion protégées par les scopes d'une application installée, la Storefront API expose uniquement des données déjà publiques d'une boutique : les produits publiés, les collections, les prix, la disponibilité, exactement ce qu'un visiteur anonyme peut déjà voir sur une boutique Shopify classique. Le vocabulaire GraphQL appris au guide 23, requête, champ, argument, s'applique de la même façon ici.

Hydrogen, le point de départ officiel

Plutôt que de brancher la Storefront API sur un projet construit entièrement de zéro, Shopify fournit Hydrogen, un point de départ officiel pour construire une vitrine headless. Concrètement, Hydrogen est un projet React Router (le même outil que celui derrière le modèle d'application vu au guide 22), configuré avec Vite et déjà connecté aux bonnes pratiques d'utilisation de la Storefront API. Hydrogen suit un rythme de mise à jour propre, distinct des versions habituelles de Shopify, ce qui signifie que sa documentation officielle reste la seule source fiable pour connaître la version courante au moment où vous vous lancerez.

Pourquoi choisir cette voie, concrètement

Une boutique headless a du sens quand la vitrine doit sortir des possibilités d'un thème, même personnalisé en profondeur : une expérience d'achat radicalement différente d'une boutique classique, une vitrine partagée avec du contenu non commercial géré par un autre système, ou une équipe déjà experte en React qui préfère construire l'intégralité du front plutôt que d'apprendre Liquid. Ce n'est jamais un choix « plus avancé » par défaut : c'est un choix justifié par un besoin précis que le thème ne couvre pas.

Et pour Atelier Lumière ?

Rien, dans tout ce que vous avez construit au fil de ce parcours, ne justifie de rendre Atelier Lumière headless. Un thème Online Store 2.0 bien personnalisé, avec ses sections, ses blocks et ses metafields vus aux guides 10 à 12 et 16, couvre largement les besoins d'une boutique artisanale comme celle-ci. Le headless devient pertinent pour des besoins que ce guide ne fait qu'effleurer volontairement : ce sujet mérite, à lui seul, un parcours dédié plutôt qu'un dernier chapitre condensé.

Ce que vous savez faire maintenant

Vous êtes parti sans jamais avoir ouvert un terminal, et vous savez aujourd'hui installer Shopify CLI, créer un thème en local, et le publier en toute sécurité. Vous comprenez Liquid : ses objets, ses tags, ses filtres, assez pour construire une section et un block configurables de A à Z. Vous savez versionner un thème avec Git, en réutilisant directement ce qu'enseigne le parcours Git et GitHub de Web-Shine Docs. Vous savez créer une application Shopify, l'authentifier, l'interroger via l'Admin API en GraphQL, et réagir à un événement avec un webhook, en respectant à chaque étape le principe du moindre privilège. Vous savez enfin ce qu'une Theme App Extension, une Checkout UI Extension et une Shopify Function permettent, chacune à sa place, et vous savez désormais ce que « headless » signifie réellement, sans le confondre avec un simple effet de mode.

Si un doute technique reste flou, sur Liquid, sur GraphQL, ou sur une commande Shopify CLI précise, la documentation officielle sur shopify.dev reste la référence à consulter en premier, exactement comme ce parcours vous y a habitué guide après guide.

Vérifiez que vous avez compris

Un visiteur anonyme consulte le catalogue d'une vitrine headless construite avec Hydrogen. Cette vitrine interroge-t-elle l'Admin API ou la Storefront API pour afficher les produits ?

La Storefront API. L'Admin API expose des données de gestion protégées par des scopes, destinées à une application installée et autorisée sur la boutique. La Storefront API expose uniquement les données déjà publiques d'une boutique, exactement ce dont une vitrine visible par n'importe quel visiteur a besoin.