Liquid Shopify : Le tutoriel sans détours pour les débutants qui veulent vraiment customiser

Tu ouvres le code source de ton thème Shopify pour la première fois. Tu vois des {% for %}, des {{ product.title }}, des | money un peu partout. Et tu refermes l'onglet deux minutes plus tard.

C'est le point de départ de 90 % des marchands qui veulent customiser leur boutique sans dépendre d'un dev à chaque micro-modification. Liquid Shopify n'est pas un langage de programmation classique. C'est un langage de template conçu pour que des non-devs puissent manipuler des données e-commerce sans écrire du Python ou du PHP. Mais mal abordé, il donne l'impression d'être devant une langue étrangère.

Ce tutoriel te donne les vrais fondamentaux, dans l'ordre où ils servent. Pas de théorie académique sur les langages de template, pas de détails sur des objets Liquid que tu n'utiliseras jamais en tant que marchand. On va du concret vers le concret : tu comprends la logique, tu l'appliques sur ta boutique, tu sais ce que tu peux faire seul et quand passer la main.

Pourquoi apprendre Liquid quand on débute sur Shopify

Shopify est pensé pour être utilisé sans code. Les applications, les sections drag-and-drop, les presets de thèmes font un boulot correct pour démarrer. Mais dès que tu veux quelque chose de spécifique, tu touches aux limites du no-code très vite.

Afficher un badge "Meilleure vente" uniquement sur les produits au-dessus de 50€, cacher un bloc si le stock est inférieur à 5 unités, personnaliser l'affichage d'un méta-champ produit : aucun de ces cas ne se résout proprement avec le seul éditeur visuel. Liquid est le chaînon manquant entre "je clique sur des boutons" et "j'appelle un dev pour tout".

Ce que tu peux faire avec Liquid (et ce que tu ne peux pas)

Liquid génère du HTML côté serveur. Concrètement, il récupère les données de Shopify (produits, collections, client, panier, articles de blog) et les insère dans ta mise en page au moment du chargement de la page.

Ce que tu peux faire avec Liquid :

• Afficher des données produit (titre, prix, images, variantes, méta-champs)
• Conditionner l'affichage selon le type de page, le prix, le stock, les tags
• Itérer sur des collections de produits ou des listes d'articles
• Formater des données (prix en devise locale, dates, texte en majuscules)
• Créer des sections réutilisables avec des paramètres configurables depuis l'admin

Ce que Liquid ne peut pas faire :

• Modifier le DOM après le chargement de la page (c'est JavaScript)
• Gérer un panier AJAX, des animations, des interactions temps réel
• Faire des appels API externes directement depuis le template
• Traiter des données soumises par formulaire en dehors de l'écosystème Shopify

Liquid vs no-code : quand ça vaut le coup

La vraie question n'est pas "est-ce que je dois apprendre Liquid ?" mais "est-ce que mon besoin justifie d'apprendre Liquid ?".

Besoin	No-code suffisant ?	Liquid nécessaire ?
Changer couleurs et polices	Oui	Non
Réorganiser les sections d'une page	Oui	Non
Afficher un badge conditionnel sur les produits	Partiellement (apps)	Oui (plus propre)
Personnaliser une fiche produit avec méta-champs	Non	Oui
Créer une section réutilisable configurable	Non	Oui
Panier slide-out avec animation	Via app	Non (JavaScript)
Filtres de collection dynamiques	Natif Shopify	Pour customiser l'affichage

Si tu te retrouves régulièrement dans la colonne "Liquid nécessaire", apprendre les bases te fait économiser du budget dev sur des modifications récurrentes. Si tes besoins restent dans la colonne no-code, pas besoin d'aller plus loin que l'éditeur visuel.

Les bases : la syntaxe Liquid en 10 minutes

Liquid utilise deux types de délimiteurs. C'est tout ce qu'il faut retenir pour commencer.

• {{ }} : les doubles accolades affichent une valeur
• {% %} : les accolades avec pourcentage exécutent une instruction (condition, boucle, assignation)

Variables, tags et filtres : la trinité du code

Les variables sont les données disponibles dans le contexte de ta page. Sur une page produit, tu as accès à product. Sur une page collection, à collection. Sur une page panier, à cart. Pour afficher le titre d'un produit :

{{ product.title }}

Les tags sont les instructions de logique. Ils ne produisent rien d'affiché par eux-mêmes, ils contrôlent ce qui s'affiche. Exemples : {% if %}, {% for %}, {% assign %}, {% render %}.

Les filtres transforment une valeur avant qu'elle soit affichée. Ils se placent après une variable avec un pipe | :

{{ product.price | money }}
{{ product.title | upcase }}
{{ product.description | truncate: 100 }}

Le filtre money formate le prix brut Shopify (en centimes) dans la devise et le format de ta boutique. Sans ce filtre, {{ product.price }} affiche 2900 au lieu de 29,00 €.

Tes premiers tests avec Shopify Theme Editor

Avant de toucher quoi que ce soit en live, tu travailles sur une copie du thème. Dans ton admin Shopify, va dans "Boutique en ligne" puis "Thèmes". Duplique ton thème actif. Tu travailles toujours sur la copie.

Pour accéder au code, clique sur "Actions" puis "Modifier le code" sur la copie. Tu arrives dans l'éditeur de code Shopify. La structure de fichiers ressemble à ça :

• layout/ : le gabarit global (header, footer, balises HTML communes)
• templates/ : les templates par type de page (product, collection, index, etc.)
• sections/ : les blocs réutilisables avec leur schéma de configuration
• snippets/ : les petits morceaux de code réutilisables
• assets/ : CSS, JS, images statiques

Pour tester du Liquid sans risque, ouvre une section existante sur ta copie de thème, modifie-la, sauvegarde, et prévisualise. Tu ne casses rien sur ta boutique active.

Les conditions : afficher ou masquer du contenu

La logique conditionnelle est probablement le cas d'usage Liquid le plus fréquent pour un marchand. Afficher un message selon le stock, changer l'affichage selon le type de client, adapter le contenu selon le prix : tout ça, c'est du conditionnel.

If, elsif, else : la logique simple qui scale

La syntaxe est proche de l'anglais ordinaire, ce qui aide :

{% if product.available %}
  <button>Ajouter au panier</button>
{% elsif product.variants.first.inventory_quantity > 0 %}
  <button>Dernières unités</button>
{% else %}
  <p>Rupture de stock</p>
{% endif %}

Les opérateurs disponibles : ==, !=, >, <, >=, <=, contains. Tu peux combiner des conditions avec and et or.

Un point important : unless existe et représente le contraire de if. Plus lisible quand tu veux exprimer une négation :

{% unless customer %}
  <p>Connecte-toi pour voir les prix.</p>
{% endunless %}

Cas d'usage réel : afficher un badge selon le prix

Tu veux afficher un badge "Premium" sur les produits au-dessus de 100€. Shopify stocke les prix en centimes, donc 100€ = 10000 en valeur brute :

{% if product.price >= 10000 %}
  <span class="badge badge-premium">Premium</span>
{% endif %}

Tu peux affiner selon les tags produit :

{% if product.tags contains 'nouveaute' %}
  <span class="badge badge-new">Nouveau</span>
{% endif %}

Ces deux blocs placés dans ta section de fiche produit ou dans une card de collection font exactement ce qu'une app à 9,99€/mois fait. Sans la latence au chargement, sans markup externe, sans abonnement.

Les boucles : répéter sans copier-coller

Dès que tu as une liste de données à afficher, tu utilises une boucle. Produits d'une collection, articles du blog, variantes d'un produit, items du panier : tout ce qui est une liste en Shopify se parcourt avec {% for %}.

For et forloop : itérer sur tes produits, collections, articles

Afficher les 4 premiers produits d'une collection :

{% for product in collection.products limit: 4 %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}">
    <p>{{ product.title }}</p>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

L'objet forloop est disponible à l'intérieur de chaque boucle et donne accès à des métadonnées sur l'itération en cours :

• forloop.index : position actuelle (commence à 1)
• forloop.index0 : position actuelle (commence à 0)
• forloop.first : true si c'est le premier élément
• forloop.last : true si c'est le dernier
• forloop.length : nombre total d'éléments

Exemple concret : ajouter une classe CSS différente sur le premier produit :

{% for product in collection.products %}
  <div class="product-card {% if forloop.first %}product-card--featured{% endif %}">
    {{ product.title }}
  </div>
{% endfor %}

Break et continue : contrôler le flux

{% break %} sort de la boucle immédiatement. {% continue %} passe à l'itération suivante sans exécuter le reste du bloc.

Cas d'usage : afficher uniquement les produits en stock :

{% for product in collection.products %}
  {% unless product.available %}
    {% continue %}
  {% endunless %}
  <div class="product-card">{{ product.title }}</div>
{% endfor %}

Tu évites les produits en rupture sans conditionner tout le contenu du bloc dans un if. C'est plus lisible, surtout quand le bloc produit est long.

Manipuler les strings et les nombres avec les filtres

Les filtres sont le couteau suisse de Liquid. Ils transforment des données brutes en affichage propre, sans JavaScript, sans traitement côté client.

Les filtres qu'on utilise vraiment : upcase, downcase, size, default

Voici les filtres les plus utiles dans un contexte e-commerce concret :

Filtre	Usage	Exemple	Résultat
money	Formater un prix	{{ product.price | money }}	29,00 €
upcase	Mettre en majuscules	{{ product.title | upcase }}	MON PRODUIT
truncate	Tronquer à N caractères	{{ product.description | truncate: 80 }}	80 chars max...
size	Compter items ou caractères	{{ collection.products | size }}	24
default	Valeur fallback si vide	{{ product.vendor | default: 'Marque inconnue' }}	Marque inconnue
strip_html	Retirer les balises HTML	{{ product.description | strip_html }}	Texte brut
replace	Remplacer une sous-chaîne	{{ product.title | replace: 'v2', 'version 2' }}	Produit version 2

Combiner les filtres pour faire du vrai boulot

Les filtres se chaînent. Tu appliques plusieurs transformations successives sur la même valeur :

{{ product.description | strip_html | truncate: 150 | upcase }}

Cela retire d'abord le HTML, tronque à 150 caractères, puis met tout en majuscules. L'ordre des filtres est important : il est appliqué de gauche à droite.

Autre exemple utile : afficher un prix barré et un prix remisé proprement :

{% if product.compare_at_price > product.price %}
  <s>{{ product.compare_at_price | money }}</s>
  <strong>{{ product.price | money }}</strong>
{% else %}
  <span>{{ product.price | money }}</span>
{% endif %}

Pas d'app de gestion des prix barrés. Pas d'abonnement. C'est natif, c'est propre, c'est rapide.

Intégrer Liquid dans tes sections et snippets

Comprendre la syntaxe, c'est la moitié du chemin. L'autre moitié, c'est savoir où mettre ton code dans la structure d'un thème Shopify moderne (Online Store 2.0).

Structure d'une section Shopify : schema et code

Une section est un fichier .liquid dans le dossier sections/. Elle contient deux parties : le code HTML/Liquid de rendu, et un bloc {% schema %} JSON qui définit les paramètres configurables depuis l'éditeur visuel.

<div class="promo-banner" style="background-color: {{ section.settings.bg_color }}">
  <p>{{ section.settings.message }}</p>
</div>

{% schema %}
{
  "name": "Bannière promo",
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Message",
      "default": "Livraison offerte dès 50€"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Couleur de fond",
      "default": "#F5F5F5"
    }
  ]
}
{% endschema %}

Le schéma rend la section configurable par n'importe qui depuis l'éditeur thème. Tu codes une fois, ton équipe marketing modifie le texte sans jamais toucher au code.

Les snippets : réutiliser du code proprement

Les snippets sont des fragments de code dans le dossier snippets/. Ils ne contiennent pas de schéma. On les appelle avec {% render 'nom-du-snippet' %}.

Exemple : tu crées snippets/product-badge.liquid avec le code de badge conditionnel vu plus haut. Ensuite, tu l'appelles dans ta section fiche produit ET dans ta section de grille collection :

{% render 'product-badge', product: product %}

Tu passes la variable product en paramètre pour que le snippet ait accès aux données du produit en cours. Une modification dans le snippet se répercute partout où il est utilisé. C'est la base d'un thème maintenable.

5 erreurs classiques et comment les éviter

Ces erreurs reviennent sur chaque boutique où quelqu'un a appris Liquid en autodidacte sans avoir quelqu'un pour corriger le tir.

1. Oublier le filtre money sur les prix
{{ product.price }} affiche une valeur entière en centimes. {{ product.price | money }} affiche 29,00 €. Sans le filtre, tu affiches des prix incompréhensibles pour tes clients.

2. Modifier le thème actif directement
Toujours travailler sur une copie dupliquée. Une erreur de syntaxe Liquid peut casser l'affichage d'une page entière. Shopify n'a pas de CTRL+Z sur les modifications de code sauvegardées.

3. Confondre product et all_products
product est disponible sur la page produit uniquement. all_products['handle'] fonctionne partout mais est limité à 20 produits par page et impacte les performances. Pour accéder à un produit depuis une autre page, utilise plutôt une section avec type: product dans le schéma.

4. Utiliser {% include %} au lieu de {% render %}
Sur un thème OS 2.0, include est déprécié. Il pollue le scope de variables global. Passe à render partout.

5. Oublier les balises de fermeture
Chaque {% if %} veut son {% endif %}. Chaque {% for %} veut son {% endfor %}. Chaque {% unless %} veut son {% endunless %}. Shopify affiche une erreur en prévisualisation si tu oublies une fermeture, mais pas toujours de façon explicite. Quand la page plante sans raison apparente, vérifie d'abord les fermetures de tags.

Quand arrêter Liquid et passer à JavaScript (ou un développeur)

Liquid a une limite structurelle : il est rendu côté serveur, au moment de la génération de la page. Dès que tu as besoin de quelque chose qui réagit à une action utilisateur sans rechargement de page, tu sors du périmètre Liquid.

Quelques signaux clairs que Liquid ne suffit plus :

• Tu veux mettre à jour le mini-panier sans recharger la page (AJAX)
• Tu veux filtrer des produits côté client sans rechargement
• Tu veux une galerie d'images avec transition animée
• Tu veux récupérer des données depuis une API externe au moment du clic
• Tu veux modifier l'affichage selon les choix de variante sans rechargement

Ces cas relèvent du JavaScript, souvent en combinaison avec l'API Storefront de Shopify ou l'API AJAX du panier. Liquid prépare le HTML initial, JavaScript gère les interactions dynamiques. Les deux coexistent dans le même fichier de section.

Si tu passes plus de 4 heures à chercher comment faire quelque chose en Liquid que Liquid n'est pas censé faire, c'est du temps perdu. Connaître la frontière te fait économiser plus que connaître la syntaxe.

La question n'est pas "est-ce que je suis capable d'apprendre JavaScript ?" mais "est-ce que ça vaut mon temps d'apprendre JavaScript pour cette modification spécifique ?". Pour la plupart des marchands e-commerce, la réponse est non. C'est là qu'notre équipe d'experts Shopify intervient : pas pour faire à ta place ce que tu peux faire seul, mais pour traiter ce qui sort de ton périmètre sans te faire perdre des semaines.

Foire aux questions

Questions fréquentes

Comment apprendre Liquid sans être dev et sans suivre un tuto de 2h trop complexe ?

Commence par un seul besoin concret sur ta boutique, pas par la documentation complète. Tu veux afficher un badge selon le prix ? Apprends les conditions. Tu veux lister tes produits manuellement ? Apprends les boucles. L'apprentissage par cas d'usage réel est 10 fois plus efficace que lire la spec de A à Z. La documentation officielle de Liquid sur shopify.dev est bien structurée et suffisante, sans avoir besoin d'un cours payant.

Quelle est la différence entre une variable, un tag et un filtre en Liquid ?

Une variable est une donnée que tu affiches avec {{ }}, comme {{ product.title }}. Un tag est une instruction logique que tu exécutes avec {% %}, comme {% if %} ou {% for %} : il ne produit rien d'affiché mais contrôle ce qui l'est. Un filtre transforme la valeur d'une variable avant affichage, via le pipe |, comme {{ product.price | money }}. Les trois se combinent dans le même code.

Comment afficher du contenu conditionnellement sur ma boutique Shopify ?

Utilise les tags {% if %}, {% elsif %} et {% else %}. Tu peux tester n'importe quelle propriété d'un objet Shopify : le prix, le stock, les tags du produit, le type de client, la page en cours. Par exemple, {% if product.available %} affiche le bouton d'achat seulement si le produit est en stock. Chaque bloc if doit se fermer avec {% endif %}.

Où est-ce que je teste mon code Liquid sans tout casser en live ?

Duplique ton thème actif depuis "Boutique en ligne" puis "Thèmes" dans ton admin Shopify, et travaille uniquement sur la copie. La copie n'est pas publiée : tu peux la prévisualiser sans que tes clients voient quoi que ce soit. Quand tout fonctionne, tu publies la copie et l'ancienne version devient ta sauvegarde. C'est la méthode la plus sûre, sans outil externe.

Liquid suffit-il pour customiser ma boutique ou je dois passer par du JavaScript ?

Liquid suffit pour tout ce qui est statique : affichage conditionnel, formatage de données, structure des pages, sections configurables. Dès que tu as besoin d'interactions dynamiques après le chargement (panier AJAX, filtres côté client, animations au clic), JavaScript prend le relais. La plupart des modifications de mise en page et d'affichage que les marchands veulent faire entrent dans le périmètre Liquid. JavaScript devient nécessaire pour l'expérience utilisateur interactive.

Est-ce qu'un accompagnement e-commerce complet inclut le support Liquid et thème Shopify ?

Ça dépend du niveau d'accompagnement. Dans le cadre d'un suivi complet, les modifications de thème liées à la stratégie SEO ou à la conversion font partie du scope. Pour des développements spécifiques plus lourds (sections custom complexes, intégrations JavaScript avancées), c'est traité au cas par cas. Le mieux est de démarrer par un audit SEO personnalisé pour scalabiliser ton store pour qu'on identifie ce qui relève du Liquid, du dev, ou de la stratégie pure.

Tu maîtrises la base, maintenant tu construis dessus

Liquid n'est pas difficile. Il est mal enseigné. La plupart des tutos te noient dans les objets disponibles avant que tu aies compris pourquoi tu en as besoin. La vraie progression, c'est : un besoin, une syntaxe, un test, une application. Tu répètes jusqu'à ce que le réflexe soit là.

Ce que tu as vu ici couvre 80 % des cas d'usage Liquid qu'un marchand rencontre réellement. Les conditions, les boucles, les filtres, les sections, les snippets. Le reste s'apprend en creusant un problème spécifique quand il se présente.

Et quand le problème dépasse Liquid, tu sais maintenant reconnaître le signal. Ça te fait gagner du temps et de l'argent.

Tu as compris les bases mais tu blocailles sur l'implémentation ? Réserve un audit avec Peii pour une analyse personnalisée de ta boutique et un plan d'action SEO concret : on regarde ensemble ce qui freine ta croissance, ce qui se règle avec du Liquid, et ce qui nécessite une approche différente.