Glossaire

Qu'est-ce que Liquid Shopify ? Définition

4 juin 2026

Liquid Shopify est le langage de template utilisé par Shopify pour transformer les données de la boutique en pages web visibles par les clients. Il permet d’afficher automatiquement le titre d’un produit, son prix, son stock, ses images, ses collections ou encore des blocs conditionnels dans un thème. Liquid fait le lien entre le back-office Shopify et le HTML final envoyé au navigateur. Pour un marchand, il n’est pas toujours nécessaire de le maîtriser, mais le comprendre aide à mieux dialoguer avec une agence ou un développeur.

Sommaire

Définition de Liquid Shopify

Pourquoi Liquid est essentiel dans une boutique Shopify

Structure d’un thème et rôle de Liquid

Éditer Liquid sur Shopify sans fragiliser le thème

Points de vigilance pour travailler avec Liquid

En résumé

Termes associés, FAQ et ressources utiles

Définition de Liquid Shopify

Liquid mélange du HTML statique et des balises dynamiques qui injectent des valeurs depuis Shopify (prix produit, titre collection, URL canonique).

Trois syntaxes de base :

Dans la pratique, cela recouvre surtout Output : {{ product.title }} affiche le titre produit ; Logic tags : {% if product.available %}En stock{% endif %} ; et Filtres : {{ product.price | money }} formate le prix en devise locale.

Objets Liquid courants en e-commerce :

Dans la pratique, cela recouvre surtout product : titre, prix, variantes, images, description ; collection : produits d'une rubrique ( collection Shopify ) ; cart : lignes panier, total ; shop : nom boutique, domaine, devise ; customer : client connecté (compte) ; et request : page courante, locale.

Tags Liquid utiles :

Dans la pratique, cela recouvre surtout {% for %} : boucle sur produits, variantes, liens menu ; {% assign %} : variable temporaire ; {% render %} : inclure un snippet réutilisable ; et {% section %} : section OS 2.0 (legacy).

Distinctions utiles :

Dans la pratique, cela recouvre surtout Liquid vs JavaScript : Liquid = serveur Shopify ; JS = navigateur client ; Liquid vs HTML : Liquid génère le HTML final ; Liquid vs PHP (WooCommerce) : autres CMS utilisent d'autres langages template ; Liquid thème vs API Shopify : Liquid accède aux objets page courante ; l'API REST/GraphQL pour apps et intégrations externes ; et Liquid storefront vs Liquid notifications : emails commande utilisent aussi Liquid (variables order, line_items).

Liquid n’est donc pas un simple détail technique : c’est la couche qui permet à un thème Shopify de rester dynamique. Une même structure peut afficher des informations différentes selon le produit, la collection, la disponibilité ou le contexte de navigation.

Pourquoi Liquid est essentiel dans une boutique Shopify

Toute boutique Shopify Online Store repose sur Liquid : même sans coder, le Theme Editor modifie des sections écrites en Liquid sous le capot.

Dans la pratique, cela recouvre surtout Données catalogue en temps réel : prix, stock, promos affichés sans base statique ; Personnalisation thème : layout produit, badges, blocs conditionnels ; SEO technique : {{ canonical_url }} , title dynamiques ( lien canonique , balises meta ) ; Internationalisation : filtres traduction, Markets, devises ; Emails transactionnels : confirmation commande personnalisée Liquid ; Schema.org : JSON-LD produit injecté via snippets Liquid ( données structurées ) ; et Apps et thème : apps exposent parfois des objets Liquid ou blocks dans sections.

Le marchand peut vendre sans maîtriser Liquid (Theme Editor suffit). Liquid devient indispensable pour des évolutions sur mesure avec une agence ou un développeur thème.

Dans une logique de glossaire e-commerce, l’enjeu est donc de comprendre le concept, mais aussi ses effets concrets sur la conversion, l’organisation interne, la marge ou la qualité de l’expérience client.

Structure d’un thème et rôle de Liquid

Arborescence typique thème Shopify 2.0 :

Dans la pratique, cela recouvre surtout layout/theme.liquid : squelette HTML global (head, body, scripts) ; templates/*.json : composition sections par type de page (product, collection, index) ; sections/*.liquid : blocs modulaires (hero, featured collection) ; snippets/*.liquid : composants réutilisables (cart icon, price) ; assets/ : CSS, JS, images statiques ; et config/settings_schema.json : réglages Theme Editor.

Exemple snippet prix produit :

{% if product.compare_at_price > product.price %}
  <span class="price-sale">{{ product.price | money }}</span>
  <span class="price-compare">{{ product.compare_at_price | money }}</span>
{% else %}
  <span class="price">{{ product.price | money }}</span>
{

Cas d’usage : marque DTC veut afficher « Livraison offerte dès 60 € » uniquement si panier > 60 €. Développeur ajoute dans snippets/free-shipping-bar.liquid une condition {% if cart.total_price > 6000 %} (prix en centimes). Snippet inclus via {% render 'free-shipping-bar' %} dans theme.liquid. Theme Editor permet au marchand de activer/désactiver la section sans toucher au code. Preview thème dupliqué avant publication live.

Ce type de cas montre qu’un concept technique ou marketing n’a de valeur que s’il est relié à un usage précis : un meilleur parcours, une décision plus fiable, un coût mieux maîtrisé ou une expérience plus claire pour l’acheteur.

Éditer Liquid sur Shopify sans fragiliser le thème

Deux niveaux d'accès Liquid (Shopify Help Center) :

Dans la pratique, cela recouvre surtout Theme Editor (sans code) : réorganiser sections, textes, images ; Liquid sous-jacent non visible ; et Edit code : Online Store > Themes > Actions > Edit code ; accès fichiers .liquid.

Conseils utiles workflow :

D’abord, dupliquer le thème live avant toute modification Liquid. Ensuite, travailler sur thème preview, tester produit/collection/panier. Puis, utiliser {% render %} pour snippets plutôt que copier-coller. Après cela, documenter les changements custom (update thème parent peut écraser). Enfin, publier après validation mobile et SEO (View Source).

Ressources officielles :

Dans la pratique, cela recouvre surtout Shopify.dev Liquid reference : objets, tags, filtres ; Theme Check : linter Liquid (conseils utiles, erreurs) ; et GitHub theme Dawn : thème de référence OS 2.0 open source.

Limites Liquid : pas d'accès base de données arbitraire, pas d'appels HTTP externes depuis Liquid storefront (sécurité). Logique complexe ou données externes passent par JavaScript + Ajax API ou apps.

Sur Shopify, la logique consiste généralement à partir des fonctions natives, puis à compléter avec un thème, une app ou une intégration seulement lorsque le besoin métier le justifie.

Points de vigilance pour travailler avec Liquid

Dans la pratique, cela recouvre surtout Snippets réutilisables : prix, badges, cart icon en un seul fichier ; Conditions claires : if product.available avant bouton achat ; Filtres money / image_url : formatage natif plutôt que hardcoder € ; Échapper contenu user : filtre escape si injection HTML risquée ; Performance : éviter boucles for énormes sur all_products ; Metafields : product.metafields.custom.xxx pour données custom ; et Commentaires Liquid : {% comment %} ... {% endcomment %} pour maintenabilité.

Points de vigilance :

Dans la pratique, cela recouvre surtout Modifier theme.liquid live sans backup (panne storefront) ; Confondre Liquid et JavaScript (syntaxe {{ }} dans fichier .js) ; Oublier que les prix Liquid sont en centimes (6000 = 60,00 €) ; Hardcoder textes au lieu de settings Theme Editor (i18n difficile) ; Dupliquer 500 lignes au lieu d'un snippet render ; Update thème Dawn parent sans merger custom Liquid ; et Logique métier lourde en Liquid : préférer app ou Functions.

Le bon réflexe consiste à documenter les règles, tester les changements sur un périmètre limité et vérifier leur impact réel avant de les généraliser à toute la boutique.

En résumé

Dans la pratique, cela recouvre surtout Liquid = langage template Shopify (output, tags, filtres) ; Objets : product, collection, cart, shop, customer ; Fichiers : layout, templates JSON, sections, snippets ; Distinct JavaScript (client), HTML (résultat), API (apps) ; et Theme Editor pour marchands ; Edit code pour devs ; dupliquer thème avant modif.

L’essentiel est de relier cette notion à un usage concret : mieux vendre, mieux mesurer, mieux organiser la boutique ou réduire une friction dans le parcours client.

Termes associés, FAQ et ressources utiles

Termes associés

FAQ

Faut-il apprendre Liquid pour vendre sur Shopify ?

Non pour le quotidien : le Theme Editor suffit pour la plupart des boutiques. Liquid devient utile pour personnalisations thème, corriger un affichage ou travailler avec un développeur.

Liquid et JavaScript : lequel modifier pour le panier AJAX ?

Le HTML initial du panier vient du Liquid. Le comportement sans rechargement (Ajax Cart) est géré en JavaScript qui appelle /cart/add.js. Les deux travaillent ensemble.

Où éditer du Liquid sur Shopify ?

Allez dans Online Store > Themes > Actions > Edit code. Modifiez sections, snippets ou layout. Dupliquez toujours le thème live avant changement.

Liquid est-il exclusif à Shopify ?

Créé par Shopify, Liquid est open source et utilisé ailleurs (Jekyll, certains CMS). En e-commerce, il est surtout associé aux thèmes Shopify et aux notifications email Shopify.

Aller plus loin

Sources : Shopify.dev (Liquid reference), Shopify Help Center (Edit code).

Qu'est-ce que le bénéfice brut ? Définition e-commerce

Enzo

13 mai 2026

Convertissez +2000 clients en moyenne par mois en utilisant Qstomy.

1ère IA Shopify dédiée à la conversion client au monde

200+ ecommerçants accompagnés

Abonnez-vous à la newsletter et obtennez un e-book personnalisé !

Solution no-code, sans connaissance technique requise. Une IA entrainée sur votre e-shop et non intrusive.

Incrivez vous à la waitlist

*Désabonnez-vous à tout moment. Nous n'envoyons pas de spam.