Liquid

Liquid (Langage de template Liquid)

Définition

Liquid est un langage de template open source, créé par Shopify, qui permet de générer dynamiquement le contenu d’une boutique en ligne. Concrètement, il fait le lien entre les données stockées dans l’administration Shopify (produits, collections, clients, commandes, stocks, promotions…) et le code HTML/CSS/JS qui s’affiche dans le navigateur du visiteur.

Un fichier Liquid est un mélange de :

- HTML statique (ce qui ne change pas),

- Objets {{ product.title }} (données dynamiques),

- Balises {% if %}, {% for %}, {% assign %} (logique de rendu),

- Filtres {{ price | money }} (transformation d’affichage).

Liquid n’est pas un langage de programmation complet : pas de boucle infinie, pas d’accès direct à la base de données, pas de fonctions personnalisées côté serveur. C’est un langage volontairement restreint pour garantir sécurité, performance et maintenabilité sur des milliers de boutiques.

Analogie

Imaginez un mannequin de vitrine dans une boutique physique.

- Le mannequin (le template Liquid) ne change pas de forme.

- Les vêtements (les données produit) changent chaque saison, chaque collection, chaque promotion.

- Le vitriniste (le moteur Liquid) habille le mannequin avec les bons vêtements au bon moment, selon les règles définies : « si le produit est en solde, mets une étiquette rouge », « si le stock est inférieur à 5, affiche “Dernières pièces” ».

En DTC/e-commerce, Liquid est donc le chef d’orchestre silencieux qui décide quoi montrer, à qui, et dans quel ordre — sans que le client final ne voie jamais une ligne de code.

Formule

Un rendu Liquid suit toujours la même logique :

Sortie finale = Template Liquid + Données Shopify + Contexte (URL, client, panier)

Exemple concret :

{% if product.available %}
  <p>{{ product.title }} — {{ product.price | money }}</p>
  {% if product.compare_at_price > product.price %}
    <span class="badge">-{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}%</span>
  {% endif %}
{% else %}
  <p>Produit épuisé</p>
{% endif %}

Ici :

- product.available → booléen vrai/faux,

- product.price | money → formate le prix selon la devise de la boutique,

- compare_at_price → prix barré,

- le calcul de remise utilise minus, times, divided_by.

Tableau comparatif

À retenir : Liquid ne remplace pas JavaScript. Il prépare le terrain. JS intervient ensuite pour le panier ajax, les filtres dynamiques, les upsells.

Applications concrètes en DTC / e-commerce

1. Pages produit personnalisées

Afficher un message différent selon le stock :

{% if product.variants.first.inventory_quantity < 10 %}Plus que {{ product.variants.first.inventory_quantity }} en stock{% endif %}

2. Collections dynamiques

Trier par best-seller, prix croissant, nouveautés :

{% assign sorted = collection.products | sort: 'price' %}

3. Panier et upsell

Proposer un produit complémentaire si le panier dépasse 80 € :

{% if cart.total_price > 8000 %} (Shopify travaille en centimes).

4. Emails transactionnels

Les notifications de commande, expédition, remboursement utilisent Liquid pour insérer le nom du client, le numéro de suivi, les articles.

5. Landing pages DTC

Créer des pages saisonnières (Black Friday, soldes d’été) sans toucher au thème principal, via des templates alternatifs (page.black-friday.liquid).

6. A/B testing basique

{% if customer.tags contains 'vip' %} → afficher une offre VIP à 15 % au lieu de 10 %.

Chiffres clés :

- Plus de 1,7 million de boutiques actives sur Shopify utilisent Liquid (2024).

- Un thème Shopify standard contient entre 40 et 120 fichiers Liquid.

- Le rendu Liquid moyen d’une page produit tourne autour de 80 à 150 ms côté serveur Shopify.

Erreurs fréquentes

1. Confondre {{ }} et {% %}

{{ }} affiche une valeur. {% %} exécute une logique. Mettre une condition dans {{ }} ne fonctionne pas.

2. Oublier les filtres de formatage

{{ product.price }} affiche 1999 au lieu de 19,99 €. Il faut {{ product.price | money }}.

3. Utiliser des variables non définies

Liquid ne plante pas, mais affiche du vide. Toujours vérifier avec {% if product %} avant d’accéder à product.title.

4. Boucles trop lourdes

{% for product in collections.all.products %} sur 5 000 produits ralentit la page. Limiter avec limit: 12.

5. Modifier directement le thème live

En DTC, une erreur Liquid peut casser le checkout. Toujours travailler sur un thème dupliqué (staging).

6. Croire que Liquid gère les paiements

Non. Liquid affiche. Le paiement est géré par Shopify Payments, Stripe, PayPal, etc.

7. Ignorer la cache

Liquid est mis en cache par Shopify. Un changement de prix peut prendre quelques minutes à apparaître si le cache n’est pas vidé.

Termes liés

- Shopify Theme : ensemble de fichiers Liquid, JSON, CSS, JS qui définissent l’apparence d’une boutique.

- Section : bloc Liquid réutilisable et éditable dans l’éditeur de thème.

- Snippet : fragment Liquid inclus via {% render 'nom-du-snippet' %}.

- Objet Liquid : structure de données Shopify (product, collection, cart, customer, order).

- Filtre Liquid : fonction de transformation (money, date, img_url, truncate).

- Balise Liquid : instruction logique (if, for, assign, capture, case).

- Metafield : champ personnalisé Shopify accessible en Liquid via product.metafields.

- JSON Template : nouveau format Shopify OS 2.0 qui remplace progressivement les templates Liquid statiques.

- Hydrogen / Oxygen : stack headless Shopify qui peut consommer Liquid via l’API Storefront, mais qui utilise React côté front.

En résumé pour les équipes DTC

Liquid est le langage natif de Shopify. Il ne se voit pas, mais il contrôle tout : prix, stocks, promotions, personnalisation client, emails, pages légales. Maîtriser Liquid, c’est pouvoir itérer vite sur des landing pages, des offres ciblées et des parcours d’achat sans dépendre d’un développeur externe à chaque changement.

Pour une marque DTC, la règle est simple : Liquid pour la structure et les données, JavaScript pour l’interaction, et toujours tester sur un thème staging avant de publier.