Tôt ou tard, chaque propriétaire de boutique Shopify se pose la question : mon thème par défaut, c’est bien, mais comment ajouter vraiment quelque chose de personnel ? Comment afficher un badge custom, ajouter une ligne de texte conditionnelle, ou changer la façon dont les prix s’affichent ? La réponse réside dans Liquid, le langage de template de Shopify.
Liquid a une réputation de langue de programmation, donc réservée aux développeurs. C’est une méprise complète. Liquid est expressément conçu pour être simple, accessible aux non-codeurs, avec une syntaxe ultra lisible. Pas de parenthèses imbriquées, pas de boucles complexes, juste des variables, des conditions et des filtres.
Chez Propuls’Lead, nous avons vu des centaines de propriétaires d’e-commerce réaliser des modifications Liquid mineures — pas du tout difficiles — sans pour autant devenir développeurs. L’objectif de cet article : vous montrer les patterns Liquid les plus utiles, appliqués à des cas concrets que vous rencontrerez dans votre boutique Shopify. Propuls’Lead conseil les propriétaires e-commerce à identifier les limites de l’éditeur visuel et à s’approprier Liquid pour gagner en autonomie.
Comprendre l’architecture de base
Avant d’écrire une seule ligne de Liquid, il faut comprendre où on l’écrit. Shopify, c’est un système d’administration web (l’éditeur visuel que vous connaissez) plus un système de templates (Liquid). L’éditeur visuel génère le code Liquid automatiquement pour les sections et les blocs. Mais quand vous voulez modifier le code manuellement, où allez-vous ?
Allez dans `Admin Shopify` > `Paramètres du thème` > `Modifier le code`. Vous verrez le dossier `templates` (qui contient les pages : product.liquid, cart.liquid, etc.), le dossier `sections` (les modules du thème), et le dossier `snippets` (de petits morceaux réutilisables).
Les cas d’usage classiques : vous voulez modifier le fichier `product.liquid` pour changer l’affichage des prix, ou éditer une section `.liquid` pour ajouter un texte conditionnel. Vous ne allez jamais créer un fichier de zéro (ça, c’est du développement complet). Vous allez chercher le fichier existant et le modifier légèrement.
Les variables Liquid essentielles
En Liquid, une variable se note `{{ variable }}`. Shopify met à votre disposition des centaines de variables prédéfinies. Voici les plus utilisées :
`{{ product.title }}` affiche le titre du produit. `{{ product.price }}` affiche le prix en centimes (100 pour 1 euro). `{{ cart.total_price }}` affiche le total du panier. `{{ customer.email }}` donne l’email du client connecté. `{{ shop.name }}` affiche le nom de votre boutique.
Ce qui est magique, c’est que ces variables changent selon le contexte. Sur la page produit, `{{ product.title }}` sera le titre du produit en cours. Sur une autre page, la variable n’existe pas (elle restera vide). Shopify gère la logique ; vous, vous écrivez juste le code.
Exemple concret : vous voulez afficher un message spécifique pour les clients VIP. En haut de votre page, vous écrivez : « ` Bienvenue {{ customer.first_name }}, client depuis 3 ans ! « ` Shopify remplace `{{ customer.first_name }}` par le prénom réel si le client est connecté.
Filtres : transformer les données
Les filtres modifient la donnée. Syntaxe : `{{ variable | filtre }}`. Exemples :
`{{ product.price | money }}` : convertit le prix de centimes au format devise (100 devient « 1,00 € »). C’est un filtre essentiel. Sans filtre, les prix s’affichent en centimes (impossible à lire).
`{{ product.title | upcase }}` : affiche le titre en MAJUSCULES.
`{{ product.title | downcase }}` : tout en minuscules.
`{{ product.created_at | date: « %d/%m/%Y » }}` : formate la date de création du produit en français (01/03/2026).
Vous pouvez enchaîner les filtres : `{{ product.price | money | append: » TTC » }}` affiche « 1,00 € TTC ». Le premier filtre convertit le prix en devise, le second ajoute du texte.
Les filtres utiles en e-commerce : `money` (prix), `date` (dates), `append` / `prepend` (ajouter du texte), `capitalize` (majuscule au début), `size` (longueur d’un array), `first` (premier élément), `last` (dernier élément).
Conditions : la logique métier
Une condition s’écrit en Liquid comme ceci : « ` {% if condition %} Affiché si vrai {% else %} Affiché si faux {% endif %} « `
Cas d’usage : afficher un badge « Rupture de stock » seulement si le produit est épuisé. « ` {% if product.available == false %}
{% endif %} « `
Ou afficher un message spécial si le prix est réduit : « ` {% if product.compare_at_price > product.price %}
{% endif %} « `
Les conditions Shopify : `==` (égal), `!=` (différent), `>` (supérieur), `<` (inférieur), `>=` / `<=`, `and` (et), `or` (ou).
Cas avancé : afficher du contenu seulement pour les clients connectés. « ` {% if customer %} Bonjour {{ customer.first_name }} ! {% else %} Vous n’êtes pas connecté. Connectez-vous pour voir votre historique. {% endif %} « `
Boucles : itérer sur une collection
Une boucle parcourt une liste d’éléments. Syntaxe : « ` {% for item in collection %} {{ item.title }} {% endfor %} « `
Cas d’usage : afficher tous les produits d’une collection. « ` {% for product in collection.products %}
{{ product.title }}
{{ product.price | money }}
{% endfor %} « `
Ou les produits du panier : « ` {% for item in cart.items %}
{% endfor %} « `
Variable utile : `forloop.index` donne la position dans la boucle (1, 2, 3…). Utile pour numéroter. « ` {% for product in collection.products limit: 5 %}
{% endfor %} « ` Affiche : « 1) Produit A », « 2) Produit B », etc. Limitez à 5 produits avec `limit: 5`.
Cas d’usage réalistes
Afficher un badge de promo
Vous voulez une bannière « Solde – 20% off » quand le prix est réduit. C’est une des modifications Liquid les plus populaires pour augmenter le taux de conversion sur les fiches produits. « ` {% if product.compare_at_price > product.price %}
{% endif %} « `
Ici, `minus` est un filtre qui soustrait les deux prix. Résultat : « Économisez 0,20 € ».
Message personnalisé par client
« ` {% if customer.tags contains « VIP » %}
Merci pour votre fidélité, {{ customer.first_name }} !
{% elsif customer %}
Bienvenue {{ customer.first_name }} !
{% else %}
Créez un compte et profitez de 10% de remise.
{% endif %} « `
Ici, `tags` est un tableau. `contains` vérifie si la valeur est dedans. Les clients tagués « VIP » voient un message spécial.
Afficher des produits recommandés
« `
Produits similaires
« `
Cela affiche 4 produits de la collection, sauf le produit actuel (éviter l’auto-référence).
Où modifier le code sans risque
Pour un non-développeur, la zone sûre, c’est les snippets. Un snippet est un petit morceau de code réutilisable. Créez un nouveau snippet, testez-le, puis appelez-le depuis les templates.
Exemple : créez un snippet `promo-badge.liquid` contenant le code de badge promo ci-dessus. Puis dans `product.liquid`, au lieu d’insérer tout le code, écrivez simplement : « ` {% include ‘promo-badge’ %} « `
Avantage : si vous cassez le snippet, c’est isolé. Vous pouvez le rééditer sans affecter le reste du template.
Pièges courants et comment les éviter
Premier piège : les espaces et les variables. En Liquid, `{{ product.title }}` n’est pas pareil que `{{product.title}}` (sans espaces). Gardez les espaces.
Deuxième piège : utiliser `==` au lieu de `contains` pour vérifier si une chaîne est présente. `contains` cherche un texte dedans, `==` cherche une égalité exacte. Subtil.
Troisième piège : oublier que certaines variables n’existent que sur certaines pages. `{{ product.title }}` existe sur product.liquid, pas sur cart.liquid. Si vous le mettez au mauvais endroit, il sera vide.
Quatrième piège : modifier `product.liquid` sans sauvegarde. Toujours faire un copier-coller du fichier original avant de modifier.
Quand appeler un développeur Shopify
Liquid a des limites. Vous ne pouvez pas interroger la base de données directement, créer une API, ou gérer des fichiers externes. Dès que vous avez besoin de :
- Intégrer un système tiers (CRM, facturation, logistique)
- Créer une logique métier complexe (prix dynamiques selon région)
- Modifier le checkout Shopify (c’est ultra-protégé, développement spécifique)
- Créer une app Shopify (du code backend)
C’est le moment d’appeler un développeur. Chez Propuls’Lead, nous avons accompagné plus de 500 clients e-commerce à identifier ce moment critique. Beaucoup croient qu’il faut un développeur pour tout ; en réalité, 70 % des besoins peuvent être satisfaits avec Liquid.
Une étape préalable : assurez-vous d’avoir maîtrisé les fondamentaux d’une boutique Shopify. Par exemple, savoir configurer les notifications Shopify pour ne rater aucune commande ou créer vos pages essentielles Shopify est plus important que d’apprendre Liquid. Liquid doit amplifier votre boutique, pas la compenser pour une fondation fragile.
Les modifications Liquid simples (affichage conditionnel, badges, reformatage de données) sont sûres et utiles. Les modifications complexes (logique métier, intégration d’API) requièrent un développeur Shopify certifié.