Architecture d’un thème Shopify
Ouvrez le dossier atelier-lumiere-theme créé au guide précédent : chaque sous-dossier a un rôle précis, jamais interchangeable.
Un thème Shopify Online Store 2.0, la génération actuelle de thèmes, n'est pas un unique fichier géant : c'est un ensemble de dossiers, chacun avec un rôle bien défini. Comprendre cette organisation avant d'écrire la moindre ligne de Liquid vous évitera de chercher au mauvais endroit dans les prochains guides.
Les huit dossiers principaux
| Dossier | Rôle |
|---|---|
| layout | Le squelette commun à toutes les pages : en-tête, pied de page, balises générales du document. |
| templates | Détermine ce qui s’affiche pour chaque type de page : accueil, produit, collection, page, article. |
| sections | Des modules de contenu réutilisables, que le marchand peut ajouter, retirer et réordonner dans l’éditeur de thème. |
| blocks | Des éléments plus petits à l’intérieur d’une section, eux aussi configurables et réordonnables. |
| snippets | De petits fragments de code Liquid réutilisables, invisibles pour le marchand dans l’éditeur. |
| assets | Les images, fichiers CSS et JavaScript qui définissent l’apparence et le comportement du thème. |
| config | Les réglages globaux du thème, visibles dans l’éditeur, comme les couleurs ou les polices générales. |
| locales | Les fichiers de traduction, pour un thème disponible en plusieurs langues. |
layout : le squelette commun
Le fichier layout/theme.liquid est obligatoire dans tout thème. C'est lui qui définit la structure HTML de base présente sur toutes les pages : la balise <html>, l'inclusion des fichiers CSS et JavaScript globaux, et généralement l'en-tête et le pied de page, communs à toute la boutique. Une balise Liquid spéciale, {{ content_for_layout }}, indique où le contenu propre à chaque page vient s'insérer à l'intérieur de ce squelette.
templates : une page, un rôle
Chaque type de page a son propre template : index.json pour la page d'accueil, product.json pour une fiche produit, collection.json pour une page de collection. Dans les thèmes Online Store 2.0, ces templates sont des fichiers JSON, pas directement du Liquid : ils listent quelles sections apparaissent sur cette page, et dans quel ordre, ce qui permet au marchand de les réorganiser depuis l'éditeur de thème sans toucher au code.
sections et blocks : le contenu modulaire
Une section, par exemple sections/featured-product.liquid, combine du balisage HTML, de la logique Liquid, et un bloc spécial {% schema %} qui décrit les réglages configurables par le marchand. Une section peut elle-même accepter des blocks, des éléments plus petits et répétables à l'intérieur : c'est exactement ce que vous construirez pour Atelier Lumière aux guides 13 et 14 de ce parcours.
snippets : réutiliser sans répéter
Un snippet est un petit fragment de code Liquid que vous pouvez inclure dans plusieurs sections ou templates différents, pour éviter de dupliquer le même bloc de code partout où il est nécessaire. Contrairement à une section, un snippet reste invisible pour le marchand : il n'apparaît jamais comme un élément ajoutable depuis l'éditeur de thème.
assets, config, locales
Le dossier assets contient vos fichiers CSS, JavaScript et images statiques. Le dossier config contient settings_schema.json, qui définit les réglages globaux du thème (comme une palette de couleurs générale), et settings_data.json, qui stocke les valeurs actuellement choisies par le marchand pour ces réglages. Le dossier locales contient les traductions du thème, sous forme de fichiers JSON par langue.
Pour Atelier Lumière, vous travaillerez surtout dans sections, un peu dans snippets et assets. Les dossiers layout, config et locales existent déjà, fonctionnels, dans le thème Skeleton créé au guide précédent : vous n'avez pas besoin de les reconstruire pour suivre ce parcours.
Comment vérifier que vous vous repérez bien
Ouvrez atelier-lumiere-theme dans votre éditeur de code, et essayez de retrouver, sans aide, où se trouve le fichier qui définit la structure commune à toutes les pages (indice : dans layout), et où se trouve le fichier qui liste les sections de la page d'accueil (indice : dans templates, sous index.json).
Vérifiez que vous avez compris
Vous voulez ajouter un petit fragment de code Liquid qui affiche un badge « Fait main », réutilisé sur plusieurs fiches produit différentes, sans jamais apparaître comme un élément que le marchand pourrait ajouter ou retirer depuis l'éditeur de thème. Dans quel dossier ce fragment doit-il vivre ?
Dans snippets. Une section serait visible et manipulable par le marchand dans l'éditeur de thème, ce qui n'est pas souhaité ici. Un snippet reste invisible à ce niveau, tout en restant réutilisable dans plusieurs fichiers Liquid différents.