À retenir

Liquid est le langage de templating de Shopify — il contrôle le contenu qui s’affiche en fonction des données de votre boutique.

Cas d’utilisation courants : afficher du contenu selon les tags produits, les tags clients, le contenu du panier, les metafields ou la date actuelle.

Syntaxe Liquid basique : {% if %}, {% unless %}, {% for %}, {{ variable | filter }}.

Ajoutez votre propre logique Liquid dans des fichiers de section ou des snippets via l’éditeur de code. Fudge peut d’ailleurs l’écrire pour vous.

Liquid, c’est ce qui rend Shopify dynamique. C’est le langage de templating qui relie les données de votre boutique (produits, collections, clients, panier) au HTML que voient vos visiteurs. Bien comprendre les bases de la logique de Liquid vous permet de créer du contenu conditionnel, des boucles et des affichages basés sur des données qui vont bien au-delà de ce que permet l’éditeur de thème classique.

Les bases de Liquid — ce qu’il faut savoir

Liquid repose sur deux types de balises (tags) :

Les balises de rendu {{ }} — affichent une valeur :

{{ product.title }}
{{ product.price | money }}
{{ customer.first_name }}

Les balises logiques {% %} — contrôlent le flux métier de la page, sans rien afficher directement :

{% if product.available %}
{% for item in cart.items %}
{% assign sale_price = product.price | times: 0.9 %}

Les filtres (filters) — transforment les valeurs affichées en utilisant le symbole | (pipe) :

{{ product.price | money }}
{{ product.description | strip_html | truncatewords: 30 }}
{{ 'base.css' | asset_url }}

Afficher du contenu selon les tags produits

Les tags (étiquettes) produits sont un moyen très flexible de marquer des produits avec des attributs pour ensuite afficher du contenu sous certaines conditions.

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

{% if product.tags contains 'sale' %}
  <span class="sale-badge">En promotion</span>
{% elsif product.tags contains 'clearance' %}
  <span class="clearance-badge">Déstockage</span>
{% else %}
  <!-- Aucun badge affiché -->
{% endif %}

Cas d’utilisation : badges pour les nouveautés, les articles en soldes, les éditions limitées ; afficher ou masquer des sections selon la catégorie de produit ; afficher des consignes d’entretien uniquement pour certains types de produits.

Afficher du contenu selon les tags clients

Les tags clients fonctionnent de la même manière — vous ajoutez un tag aux comptes clients directement dans Shopify (Clients → sélectionnez un client → Tags), puis vous affichez du contenu de façon conditionnelle.

{% if customer %}
  {% if customer.tags contains 'wholesale' %}
    <p>Prix revendeur : {{ product.price | times: 0.7 | money }}</p>
  {% else %}
    <p>{{ product.price | money }}</p>
  {% endif %}
{% else %}
  <p>{{ product.price | money }}</p>
{% endif %}

Cas d’utilisation : des prix différents pour les clients B2B vs particuliers, débloquer du contenu masqué pour des clients VIP, afficher un solde de points pour un programme de fidélité.

Afficher du contenu en fonction des metafields

Les metafields (champs méta) stockent des données personnalisées liées à des produits, des collections, des clients ou à votre boutique elle-même. Une fois créés (par l’interface d’administration de Shopify ou par une app tiers), vous pouvez les injecter en Liquid dans vos pages.

{% if product.metafields.custom.ingredients %}
  <div class="ingredients-section">
    <h2>Ingrédients</h2>
    {{ product.metafields.custom.ingredients.value }}
  </div>
{% endif %}

Créer des metafields : Paramètres → Données personnalisées → Produits → Ajouter une définition. Définissez l’espace de noms (le namespace, par ex. custom) et la clé (la key, par ex. ingredients).

Afficher du contenu selon le contenu du panier

Vous pouvez accéder aux variables du panier actuel depuis n’importe quel fichier de votre thème :

{% if cart.item_count == 0 %}
  <p>Votre panier est vide.</p>
{% endif %}

{% if cart.total_price >= 5000 %}
  <!-- Le panier s'élève à 50$ et+ (les prix Shopify sont en centimes) -->
  <p>Vous êtes éligible à la livraison gratuite !</p>
{% else %}
  {% assign remaining = 5000 | minus: cart.total_price %}
  <p>Ajoutez {{ remaining | money }} supplémentaires pour obtenir la livraison gratuite.</p>
{% endif %}

Note : Shopify stocke les prix en centimes (nombres entiers). 5000 = 50,00 $.

Afficher du contenu en fonction de la date

{% assign now = 'now' | date: '%s' | plus: 0 %}
{% assign sale_end = '2026-12-31' | date: '%s' | plus: 0 %}

{% if now < sale_end %}
  <div class="sale-banner">Les promos des fêtes s'achèvent le 31 décembre !</div>
{% endif %}

Le filtre date: '%s' convertit une date en timestamp Unix (en secondes depuis 1970), ce qui simplifie énormément les comparaisons de dates.

Les boucles (For loops) — itérer sur des collections ou des tableaux

{% for product in collection.products limit: 4 %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

Paramètres utiles :

limit: 4 — retourne uniquement 4 éléments
offset: 2 — ignore les 2 premiers éléments
reversed — exécute la boucle dans l’ordre inverse

Où rajouter sa propre logique Liquid

Fichiers de section (sections/your-section.liquid) — l’emplacement idéal pour la logique spécifique à une page donnée. Vos modifications impactent uniquement cette section.

Snippets (snippets/your-snippet.liquid) — des blocs de logique réutilisables qui peuvent être intégrés via la balise {% render 'your-snippet' %} dans plein de sections différentes.

theme.liquid — à réserver à la logique qui doit tourner sur 100 % des pages (comme la vérification d’un tag client impactant tout le comportement du site web). Utilisez cet emplacement avec parcimonie.

Travaillez toujours sur une copie (un duplicata) de votre thème, et testez bien après toute modification en Liquid — une erreur de syntaxe peut se traduire en une grande page blanche du côté des utilisateurs.

Ajoutez de la logique Liquid personnalisée en la décrivant tout simplement à Fudge.

Try Fudge for Free

Unless — l’exact opposé de if

{% unless %} est un raccourci très pratique pour dire “si ce n’est pas le cas” :

{% unless customer %}
  <a href="/account/login">Connectez-vous pour voir les prix membres</a>
{% endunless %}

C’est la même chose que d’écrire {% if customer == false %} mais c’est beaucoup plus lisible.

Assign et capture — créer vos propres variables

assign crée une simple variable :

{% assign discount_price = product.price | times: 0.8 %}
{{ discount_price | money }}

capture crée une variable à partir d’un ensemble de contenus et de balises (incluant à la fois du HTML et du Liquid) :

{% capture size_label %}
  {{ product.variants.first.option1 }} / {{ product.variants.first.option2 }}
{% endcapture %}
<span>{{ size_label }}</span>

Rajoutez de la logique Liquid à votre thème Shopify simplement en décrivant le résultat voulu.

Essayez Fudge gratuitement

See how Fudge edits themes

5.0

Comment ajouter de la logique Liquid personnalisée sur Shopify (2026)