Liquid pour Shopify – Comprendre les bases pour personnaliser sa boutique (Partie 1)

Introduction à Liquid et son intérêt pour Shopify

Liquid est le langage de template utilisé par Shopify. Il te permet d'afficher dynamiquement les informations d’un produit, de créer des conditions logiques ou de structurer tes pages plus intelligemment. Dans ce guide, tu vas apprendre à comprendre et utiliser Liquid pour rendre ta boutique plus pro, sans être développeur.

---

1. Qu’est-ce que Liquid dans Shopify ?

1.1 Définition de Liquid et son rôle dans un thème Shopify

Liquid est un langage de template, c’est-à-dire un langage qui sert à créer des pages HTML \"modèles\" dans lesquelles tu vas insérer du contenu dynamique. Plutôt que de réécrire à la main chaque élément (comme un titre ou un prix), tu places des balises dynamiques, et Shopify les remplit automatiquement avec les bonnes données selon la page.

Par exemple, au lieu d’écrire manuellement le nom d’un produit sur chaque page, tu peux utiliser une variable comme {{ product.title }}, et Shopify affichera automatiquement le bon nom de produit selon la page visitée. C’est ça, la magie de Liquid.

Liquid a été créé par Shopify mais il est aussi open source, ce qui veut dire que son code est accessible publiquement. Tout le monde peut le consulter, l'utiliser ou même le modifier. Ça permet à d’autres développeurs ou outils de l’intégrer et de le faire évoluer. Shopify y a simplement ajouté des fonctionnalités spécifiques aux boutiques e-commerce.

1.2 Différence entre contenu statique et contenu dynamique

Prenons deux exemples :

Sans Liquid (statique) :

<h1>Bracelet Perle Noire</h1>

Tu dois changer le nom à la main pour chaque produit.

Avec Liquid (dynamique) :

<h1>{{ product.title }}</h1>

Shopify remplace automatiquement cette balise par le nom du produit affiché.

➔ Tu écris un seul modèle de page, et il s’adapte automatiquement à chaque produit, page ou collection.

C’est ça la puissance d’un langage de template comme Liquid : un code simple, lisible, et ultra puissant pour personnaliser ton site sans tout refaire à chaque fois.

2. Les éléments fondamentaux de Liquid

2.1 Les objets : afficher des données avec {{ }}

Les objets sont les éléments que tu veux afficher dynamiquement. Par exemple, un produit, une collection ou le titre d’une page.

Avec Liquid, on utilise une syntaxe très simple : les doubles accolades {{ }}. Tu y insères un nom d’objet ou une propriété pour afficher son contenu.

Exemples :

• {{ product.title }} ➔ affiche le nom du produit
• {{ product.price }} ➔ affiche le prix
• {{ collection.title }} ➔ affiche le nom de la collection

2.2 Les balises : faire de la logique avec {% %}

Les balises permettent d’ajouter des instructions dans ton code : des conditions, des boucles, ou encore des commentaires.

Tu les écris entre {% %}, et elles ne produisent pas directement de contenu visible (contrairement aux objets).

Exemples :

• {% if product.available %}En stock{% endif %} ➔ affiche un message si le produit est en stock
• {% for product in collection.products %}...{% endfor %} ➔ boucle sur les produits d'une collection
• {% comment %} Ceci est un commentaire {% endcomment %}

2.3 Les filtres : modifier les données avec |

Un filtre sert à transformer l’information affichée. Tu l’utilises avec un pipe | placé après l’objet ou la variable.

Tu peux chaîner plusieurs filtres à la suite, et ils s’appliqueront dans l’ordre de gauche à droite.

Exemples :

• {{ product.title | upcase }} ➔ affiche le nom du produit en majuscules
• {{ product.description | truncate: 100 }} ➔ coupe la description à 100 caractères
• {{ 'Liquid pour Shopify' | remove: 'Shopify' }} ➔ enlève le mot “Shopify”

Grâce à ces trois piliers – objets, balises et filtres – tu peux construire des pages Shopify puissantes, dynamiques et propres sans écrire de JavaScript ou PHP.

3. Les handles dans Shopify : identifier chaque ressource

3.1 Qu’est-ce qu’un handle et à quoi ça sert ?

Un handle est un identifiant unique utilisé pour désigner une ressource dans Shopify, comme un produit, une collection, une page ou un article de blog. C’est lui qui est utilisé dans les URLs et dans le code pour retrouver un élément.

Par exemple, si tu as une page “À propos de nous”, son URL sera souvent /pages/a-propos-de-nous et son handle sera a-propos-de-nous.

Tu peux aussi utiliser un handle dans ton code pour accéder à une ressource spécifique :

{{ pages['a-propos-de-nous'].url }}

3.2 Comment sont générés les handles dans Shopify ?

Shopify génère automatiquement un handle à partir du titre de la ressource en suivant des règles simples :

• Tout est mis en minuscules
• Les espaces et caractères spéciaux sont remplacés par des tirets -
• Les caractères spéciaux en début ou fin de mot sont supprimés
• Si deux handles identiques existent, Shopify ajoute -1, -2, etc.

Exemple :

• Titre : Health Potion ➔ Handle : health-potion
• Titre : Health Potion (deuxième produit) ➔ Handle : health-potion-1

3.3 Conseils pratiques pour bien gérer les handles

Tu peux modifier un handle manuellement dans l’interface Shopify, dans les paramètres SEO de la page ou du produit. Mais attention : si tu changes un handle, les anciens liens ne fonctionnent plus, à moins de faire une redirection.

🔁 Conseil SEO : utilise des handles clairs et cohérents, en lien avec le nom de ton produit ou collection. Évite les abréviations ou chiffres inutiles.

🛠️ Exemple pratique pour appeler une page dans le code :

Lien vers la page À propos : {{ pages['a-propos'].url }}

4. Comprendre les types de données dans Liquid

4.1 Les types de base : string, number, boolean, nil

Liquid fonctionne avec plusieurs types de données, un peu comme dans Excel ou d’autres langages. Les connaître t’aide à éviter des erreurs et à écrire des conditions qui fonctionnent vraiment.

• String : une chaîne de texte entre guillemets, ex : \"Bienvenue\"
• Number : un chiffre ou un nombre décimal, ex : 42 ou 19.99
• Boolean : une valeur logique, soit true (vrai) soit false (faux)
• Nil : une valeur absente ou non définie (comme un champ vide)

⚠️ Attention : nil est différent d'une chaîne vide \"\" ou du nombre 0. Ces deux derniers existent, alors que nil signifie “n’existe pas du tout”.

4.2 Les arrays (tableaux) et les objets vides

Un array est simplement une liste de plusieurs éléments. Par exemple, un produit dans Shopify peut avoir plusieurs tags comme : bio, promotion, nouveauté. Tous ces tags sont regroupés dans un seul tableau.

Si tu écris :

{{ product.tags }}

Tu verras tous les tags affichés, mais sur une seule ligne, pas très lisible.

Pour les afficher proprement, un par un, tu peux utiliser une boucle :

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

Chaque tag s'affichera alors séparément, ligne par ligne ✅

Et c’est quoi un objet vide ?

Un objet vide, c’est un élément qui existe dans le code mais qui n’a pas de contenu.

Ça peut arriver si, par exemple, tu fais référence à une page supprimée, ou à une variable qui n’a pas encore reçu de valeur.

Exemple :

{{ pages['recette'].title }}

Si la page recette a été supprimée, Shopify ne renvoie pas d’erreur. Il comprend juste que l’objet est vide, donc il n’affiche rien.

💡 Astuce : tu peux vérifier si un objet est vide avant de l’utiliser avec empty :

{% unless pages.recette == empty %}
  {{ pages.recette.title }}
{% else %}
  La page n'existe pas.
{% endunless %}

4.3 Truthy vs Falsy : ce que Liquid considère comme vrai ou faux

Quand tu écris une condition avec if dans Liquid, Shopify doit décider si la valeur est “vraie” ou “fausse”. Mais attention, ce n’est pas toujours aussi évident que ça en a l’air.

Voici ce que Liquid considère :

• Truthy (vrai) : une chaîne vide (\"\"), le nombre 0, un tableau vide [], ou n’importe quelle variable existante
• Falsy (faux) : uniquement false et nil (c’est-à-dire inexistant)

Par exemple :

{% if "" %}
  Ceci s'affichera ✅ (car une chaîne vide est considérée comme vraie)
{% endif %}

Mais :

{% if false %}
  Ceci ne s'affichera pas ❌ (false est considéré comme faux)
{% endif %}

🧠 À retenir : seuls false et nil sont “faux” pour Liquid. Tout le reste est “vrai”, même si c’est vide ou égal à zéro.

5. Les opérateurs logiques dans Liquid

5.1 Utiliser IF, UNLESS, AND, OR efficacement

Liquid permet de créer des conditions logiques dans tes pages. Tu peux ainsi afficher du contenu uniquement si certaines conditions sont vraies.

Les deux mots-clés les plus utilisés sont :

• {% if %} : exécute le code seulement si la condition est vraie
• {% unless %} : exécute le code seulement si la condition est fausse (l'inverse de if)

Tu peux aussi combiner plusieurs conditions grâce aux opérateurs logiques :

• and ➜ les deux conditions doivent être vraies
• or ➜ au moins une des deux conditions doit être vraie
• == ➜ égal à
• != ➜ différent de
• >, <, >=, <= ➜ comparateurs numériques

Exemples pratiques :

{% if product.available and product.price < 30 %}
  Produit en stock à moins de 30€ !
{% endif %}

{% unless product.tags contains 'rupture' %}
  Ce produit est disponible
{% endunless %}

5.2 L’ordre d’évaluation : attention au piège !

Quand tu combines plusieurs conditions, Liquid les évalue dans un ordre spécifique : de droite à gauche.

🧠 Ce détail est très important, car si tu penses que Liquid lit de gauche à droite (comme en maths), tu risques de mal comprendre le résultat.

Exemple classique :

{% unless true and false or true %}
  Cette ligne s'affiche ?
{% endunless %}

Liquid va lire comme ceci :

1. false or true ➜ true
2. true and true ➜ true
3. unless true ➜ faux → donc rien ne s'affiche

🚫 Les parenthèses ne fonctionnent pas dans Liquid. Tu ne peux pas forcer l’ordre comme en JavaScript. Il faut donc bien réfléchir à l’enchaînement logique.

✅ Conseil : si tu as une logique complexe, essaye de la simplifier en créant une variable intermédiaire, ou en séparant les conditions.

6. Maîtriser les espaces dans le rendu

6.1 Supprimer les espaces blancs inutiles avec {%- et -%}

Quand tu utilises Liquid, chaque ligne génère du contenu HTML, même si ce n’est qu’un saut de ligne ou un espace.

Résultat : parfois, ta page peut afficher des lignes vides ou un espacement inattendu. C’est souvent à cause de Liquid qui interprète les retours à la ligne dans ton code.

🧽 Pour éviter cela, Shopify propose une syntaxe spéciale : tu peux ajouter un tiret - après {% ou avant %} pour supprimer les espaces générés automatiquement.

Exemple sans contrôle des espaces :

{% if collection.products.size > 0 %}
  {{ collection.title }}
{% endif %}

👉 Cela ajoute souvent un saut de ligne avant et après le titre.

Exemple avec contrôle des espaces :

{%- if collection.products.size > 0 -%}
  {{ collection.title }}
{%- endif -%}

👉 Ce code garde le rendu propre, sans espace inutile.

💡 Tu peux placer les tirets à gauche, à droite, ou des deux côtés selon ce que tu veux supprimer :

• {%- ➜ supprime l’espace AVANT
• -%} ➜ supprime l’espace APRÈS
• {%- ... -%} ➜ supprime des deux côtés

✅ Conseil : utilise ces tirets pour maîtriser ton HTML final, surtout dans les boucles ou les conditions où tu veux un rendu propre.

Conclusion

On vient de parcourir ensemble les bases du langage Liquid dans Shopify : objets, balises, filtres, handles, types de données, logique conditionnelle et contrôle du rendu.

Ce sont les fondations essentielles pour personnaliser ta boutique sans coder comme un développeur.

🧠 Maintenant, c’est à toi de jouer ! Teste tes connaissances avec le quiz juste en dessous 👇

💬 Tu as une question, un doute ou un retour à partager ? N’hésite pas à laisser un commentaire, ton avis m’aide à améliorer les prochaines parties du guide.

🔁 Et si cet article t’a été utile, pense à le partager à d’autres e-commerçants autour de toi !

Test tes connaissances