CMS & Plateformes

Shopify Liquid : guide complet du langage de templating Shopify en 2026

Publié le 7 May 2026 — 9 min de lecture

En bref

Maîtriser Liquid permet de personnaliser n'importe quel détail d'un thème Shopify. Guide complet 2026 : objets, tags, filtres, sections Online Store 2.0, métaobjets et pièges de performance.

Liquid est le langage de templating qui propulse l’intégralité de l’interface Shopify. Le maîtriser, c’est passer du statut d’utilisateur de thème acheté à celui d’opérateur capable de modifier finement n’importe quel détail de votre boutique. Ce guide couvre l’essentiel à connaître en 2026 : objets, tags, filtres, sections Online Store 2.0, métaobjets et pièges de performance.

Qu’est-ce que Liquid et pourquoi Shopify l’utilise ?

Liquid est un langage de templating open source créé par Shopify en 2006, écrit en Ruby. Il permet de générer du HTML dynamique à partir de données stockées côté serveur (produits, collections, panier, client) sans exposer la base de données ou la logique métier. Aujourd’hui Liquid est utilisé bien au-delà de Shopify (Jekyll, GitHub Pages, certaines applications Salesforce), mais c’est la plateforme e-commerce qui en a fait le standard du secteur.

Concrètement, lorsqu’un visiteur arrive sur une fiche produit Shopify, le serveur :

Récupère le produit, ses variantes, ses images et le panier en cours.
Évalue le template product.liquid en remplaçant les {{ ... }} par les vraies valeurs.
Renvoie le HTML final au navigateur.

Liquid est intentionnellement limité : pas d’accès au système de fichiers, pas d’exécution de code arbitraire, pas de connexions base de données directes. Cette restriction garantit la sécurité et la stabilité du multi-tenant Shopify, où des millions de boutiques cohabitent sur la même infrastructure.

Les 3 types d’éléments Liquid : objets, tags, filtres

Objets — délimités par `{{ }}`

Les objets affichent une donnée. {{ product.title }} affiche le titre du produit courant, {{ cart.item_count }} le nombre d’articles dans le panier.

Tags — délimités par `{% %}`

Les tags exécutent une logique sans rien afficher. {% if product.available %} ouvre une condition, {% for image in product.images %} démarre une boucle.

Filtres — appliqués avec `|`

Les filtres transforment une valeur. {{ product.price | money }} formate un prix en monnaie locale, {{ 'theme.css' | asset_url | stylesheet_tag }} génère une balise <link> vers le CSS du thème.

Toute la grammaire Liquid se réduit à ces trois primitives. Une fois la distinction objets / tags / filtres assimilée, lire un thème Shopify devient trivial.

Anatomie d’un thème Shopify Online Store 2.0

Depuis 2021, Shopify impose le format Online Store 2.0 (OS 2.0) qui structure un thème ainsi :

layout/ — gabarits globaux (theme.liquid contient <html>, <head> et la sortie principale).
templates/ — fichiers JSON ou Liquid pour chaque type de page (product.json, collection.json, page.json).
sections/ — blocs réutilisables et déplaçables depuis l’éditeur de thème (header, hero, featured-collection).
snippets/ — fragments inclus avec {% render 'snippet-name' %}, l’équivalent des partials.
assets/ — CSS, JS, images, polices référencés via asset_url.
config/ — settings_schema.json définit les options de personnalisation, settings_data.json stocke les valeurs choisies.
locales/ — fichiers de traduction (fr.json, en.default.json).

La grosse rupture OS 2.0 : les templates JSON permettent au marchand de glisser-déposer des sections sur n’importe quelle page depuis l’éditeur, sans toucher au code. Le développeur définit les sections, le marchand les compose.

Les objets Liquid les plus utilisés en 2026

product

Disponible sur les pages produit, dans les boucles de collection, dans la cart. Propriétés essentielles :

product.title, product.description, product.handle (slug)
product.price, product.compare_at_price, product.price_min, product.price_max
product.images (array), product.featured_image
product.variants (array), product.options_with_values
product.available (booléen), product.tags, product.type, product.vendor
product.metafields — vos champs personnalisés (cf. plus bas).

collection

Sur les pages collection : collection.products, collection.title, collection.products_count, collection.url, collection.image.

cart

Disponible partout via l’objet global cart : cart.items, cart.item_count, cart.total_price, cart.note, cart.attributes.

customer

Si l’utilisateur est connecté, customer est disponible : customer.first_name, customer.email, customer.orders, customer.default_address. Sinon customer retourne nil.

shop, request, settings

Objets globaux : shop.name, shop.email, shop.currency, request.host, request.path, request.locale, settings.color_primary (vos settings de thème).

Les tags de contrôle indispensables

Conditions : if, unless, elsif, else

{% if product.available %}
  <button>Ajouter au panier</button>
{% elsif product.tags contains 'restock' %}
  <p>Bientôt de retour</p>
{% else %}
  <p>Épuisé</p>
{% endif %}

Les opérateurs disponibles : ==, !=, <, >, contains, and, or. Pas de parenthèses pour grouper — quand la logique se complexifie, externalisez dans un snippet.

Boucles : for, range, limit, offset

{% for product in collection.products limit: 12 %}
  <a href="{{ product.url }}">{{ product.title }}</a>
{% else %}
  <p>Aucun produit dans cette collection.</p>
{% endfor %}

Variables disponibles dans la boucle : forloop.index (1-based), forloop.first, forloop.last, forloop.length.

Capture et assign

{% assign discount = product.compare_at_price | minus: product.price %}
{% capture badge_html %}
  <span class="badge">-{{ discount | money }}</span>
{% endcapture %}
{{ badge_html }}

assign stocke une valeur scalaire, capture stocke un bloc HTML rendu.

render et include (deprecated)

{% render 'product-card', product: product %} est la syntaxe recommandée depuis 2020. {% include %} existe encore mais est marqué legacy : render est plus rapide, isolé (pas de variables fuyantes) et accepte le passage de paramètres explicites.

Les filtres essentiels à mémoriser

Filtres de mise en forme monétaire

money — {{ 1999 | money }} → 19,99 € (utilise le format de la boutique)
money_with_currency — 19,99 EUR
money_without_trailing_zeros — 19,99 € ou 20 € si entier

Filtres d’images Shopify CDN

image_url — {{ product.featured_image | image_url: width: 800 }} renvoie une URL CDN avec redimensionnement.
image_tag — {{ product.featured_image | image_url: width: 800 | image_tag }} génère <img> avec srcset, sizes, loading=”lazy” automatiquement.

Depuis 2022, img_url est deprecated au profit de image_url. Migrer permet de bénéficier des images WebP/AVIF servies automatiquement par le CDN Shopify.

Filtres de chaînes

downcase, upcase, capitalize, truncate, truncatewords, strip_html, escape, handleize (génère un slug). Toujours escape les variables affichées dans des attributs HTML : alt="{{ product.title | escape }}".

Filtres de tableaux

where, map, sort, uniq, compact, first, last, size. Exemple :

{% assign sale_products = collection.products | where: 'compare_at_price_min', '>', 0 %}

Sections, blocks et settings_schema

Une section Online Store 2.0 typique contient trois parties : le HTML/Liquid, un objet {% schema %} JSON qui définit ses settings, et optionnellement des blocks (éléments répétables glissables).

{% comment %} sections/hero.liquid {% endcomment %}
<section style="background-color: {{ section.settings.bg_color }}">
  <h1>{{ section.settings.heading }}</h1>
  {% for block in section.blocks %}
    <p {{ block.shopify_attributes }}>{{ block.settings.text }}</p>
  {% endfor %}
</section>

{% schema %}
{
  "name": "Hero",
  "settings": [
    { "type": "text", "id": "heading", "label": "Titre", "default": "Bienvenue" },
    { "type": "color", "id": "bg_color", "label": "Fond", "default": "#ffffff" }
  ],
  "blocks": [
    { "type": "paragraph", "name": "Paragraphe", "settings": [
      { "type": "richtext", "id": "text", "label": "Texte" }
    ]}
  ],
  "presets": [{ "name": "Hero" }]
}
{% endschema %}

L’attribut {{ block.shopify_attributes }} est obligatoire pour que l’éditeur de thème reconnaisse l’élément (sinon le drag-and-drop ne fonctionne pas).

Métaobjets et métafields : la révolution 2024-2026

Les métafields permettent d’ajouter des champs personnalisés à n’importe quelle ressource (produit, collection, client, commande). Les métaobjets (introduits en 2023) vont plus loin : ce sont des entités custom complètes, comme des CPT WordPress.

{% comment %} Affiche un champ "fiche technique" sur un produit {% endcomment %}
{% assign tech_sheet = product.metafields.custom.fiche_technique %}
{% if tech_sheet %}
  <a href="{{ tech_sheet | file_url }}" download>Télécharger la fiche technique</a>
{% endif %}

{% comment %} Liste les "designers" (métaobjet) référencés par un produit {% endcomment %}
{% for designer in product.metafields.custom.designers.value %}
  <a href="/pages/{{ designer.system.handle }}">{{ designer.name }}</a>
{% endfor %}

Les métaobjets remplacent largement les apps tierces de “fiche produit enrichie” et permettent de gérer des relations many-to-many (un produit peut avoir plusieurs designers, un designer peut avoir plusieurs produits).

Les pièges de performance Liquid à éviter

1. N+1 sur les variantes et images

Accéder à product.variants[0].metafields.x dans une boucle de collection déclenche une requête par produit. Préférez les collection metafields ou agrégez les données côté Shopify Functions.

2. Filtres lourds dans le rendu

Les filtres comme where, map ou sort sur de gros tableaux (1000+ items) consomment du CPU côté serveur. Pour les grosses collections, utilisez la pagination native ou la search API en JavaScript côté client.

3. Sections lourdes appelées partout

La section header.liquid est rendue sur chaque page. Un {% for product in all_products %} dans le header tuera la performance. Limitez ce qui circule dans header/footer aux objets globaux légers.

4. Inline JS sans defer

Les balises <script> sans defer ou async bloquent le parsing HTML, ce qui pénalise le LCP. Préférez {{ 'main.js' | asset_url | script_tag }} qui ajoute defer automatiquement.

5. Section settings dépassant 100 inputs

Au-delà de 100 settings dans un même section, l’éditeur de thème devient lent et crash sur mobile. Découpez en plusieurs sections ou en blocks.

Outils et débogage Liquid en 2026

Shopify CLI — shopify theme dev lance un serveur local avec hot-reload. Indispensable pour itérer.
Theme Check — linter intégré qui détecte erreurs de syntaxe, deprecated et anti-patterns de performance.
VS Code Shopify Liquid extension — autocomplétion des objets, validation du {% schema %}.
Tag {% liquid %} — bloc multi-lignes plus lisible que d’enchaîner les {% assign %}.
Profiler intégré — ?profile=1 sur n’importe quelle URL Shopify (en mode preview) affiche un profil des sections les plus coûteuses.

Quand recoder un thème Shopify de zéro plutôt que d’acheter ?

Acheter un thème (Dawn, Sense, Studio) est cohérent jusqu’à 100k€/an de chiffre d’affaires. Au-delà, un thème sur mesure rentabilise rapidement :

Performance : un thème custom optimisé tient un score Lighthouse 95+, vs 60-75 pour les thèmes du Theme Store.
Conversion : 1 seconde gagnée sur le LCP = +7 % de conversion en moyenne (étude Shopify 2024).
Identité visuelle : impossible à différencier des concurrents avec un thème Dawn standard.
Maintenabilité : un thème custom propre est plus maintenable qu’un thème acheté gavé d’options inutiles.

Notre agence Shopify conçoit des thèmes Liquid sur mesure dès 800 € pour la version express, jusqu’à 25 000 € pour les boutiques avancées avec apps custom et migration complète.

Aller plus loin avec Shopify

Questions fréquentes — Shopify Liquid en 2026

Faut-il connaître Ruby pour utiliser Liquid ?

Non. Liquid est écrit en Ruby mais sa syntaxe est volontairement abstraite : un développeur PHP, JavaScript ou Python peut le maîtriser en une journée. La logique étant intentionnellement limitée, il n’y a pas de classes, de modules ou de gestion d’erreurs comme dans Ruby.

Online Store 2.0 est-il rétrocompatible avec les anciens thèmes ?

Partiellement. Les thèmes pré-2.0 continuent de fonctionner mais ne bénéficient pas du drag-and-drop sur les pages produit/collection. Migrer un thème legacy vers OS 2.0 demande typiquement 5 à 15 jours de développement selon la complexité, et c’est un investissement qui se rentabilise vite par le gain d’autonomie côté marketing.

Liquid permet-il d’appeler une API externe ?

Non, Liquid s’exécute uniquement côté serveur Shopify et ne peut pas faire de requêtes HTTP. Pour intégrer une API externe (avis Trustpilot, ERP, CRM), trois options : 1) une App Shopify (Node.js ou Ruby), 2) JavaScript côté client (fetch), 3) Shopify Functions pour la logique panier/checkout.

Peut-on utiliser TailwindCSS dans un thème Shopify ?

Oui, Shopify supporte la compilation Tailwind via Shopify CLI depuis 2023. Vous écrivez vos classes utilitaires dans les fichiers Liquid, Tailwind purge le CSS au build et n’inclut que les classes effectivement utilisées. Résultat : 10-30 Ko de CSS au lieu de 200+ Ko avec un framework full-bundle.

Quelle est la différence entre `render` et `section` ?

{% render 'card' %} inclut un snippet (fragment réutilisable, pas de schema, pas d’éditeur). {% section 'header' %} rend une section globale (avec schema, settings éditables). En général : header, footer, announcement bar = sections globales ; card, price, badge = snippets.

Combien coûte le développement d’un thème Shopify sur mesure en 2026 ?

Comptez 800 à 2 500 € pour un thème simple basé sur Dawn customisé, 5 000 à 12 000 € pour un thème sur mesure avec sections custom, et 15 000 à 35 000 € pour un thème premium avec apps métier intégrées et migration complète depuis un autre CMS. Plus de détails sur notre page agence Shopify.