Cherche « Liquid Shopify » en français et tu tombes sur des tutos vidéo ou sur de la doc anglaise passée à la moulinette d'un traducteur automatique. Voilà une version écrite, en français, avec du code qui tourne vraiment.
Ce guide s'adresse à qui met les mains dedans, et il reste lisible si tu es marchand et que tu veux comprendre ce que ton développeur touche quand il ouvre ton thème.
d'où vient Liquid
Liquid est un langage de template créé par Shopify, écrit en Ruby, et publié en open source. Il tourne côté serveur : Shopify prend tes fichiers .liquid, remplace les variables par les données réelles de ta boutique, et envoie du HTML au navigateur.
Pourquoi un langage maison plutôt que du PHP ou du Ruby directement ? Parce que des millions de boutiques partagent la même infrastructure. Liquid est volontairement bridé : aucun accès au système de fichiers, aucun appel réseau, aucune boucle infinie possible. Un thème mal écrit ralentit sa propre boutique et rien d'autre.
l'anatomie d'un thème
Un thème Shopify a une structure de dossiers imposée. 8 répertoires, chacun avec un rôle précis.
layout/ contient le squelette HTML. Le fichier theme.liquid est obligatoire, sans lui le thème refuse de s'installer. C'est lui qui porte les balises html et head, et surtout les 2 emplacements que tu ne supprimes jamais, content_for_header et content_for_layout.
templates/ a un fichier par type de page : produit, collection, page, article, panier, accueil, 404. Depuis Online Store 2.0, ce sont des fichiers JSON qui listent simplement les sections à afficher.
sections/ contient les blocs que le marchand réordonne dans l'éditeur de thème. Chaque section mélange du Liquid et un {% schema %} en JSON qui déclare ses réglages.
blocks/ est arrivé plus récemment. Ce sont des blocs réutilisables entre plusieurs sections, imbriquables jusqu'à 8 niveaux de profondeur.
snippets/ regroupe les morceaux de code réutilisables, appelés avec {% render %}. assets/ porte le CSS, le JS et les images du thème. config/ stocke les réglages globaux. locales/ contient les traductions.
La règle mentale qui suffit au quotidien : le layout enveloppe le template, le template appelle des sections, la section appelle des blocks et des snippets.
la syntaxe en 3 briques
Liquid tient en 3 constructions. Une fois que tu les as, tu lis n'importe quel thème.
Les objets affichent une valeur, entre doubles accolades.
{{ product.title }}
{{ product.price }}
{{ shop.name }}Les tags portent la logique, entre accolade et pourcent. Ils n'affichent rien par eux-mêmes.
{% if product.available %}
<button type="submit" name="add">Ajouter au panier</button>
{% else %}
<p>Rupture de stock</p>
{% endif %}
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
{% assign prix_barre = product.compare_at_price %}Les filtres transforment une valeur. Une barre verticale, et ils s'enchaînent de gauche à droite.
{{ product.description | strip_html | truncate: 160 }}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{{ 'products.product.add_to_cart' | t }}
{{ product.title | handleize }}Le filtre money mérite une note. Shopify stocke les prix en centimes, donc {{ product.price }} affiche 2990 et {{ product.price | money }} affiche 29,90 €, au format défini dans tes réglages de boutique.
Quand tu enchaînes plusieurs instructions, le tag {% liquid %} évite de répéter les délimiteurs partout.
{% liquid
assign remise = product.compare_at_price | minus: product.price
assign pourcentage = remise | times: 100 | divided_by: product.compare_at_price
if pourcentage > 0
echo pourcentage | append: '% de remise'
endif
%}les objets que tu manipules tout le temps
product te donne product.title, product.price, product.available, product.variants, product.featured_image, product.metafields. C'est l'objet le plus riche du lot.
collection te donne collection.title, collection.products, collection.all_products_count, et la liste des filtres actifs.
cart te donne cart.items, cart.item_count, cart.total_price. Utile pour la barre de livraison gratuite et le mini-panier.
shop te donne shop.name, shop.url, shop.email, shop.money_format.
customer vaut nil quand le visiteur n'est pas connecté, donc teste toujours son existence avant de l'afficher.
routes est celui que les débutants ignorent, et il évite un bug classique. Écris {{ routes.cart_url }} plutôt que /cart en dur : le jour où tu ajoutes une deuxième langue ou un marché avec préfixe d'URL, tes liens continuent de fonctionner.
Un mot sur la portée. L'objet product n'existe que sur un template produit, ou dans une section qui le reçoit explicitement. Sur la page d'accueil, {{ product.title }} sort une chaîne vide, sans la moindre erreur. Ce silence est derrière une bonne part des « ça marche pas et je comprends pas pourquoi ».
ce que Liquid ne sait pas faire
Liquid s'exécute une seule fois, au moment où Shopify fabrique la page. Ensuite il a disparu. Le navigateur reçoit du HTML fini.
Un clic sur « ajouter au panier » sort donc du domaine de Liquid. Ça passe par l'API Ajax du panier en JavaScript (/cart/add.js, /cart.js, /cart/change.js), puis par l'API de rendu de sections (le paramètre ?sections=) pour récupérer le HTML à jour du mini-panier sans recharger la page. C'est exactement ce que font les thèmes modernes derrière leur drawer de panier.
Même logique pour le filtrage de collection en direct, les compteurs qui bougent et les onglets. Liquid pose la structure, le JavaScript la fait vivre.
Trois autres limites à connaître. Liquid ne peut appeler aucune API externe, rien ne sort de la page. Liquid lit les données de la boutique et n'en écrit jamais, les modifications passent par l'API Admin ou par une app. Et les boucles sont plafonnées : collection.products renvoie 50 produits par défaut, et il faut envelopper la boucle dans {% paginate %} pour aller plus loin, avec un maximum de 250 par page.
les erreurs qui reviennent à chaque audit
Modifier le thème publié en direct. Duplique-le, travaille sur la copie, publie ensuite. Sur un projet sérieux, passe par Shopify CLI et Git.
Utiliser {% include %} au lieu de {% render %}. include partage les variables du fichier appelant, ce qui produit des effets de bord invisibles jusqu'au jour où ils cassent quelque chose. render isole la portée. Shopify a déprécié include, et il reste pourtant dans des thèmes vendus aujourd'hui.
Oublier le filtre money. Ton prix s'affiche 2990 et le client se demande ce qu'il se passe.
Diviser deux entiers. {{ 1 | divided_by: 3 }} renvoie 0, parce que Liquid fait une division entière. Multiplie par 100 avant de diviser, ou force un flottant avec times: 1.0.
Écrire le texte en dur dans le thème. Ça tient jusqu'au jour où tu ajoutes une langue. Les chaînes vivent dans locales/ et s'appellent avec le filtre t.
Boucler sur collections.all.products en page d'accueil. Le rendu s'écroule sur un gros catalogue, et ça se voit dans les Core Web Vitals. Le sujet rejoint mon guide sur la vitesse d'une boutique Shopify.
Supprimer content_for_header du layout parce qu'il « ne sert à rien ». Il porte les scripts Shopify, l'analytics et une partie des apps. Sans lui, la moitié de ta boutique arrête de remonter des données.
Confondre les deux délimiteurs. Un {% product.title %} n'affiche rien et ne lève aucune erreur. Tu cherches pendant 20 minutes avant de voir le pourcent.
par où attaquer
Duplique ton thème, ouvre sections/main-product.liquid, change une chaîne de texte, prévisualise. Tu comprendras la boucle template, section, snippet en une demi-heure.
Ensuite installe Shopify CLI et lance shopify theme dev pour travailler en local avec rechargement à chaud. La référence complète des objets, tags et filtres est sur shopify.dev, en anglais, et elle est exhaustive.
Si ton thème est devenu illisible à force d'apps installées et de bouts de code ajoutés par 4 prestataires successifs, c'est le genre de chose que je démêle dans un audit. Je lis le Liquid, je te dis ce qui ralentit, ce qui est mort, et ce qui va casser à la prochaine mise à jour.
