En bref
Liquid est le langage de gabarit des thèmes Shopify : il s'exécute côté serveur et injecte vos données, produits, prix et stock, dans le HTML que voit le visiteur. Tout repose sur trois briques complémentaires, les objets qui affichent une donnée, les balises qui portent la logique et les filtres qui transforment le rendu. Ses usages simples, modifier un texte, appliquer un filtre ou poser une petite condition, restent à la portée d'un non-développeur, alors que les boucles lourdes, le panier et le checkout demandent un vrai spécialiste. Chez Stellar, nous pratiquons Liquid depuis 2018 avec un parti pris constant : partir d'un thème existant solide et réserver le sur-mesure aux personnalisations qui font vraiment gagner en conversion, plutôt que de tout recoder.
Sommaire
Shopify Liquid est le langage de gabarit (template) open source qui construit les thèmes de la plateforme. Son rôle tient en une phrase : il relie vos données de boutique (produits, collections, panier, client) au HTML affiché à l'écran, et décide quoi montrer, à qui et dans quel ordre. Sans Liquid, un thème Shopify ne serait qu'une page figée, incapable d'afficher le bon prix ou le bon stock en temps réel.
Chaque fois qu'un titre de produit, une pastille de promotion ou un compteur de stock se met à jour tout seul, c'est Liquid qui travaille en coulisses. Le comprendre, même sans devenir développeur, vous rend la main sur l'apparence et le comportement de votre boutique. Cette page vous en donne les bases concrètes, avec du code prêt à lire, puis vous aide à savoir où s'arrête le bricolage sain et où commence le travail de développeur.
Chez Stellar, nous pratiquons Liquid depuis nos débuts, en 2018. Notre parti pris après plus de 100 boutiques livrées : nous faisons du développement sur-mesure, mais nous partons presque toujours d'un thème existant solide plutôt que de tout recoder depuis une page blanche. Réécrire en Liquid une fonctionnalité déjà native d'un bon thème, c'est du budget client dépensé pour rien. Le sur-mesure a d'autant plus de valeur qu'il se concentre là où il change vraiment l'expérience et la conversion.
Liquid, c'est quoi au juste ?
Liquid est un langage de template : il ne calcule pas, il assemble. Shopify l'a créé en 2010, puis l'a rendu open source, si bien qu'on le retrouve aujourd'hui bien au-delà de l'e-commerce. Dans une boutique, il s'exécute côté serveur, avant que la page n'arrive dans le navigateur : le visiteur ne voit jamais le code Liquid, seulement son résultat en HTML.
C'est là toute la différence avec JavaScript, qui s'exécute lui dans le navigateur, une fois la page chargée. Liquid décide du contenu de la page (quel produit, quel prix, quelle disponibilité), JavaScript ajoute de l'interactivité par-dessus (un menu qui s'ouvre, un panier qui se met à jour sans recharger). Les deux se complètent, ils ne s'opposent pas.
En pratique, Liquid vous sert à trois choses :
- Afficher une donnée dynamique : le nom d'un produit, son prix, une image, le prénom du client connecté.
- Décider avec de la logique : montrer un bloc uniquement si le produit est en promotion, en stock ou taggé d'une certaine façon.
- Transformer l'affichage : formater un prix en euros, raccourcir une description, redimensionner une image à la volée.
Ces trois usages correspondent exactement aux trois briques du langage. Pour situer Liquid dans l'ensemble de l'écosystème, notre guide complet pour réussir sur Shopify replace les thèmes dans le contexte plus large de la plateforme.
Les 3 briques : objets, balises et filtres
Tout Liquid se résume à trois éléments de syntaxe. Les objets affichent des données, les balises portent la logique, les filtres modifient le rendu. Une fois ce trio compris, vous lisez 90 % des thèmes Shopify sans difficulté.
Les objets : afficher une donnée
Un objet se reconnaît à ses doubles accolades. Il désigne une donnée de la boutique et l'affiche telle quelle. C'est la brique la plus simple et la plus utilisée.
{{ product.title }}
{{ product.price | money }}
{{ collection.title }}
{{ customer.first_name }}
Ici, product, collection ou customer sont des objets fournis par Shopify selon le contexte de la page. Certaines données personnalisées passent par les metafields : nous détaillons leur affichage dans notre guide dédié aux metafields Shopify et leur affichage en Liquid.
Les balises : piloter la logique
Une balise se reconnaît à l'accolade suivie d'un pourcentage. Elle n'affiche rien par elle-même : elle décide. Condition, boucle, affectation de variable, c'est le cerveau du thème.
{% if product.available %}
En stock, expédié sous 48 h
{% else %}
Bientôt de retour
{% endif %}
{% for produit in collection.products %}
{{ produit.title }}
{% endfor %}
La condition if affiche un bloc seulement si une règle est vraie. La boucle for répète un bloc pour chaque élément d'une liste, par exemple chaque produit d'une collection. Ce sont les deux balises que vous croiserez le plus souvent.
Les filtres : transformer l'affichage
Un filtre se place après une barre verticale, à l'intérieur d'un objet. Il prend une valeur et la transforme avant l'affichage, sans toucher à la donnée d'origine. On peut les enchaîner.
{{ product.price | money }}
{{ product.title | upcase }}
{{ article.published_at | date: '%d/%m/%Y' }}
{{ product.description | strip_html | truncate: 120 }}
Sur la dernière ligne, deux filtres s'enchaînent : strip_html retire les balises HTML de la description, puis truncate la coupe à 120 caractères. C'est cette logique de chaîne qui rend les filtres si pratiques au quotidien.
Aide-mémoire : 15 filtres Liquid utiles
Voici les filtres que nos développeurs utilisent le plus, ceux qui couvrent la grande majorité des besoins d'une boutique. Gardez ce tableau sous la main quand vous ouvrez un fichier de thème.
| Filtre | Ce qu'il fait | Exemple |
|---|---|---|
| money | Formate un montant selon la devise de la boutique | {{ 1990 | money }} donne 19,90 € |
| money_without_trailing_zeros | Comme money, mais sans les centimes inutiles | {{ 2000 | money_without_trailing_zeros }} donne 20 € |
| date | Met une date au format voulu | {{ article.published_at | date: '%d/%m/%Y' }} |
| default | Affiche une valeur de repli si la donnée est vide | {{ product.title | default: 'Sans titre' }} |
| truncate | Coupe un texte à un nombre de caractères | {{ product.description | truncate: 120 }} |
| truncatewords | Coupe un texte à un nombre de mots | {{ product.description | truncatewords: 20 }} |
| strip_html | Retire toutes les balises HTML d'un texte | {{ product.description | strip_html }} |
| escape | Sécurise un texte affiché dans du HTML | {{ comment.author | escape }} |
| upcase / downcase | Passe un texte en majuscules ou minuscules | {{ product.vendor | upcase }} |
| capitalize | Met une majuscule au premier mot | {{ product.type | capitalize }} |
| image_url | Génère l'URL d'une image à la taille demandée | {{ product.featured_image | image_url: width: 600 }} |
| asset_url | Renvoie l'URL d'un fichier du thème | {{ 'logo.svg' | asset_url }} |
| size | Compte les éléments d'une liste ou d'un texte | {{ cart.items | size }} article(s) |
| plus / minus / times | Effectue un calcul simple | {{ product.price | times: 2 }} |
| handleize | Transforme un texte en identifiant d'URL propre | {{ 'Robe d\'été' | handleize }} donne robe-d-ete |
La liste complète et à jour vit dans la documentation officielle Liquid de Shopify, une référence à garder en favori.
Cas pratique : un badge Nouveau conditionnel
Rien ne vaut un exemple complet. Objectif : afficher une pastille Nouveau sur les fiches produit, sans app payante et sans surcharger le thème. Deux approches, de la plus simple à la plus automatique.
Approche 1, par tag. Vous ajoutez le tag nouveau aux produits concernés depuis l'admin, et le thème affiche la pastille en fonction. Simple, contrôlé à la main, idéal pour une mise en avant ponctuelle.
{% if product.tags contains 'nouveau' %}
<span class="badge badge--new">Nouveau</span>
{% endif %}
Approche 2, par date. La pastille apparaît automatiquement pour tout produit créé il y a moins de 14 jours, puis disparaît seule. Aucun tag à gérer, mais un peu plus de logique.
{% assign maintenant = 'now' | date: '%s' | plus: 0 %}
{% assign creation = product.created_at | date: '%s' | plus: 0 %}
{% assign age = maintenant | minus: creation %}
{% if age < 1209600 %}
<span class="badge badge--new">Nouveau</span>
{% endif %}
Dans le second bloc, on convertit l'instant présent et la date de création du produit en secondes, on calcule l'écart, puis on compare à 1 209 600 secondes, soit 14 jours. C'est exactement le type d'automatisation discrète qui fait gagner du temps sur la durée : personne n'a à penser à retirer le tag.
Le style de la pastille (couleur, position, arrondi) se gère ensuite en CSS dans le thème. C'est aussi à cette étape que le regard d'un développeur évite les pièges : une pastille mal placée qui casse la grille produit sur mobile, ou une boucle trop lourde sur une collection de plusieurs centaines de références.
Le faire soi-même ou appeler un développeur ?
La bonne nouvelle : une partie de Liquid est parfaitement accessible sans être développeur. La limite se situe là où une erreur peut casser l'affichage en production ou ralentir la boutique. Voici notre ligne de partage, celle que nous appliquons en interne.
| Vous pouvez le faire vous-même | Mieux vaut confier à un développeur |
|---|---|
| Modifier un texte ou un libellé dans un fichier de thème | Créer ou refondre une section entière avec ses paramètres |
| Ajouter un filtre simple (money, date, truncate) | Écrire des boucles sur de gros catalogues sans plomber la vitesse |
| Poser une condition if/else courte et testée en préproduction | Toucher au panier, au checkout ou aux templates JSON |
| Dupliquer un bloc existant qui fonctionne déjà | Intégrer une logique métier ou une app tierce en profondeur |
Notre règle de sécurité tient en un mot : dupliquez le thème avant toute intervention, et testez sur la copie. Un thème publié se modifie sans filet, et une accolade oubliée suffit à afficher une erreur à vos visiteurs.
Quand Liquid ne suffit plus, par exemple pour une boutique très riche en interface ou en performance, l'étape d'après est souvent une architecture découplée : nous l'expliquons dans notre guide sur le framework Hydrogen, l'alternative React à Liquid. Pour les personnalisations sur-mesure qui comptent vraiment, vous pouvez aussi vous appuyer sur notre équipe de développement Shopify : nous partons de votre thème actuel pour n'investir que là où le sur-mesure crée de la valeur.