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

À retenir

• Liquid est le langage de templating de Shopify — il contrôle le contenu affiché en fonction des données de votre boutique.
• Cas d’usage courants : afficher du contenu en fonction des tags de produits, des tags de clients, du contenu du panier, des méta-champs (metafields) ou de la date actuelle.
• Syntaxe Liquid de base : {% if %}, {% unless %}, {% for %}, {{ variable | filter }}.
• Ajoutez une logique Liquid personnalisée aux fichiers de section ou aux snippets dans l’éditeur de code. Fudge peut l’écrire pour vous.

Pour ajouter une logique Liquid personnalisée dans Shopify, ouvrez l’éditeur de code et ajoutez des balises {% if %}, {% unless %} ou {% for %} à un fichier de section ou à un snippet, en utilisant les données de la boutique comme les tags de produits, les tags de clients, les metafields, le panier ou la date. Liquid est le langage de templating de Shopify : il relie les produits, les collections, les clients et le panier de votre boutique au code HTML que voient vos visiteurs.

Les bases de Liquid — ce qu’il faut savoir

Liquid possède deux types de balises :

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

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

Les balises logiques {% %} — contrôlent le flux, elles ne s’affichent pas directement :

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

Les filtres — transforment les valeurs de sortie à l’aide du pipe | :

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

Afficher du contenu selon les tags produits

Les tags de produits offrent un moyen flexible de marquer des produits avec des attributs pour ensuite afficher du contenu sous condition.

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

{% if product.tags contains 'sale' %}
  <span class="sale-badge">On Sale</span>
{% elsif product.tags contains 'clearance' %}
  <span class="clearance-badge">Clearance</span>
{% else %}
  <!-- Aucun badge affiché -->
{% endif %}

Cas d’usage : badges pour les nouveautés, les articles en promotion, les éditions limitées ; masquer ou afficher des sections en fonction de la catégorie du produit ; afficher des instructions d’entretien uniquement pour des types de produits spécifiques.

Pour les étiquettes créées de cette manière, consultez Ajouter des étiquettes personnalisées sur les pages produits Shopify.

Afficher du contenu selon les tags clients

Les tags de clients fonctionnent de la même manière — vous taguez les comptes clients dans Shopify (Clients → sélectionner le client → Tags), puis vous affichez le contenu de manière conditionnelle.

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

Cela modifie le prix affiché, et non le prix facturé. Pour facturer des prix de gros, utilisez les catalogues Shopify B2B ou une réduction automatique pour les clients tagués.

Cas d’usage : des prix différents pour les clients B2B et les clients de détail, le déblocage de contenu masqué pour les clients VIP, l’affichage du solde de points de fidélité pour les membres.

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">Holiday sale ends December 31!</div>
{% endif %}

date: '%s' convertit une date en horodatage Unix (timestamp Unix, secondes depuis 1970), ce qui facilite les comparaisons de dates.

Shopify met les pages en cache, donc now correspond au moment où la page a été rendue, et non à celui où le visiteur la voit. Pour des limites de temps exactes, vérifiez la date en JavaScript.

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 — n’affiche que 4 éléments
• offset: 2 — ignore les 2 premiers éléments
• reversed — itère dans l’ordre inverse

Où rajouter sa propre logique Liquid

Les fichiers de section (sections/your-section.liquid) — le bon endroit pour une logique propre à une page. Les modifications sont limitées à cette section.

Les snippets (snippets/your-snippet.liquid) — une logique réutilisable qui peut être incluse via {% render 'your-snippet' %} dans plusieurs sections.

theme.liquid — pour la logique qui doit s’exécuter sur chaque page (comme les vérifications de tags de clients qui affectent le comportement de tout le site). À utiliser avec parcimonie.

Travaillez toujours sur un thème dupliqué et testez après toute modification Liquid — une erreur de syntaxe Liquid peut rendre toute votre page blanche.

Pour placer cette logique dans sa propre section, voir Créer une section personnalisée dans Shopify.

Unless — l’exact opposé de if

{% unless %} est un raccourci pour “if not” (si non) :

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

Équivalent à {% if customer == blank %} mais plus lisible.

Assign et capture — créer vos propres variables

assign crée une variable simple :

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

capture crée une variable à partir d’un bloc de contenu (pouvant inclure du HTML et du Liquid) :

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

FAQ