Shopify est aujourd’hui l’une des plateformes e-commerce les plus utilisées au monde. Son succès repose en grande partie sur sa simplicité d’utilisation et son système de thèmes qui permet aux marchands de créer une boutique en ligne sans avoir besoin de compétences avancées en développement. Chaque thème Shopify est conçu pour être personnalisable et offrir une expérience utilisateur fluide, mais pour aller plus loin dans la modification de son site, il est essentiel de comprendre le langage Liquid.
Développé par Shopify, Liquid est un langage de templating qui sert d’intermédiaire entre le code Shopify et les données dynamiques de la boutique. Il permet d’afficher des informations comme les noms des produits, les prix ou encore les images, tout en offrant un contrôle avancé sur la présentation et la logique d'affichage des pages.
Maîtriser Liquid est indispensable pour toute personne souhaitant personnaliser son site Shopify au-delà des options classiques proposées dans l’éditeur de thèmes. Que vous soyez un marchand souhaitant optimiser l'affichage de votre boutique ou un développeur cherchant à concevoir un thème Shopify sur mesure, comprendre le fonctionnement de Liquid est une étape clé pour exploiter pleinement les possibilités offertes par la plateforme. 🚀
Définition : qu’est-ce que le langage Liquid ?
Liquid est un langage de templating open-source développé par Shopify. Il sert d’intermédiaire entre le code HTML et les données dynamiques d’une boutique en ligne, permettant ainsi d’afficher du contenu personnalisé en fonction des informations de la boutique, comme les produits, les collections ou encore les prix.
Ce système de templating est utilisé dans tous les thèmes Shopify, ce qui signifie que toute boutique créée sur la plateforme repose sur Liquid pour générer ses pages. Contrairement aux langages de programmation classiques, Liquid ne permet pas d’exécuter du code côté serveur, mais agit plutôt comme un moteur de rendu qui structure l'affichage des éléments en fonction des paramètres définis.
Grâce à sa syntaxe simple et accessible, Liquid est largement utilisé par les développeurs Shopify, mais aussi par les marchands qui souhaitent personnaliser leur thème Shopify sans forcément maîtriser des langages plus complexes comme JavaScript ou PHP.
En résumé, Liquid permet :
✅ D’intégrer des données dynamiques dans un thème Shopify (nom du produit, prix, image, etc.)
✅ De structurer l’affichage des pages avec une syntaxe facile à apprendre
✅ De personnaliser son site Shopify tout en gardant un code propre et sécurisé
Comment fonctionne Liquid dans Shopify ?
Pour bien comprendre Liquid, il est essentiel d’analyser sa structure et ses composants principaux. Le langage repose sur trois éléments clés : les balises, les objets et les filtres. Chacun joue un rôle bien défini dans la façon dont les données sont affichées et modifiées dans un thème Shopify.
La structure de Liquid : balises, objets et filtres
1. Les balises Liquid : contrôle de l'affichage et des conditions
Les balises Liquid sont utilisées pour exécuter des instructions dans un fichier Liquid. Elles ne produisent pas directement de contenu visible mais contrôlent l’affichage en fonction de conditions ou de boucles.
👉 Exemples de balises de contrôle de flux :
- {% if product.available %} En stock {% else %} Rupture de stock {% endif %} → Vérifie si un produit est disponible
- {% for product in collections.all.products %} {{ product.title }} {% endfor %} → Affiche tous les produits d'une collection
Ces balises permettent de personnaliser l'affichage et d’adapter le contenu en fonction des données de la boutique Shopify.
2. Les objets Liquid : affichage des données Shopify
Les objets Liquid servent à afficher des informations dynamiques directement dans un thème Shopify. Ils sont entourés de doubles accolades {{ }} et permettent d'insérer des valeurs spécifiques issues du back-office de Shopify.
👉 Exemples d’objets Liquid :
- {{ product.title }} → Affiche le nom du produit
- {{ product.price | money }} → Affiche le prix du produit au format monétaire
- {{ customer.email }} → Affiche l’adresse email du client connecté
Les objets Liquid sont la base de la personnalisation Shopify, car ils permettent d’afficher dynamiquement des informations issues de la base de données du site.
3. Les filtres Liquid : modification et formatage des données
Les filtres Liquid servent à modifier ou formater les objets avant leur affichage. Ils sont appliqués en utilisant le symbole | (pipe).
👉 Exemples de filtres courants :
- {{ product.title | upcase }} → Convertit le nom du produit en majuscules
- {{ product.description | truncate: 50 }} → Tronque la description du produit après 50 caractères
- {{ product.price | money_without_currency }} → Affiche le prix sans la devise
Les filtres permettent donc de retravailler l'affichage des données pour améliorer l'expérience utilisateur sans modifier la structure de la base de données Shopify.
💡 En résumé :
✔ Les balises contrôlent l’affichage et la logique des pages
✔ Les objets récupèrent et affichent des données dynamiques
✔ Les filtres modifient et formattent les valeurs affichées
Grâce à cette structure simple mais puissante, Liquid permet de personnaliser un site Shopify en profondeur, sans avoir besoin de toucher au back-end de la plateforme. 🚀
Liquid et les fichiers d’un thème Shopify
Dans un thème Shopify, Liquid joue un rôle clé en organisant la structure et l’affichage des pages. Chaque fichier Liquid correspond à une partie spécifique du site, et il est essentiel de comprendre leur fonctionnement pour personnaliser efficacement son thème Shopify.
Shopify utilise une architecture de fichiers bien définie, divisée en plusieurs dossiers contenant des fichiers Liquid :
1. layout.liquid : la structure principale
Le fichier layout.liquid est le squelette de toutes les pages du site. Il contient l’en-tête , le pied de page