Comprendre Liquid Shopify et retrouver le bon code

Ce que Liquid fait quand quelqu'un ouvre ta boutique

Imagine une fiche d'affiche. Le cadre de la page reste semblable, mais le titre, la photo et le prix changent avec le produit. Liquid va chercher les informations disponibles et les insère dans le HTML, le code qui structure la page. Shopify prépare ce résultat côté serveur avant de l'envoyer au navigateur. Je m'appuie ici sur la référence Liquid de Shopify.

Je sépare les rôles pour éviter de demander au mauvais langage de faire le travail. Le HTML définit les éléments, le CSS règle leur apparence, et JavaScript gère notamment les réactions dans le navigateur. Liquid prépare le contenu initial. Si tu changes une variante et que son prix se met à jour sans recharger la page, du JavaScript peut prendre le relais.

Chez moi, Brunelia est une boutique Shopify avec 1 400 affiches, dont 400 à 500 visuels que je veux remplacer parce qu'ils ont été générés avec une IA moins performante. Ce constat est dans mon Carnet d'octobre. Ça donne un repère concret : améliorer la présentation ne remplace pas le travail sur le produit lui-même. Je ne vais pas te vendre une retouche Liquid comme une solution à une affiche qui ne donne pas envie.

Je commence donc par écrire le résultat attendu : afficher la matière sous le titre, masquer une information absente, ou changer la disposition. Si ton besoin est seulement une couleur ou une marge, regarde les réglages du thème avant d'ouvrir du Liquid.

Pour Brunelia, ma boutique d’affiches, je suis déjà sur Shopify : ce guide part donc des thèmes de cette plateforme. Si tu prépares ta première boutique et veux suivre les essais avec tes propres produits, je te propose de créer ta boutique avec Shopify, puis de travailler sur une copie du thème. Si tu es déjà abonné, je te conseille de garder ta boutique actuelle et de commencer avec les réglages et la documentation gratuits.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Les accolades affichent, les balises décident

Je repère d'abord les accolades. Dans `{{ product.title }}`, les doubles accolades demandent d'afficher une valeur. `product` est un objet, autrement dit un ensemble d'informations sur le produit ; `title` est sa propriété de titre. Le point signifie simplement que je lis cette information à l'intérieur de cet objet.

Un filtre transforme la sortie. Dans `{{ product.title | escape }}`, `escape` convertit les caractères spéciaux pour les afficher comme du texte dans du HTML. Le trait vertical fait partie du code. Je le lis comme « puis applique ». Ce filtre convient à un titre en texte simple ; je ne l'applique pas aveuglément à une description dont je veux conserver les éléments HTML.

Pour un prix, `{{ product.price | money }}` applique le format monétaire configuré dans la boutique. Je préfère ça à un symbole ajouté à la main. Attention : si les variantes ont des prix différents, `product.price` correspond au prix minimal du produit. Le prix d'une variante choisie demande de vérifier la logique du thème, y compris son JavaScript.

Les balises `{% ... %}` donnent des instructions. `{% if product.available %}Disponible{% endif %}` affiche le message si le produit est disponible. Une boucle `for` répète un morceau de contenu pour les éléments d'une liste, et se ferme avec `endfor`. Je vérifie les ouvertures et les fermetures avant de chercher un problème compliqué.

Je détaillerai les objets, filtres et balises Liquid dans une page dédiée. Pour maintenant, prends un fichier existant et annote mentalement chaque ligne : donnée lue, transformation appliquée, décision prise. Je garde la documentation des objets, du filtre money et du filtre escape à côté du code. C'est beaucoup plus utile que de mémoriser tout le langage.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Le thème assemble plusieurs dossiers

Je lis le thème comme un assemblage. `layout` contient l'enveloppe générale, souvent `theme.liquid`. `templates` contient les modèles des types de pages. Dans un modèle JSON, je trouve surtout la liste des sections à afficher et leurs réglages, pas le HTML final. JSON est un format de données structurées, avec des clés et des valeurs.

Les fichiers de `sections` produisent de grandes zones de contenu. Une section peut avoir des blocs, les éléments que tu ajoutes ou réordonnes à l'intérieur. Selon l'architecture du thème, ces blocs sont définis dans la section ou viennent de fichiers du dossier `blocks`. Je vérifie le thème présent devant moi au lieu de supposer que tous fonctionnent comme un vieux tutoriel.

Dans `snippets`, je retrouve les petits morceaux de code réutilisés : une carte produit, une icône, un prix. Une instruction comme `{% render 'price', product: product %}` appelle par exemple `snippets/price.liquid` en lui transmettant le produit. C'est un exemple de nom, pas un fichier obligatoire dans chaque thème.

`assets` rassemble notamment les styles et les scripts. `locales` contient les traductions du thème, et `config` ses réglages généraux. Je sépare donc une phrase traduite, une donnée produit et un élément de mise en page avant de choisir un dossier. Je garde les détails de la structure des thèmes et des modèles JSON pour les sous-pages prévues dans cette rubrique. La carte officielle du thème permet de vérifier ces rôles.

Le 19 octobre, j'ai raconté avoir corrigé le même bogue 6 fois sur 6 outils différents. J'ai ensuite centralisé la gestion des comptes IA pour traiter la cause au bon endroit. Ce n'était pas un problème Shopify, mais je retrouve la même logique ici : avant de copier une correction dans chaque section, regarde si elles appellent le même petit fichier.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Ton adresse de page ne désigne pas un fichier unique

Je pars d'un produit précis dans l'administration et je relève le modèle de thème qui lui est attribué. Dans l'éditeur visuel du thème que je veux examiner, je sélectionne ensuite ce produit et ce modèle. Je clique sur la zone concernée pour identifier sa section. Le nom affiché est un indice ; il n'est pas forcément identique au nom du fichier.

J'ouvre le code de cette même copie du thème. Si le modèle est `product.json`, je regarde les entrées de `sections` et leur propriété `type`. Une valeur `main-product` renvoie par exemple à `sections/main-product.liquid`. Avec un modèle alternatif, le fichier pourrait être `product.affiches.json`. Ces noms illustrent la méthode : je ne te demande pas de créer ces fichiers s'ils n'existent pas. Je vérifie cette correspondance dans la documentation des modèles JSON.

Dans la section trouvée, je cherche une phrase distinctive, une classe CSS ou un appel `render`. Une classe CSS est un nom qui permet de cibler un élément pour son apparence. Si je vois un appel vers un autre fichier, je poursuis dans `snippets`. Dans un thème à blocs réutilisables, je suis aussi les références vers `blocks`. Je note ce chemin avant toute modification.

L'inspecteur du navigateur peut aider à identifier la classe d'un élément. Il montre le HTML produit, pas les instructions Liquid d'origine. Une adresse de page ne correspond donc pas forcément à un fichier unique. Si le texte est introuvable dans la section, je vérifie les traductions, les réglages, les données du produit ou le bloc d'une application.

Je termine cette recherche avec une preuve simple : je peux expliquer quel fichier affiche l'élément et quelle donnée l'alimente. Si tu ne peux pas encore le dire, ferme l'onglet de remplacement global et poursuis la recherche.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Un texte fixe peut apparaître sur tous tes produits

Je commence par l'éditeur visuel si le thème propose déjà le réglage. Ajouter une section existante ou déplacer un bloc n'exige pas de retoucher ses fichiers. Pour une information propre à chaque produit, comme le papier d'une affiche, je regarde les champs méta, aussi appelés metafields : ce sont des données personnalisées rattachées à un produit ou à une autre ressource.

Une source dynamique permet de relier un réglage compatible du thème à cette donnée. Concrètement, le bloc affiche le papier renseigné sur le produit consulté. Je privilégie cette liaison quand elle est disponible : tu peux ensuite corriger l'information dans la fiche produit sans retourner dans le code. Le type du champ et celui du réglage doivent être compatibles. Shopify détaille les sources dynamiques et leurs compatibilités.

Un bloc Liquid personnalisé peut convenir à un petit affichage local, si ton thème en propose un. Mais un texte fixe ajouté au modèle produit standard peut se retrouver sur tous les produits qui utilisent ce modèle. Je choisis un modèle alternatif pour une présentation réservée à une famille, ou une donnée produit et une condition pour une information variable.

Dans Inspired, Marty Cagan insiste sur l'utilité du produit pour ses clients. Je m'appuie sur l'introduction de l'édition SVPG Press, reproduite dans les extraits de ma bibliothèque : la qualité technique ne suffit pas si personne ne veut ce qui a été construit. Pour ta boutique, je pose donc cette question avant de créer une animation : afficher les dimensions répondrait-il déjà à l'hésitation du client ?

Dans Digital Marketing For Dummies, Ryan Deiss consacre un passage aux erreurs de mesure, dans le chapitre sur les erreurs courantes du marketing numérique. Je retiens ce repère pour ta fiche : choisis l'action à observer avant la retouche. Rendre la matière visible doit aider le client à décider ; le nombre de lignes Liquid écrites ne te dit rien sur ce résultat. Ce passage est repérable dans le sommaire fourni avec les extraits de ma bibliothèque.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Ton premier essai reste dans une copie

Je te propose un premier essai volontairement limité : afficher le titre du produit dans un bloc Liquid personnalisé d'une copie de thème. Le code est `<p>{{ product.title | escape }}</p>`. Fais l'essai dans un contexte de fiche produit et utilise un produit réellement sélectionné dans l'aperçu. Si le thème n'a pas ce bloc, ne remplace pas une section entière pour le reproduire. Pour cet exercice, prends un thème gratuit ou un thème déjà acheté : Shopify précise que le code d'un thème payant en période d'essai n'est pas modifiable avant achat, même si tu peux essayer ses réglages dans l'éditeur visuel. Je vérifie cette limite dans l'aide officielle sur les thèmes en essai, répertoriée dans les sources.

Je duplique le thème avant l'essai et je donne à la copie un nom qui décrit le changement. Ensuite je note l'emplacement ajouté. L'exemple chiffré plus bas te montre comment comparer le résultat sur des produits fictifs. Il sert à comprendre le remplacement de la donnée, pas à annoncer des résultats commerciaux. Je suis la procédure de duplication avant cet essai.

Je vérifie une fiche avec un titre court, une autre avec un titre long, puis un écran étroit. Je contrôle aussi les variantes et l'ajout au panier si j'ai touché leur voisinage. Le bon résultat, c'est un élément lisible qui affiche la bonne donnée sans dégrader les éléments autour. Une syntaxe acceptée ne suffit pas à prouver ça.

Dans The Lean Startup, Eric Ries présente le produit minimum viable : une version limitée qui sert à apprendre avant de perfectionner. Je reste ici sur ce principe, sans en faire une recette de publication précipitée pour ta boutique. Ton premier test de thème reste dans l'aperçu : tu peux déjà apprendre si ton titre déborde sans exposer les visiteurs à la modification.

Avant publication, je retire le bloc d'essai s'il répète simplement le titre déjà présent. Je conserve une note du fichier ou du réglage modifié et du résultat des vérifications. Lors d'une mise à jour de thème, cette note t'aidera à décider quoi réintégrer au lieu de recopier toute une ancienne version.

L’IA doit partir des fichiers que tu lui donnes

Je travaille avec des agents IA, mais je veux une demande vérifiable. Pour ton thème, donne le nom du thème, le modèle utilisé, la section concernée et le comportement attendu. Ajoute le code utile en retirant les informations sensibles. Demande d'abord une explication du chemin suivi, puis une proposition de modification limitée.

Tu peux écrire : « Voici la section de ma copie de thème. Explique quelle partie affiche le titre. Propose le changement minimal pour ajouter un texte issu du produit, précise les fichiers concernés et les cas à vérifier. Ne modifie pas le thème publié. » Ce cadre t'aide à repérer une réponse qui invente un fichier ou ignore le contexte.

Je ne donnerais pas une clé d'accès à l'administration pour une simple explication Liquid. Lire une donnée dans le thème et modifier le catalogue via une API sont des tâches différentes. Une API est une interface permettant à un logiciel d'agir sur un autre. Si tu veux changer les produits en masse, ce sera un autre chantier que l'affichage de leur titre.

Pour la suite, je regroupe les sujets dans ma rubrique Shopify technique. Ton prochain exercice peut être très concret : retrouver l'affichage d'une carte produit et relever les pages qui la réutilisent, avant de demander à une IA de la modifier.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)

Avant de fermer, garde une trace de ton essai

Je te laisse ce parcours à côté de ton aperçu. À chaque défaut visible, reviens au changement concerné dans la copie, puis rejoue les contrôles autour de cet élément.

Avant de fermer ton essai, note le produit utilisé, le fichier touché et ce que tu as vérifié. Tu pourras reprendre exactement au même endroit sans relire tout le guide.

Télécharger en PNGÉpingler sur PinterestReprendre ce schéma (code avec source)