En ouvrant un fichier du thème Skeleton d'Atelier Lumière, vous avez sûrement déjà croisé des accolades qui ne ressemblent à rien de familier. C'est du Liquid, le langage de template que Shopify utilise pour construire ses thèmes. Ce guide explique ce que ce mot signifie vraiment, avant de vous faire écrire la moindre ligne.

Qu'est-ce qu'un langage de template

Un fichier HTML classique est figé : il affiche toujours exactement le même contenu, quel que soit le visiteur ou le moment. Or votre fiche produit Bougie Cèdre doit afficher un titre, un prix et un stock différents de ceux d'une autre bougie, alors que la structure visuelle de la page reste identique d'un produit à l'autre.

Un langage de template résout ce problème : il vous permet d'écrire une structure HTML unique, avec des emplacements réservés, que le serveur remplit automatiquement avec les vraies données au moment où la page est demandée. Liquid est le langage de template créé par Shopify pour jouer exactement ce rôle.

Ce qui s'exécute chez Shopify, et ce qui arrive au navigateur

C'est le point le plus important à comprendre avant d'aller plus loin. Quand un visiteur ouvre la fiche produit de Bougie Cèdre, voici ce qui se passe, dans l'ordre :

  • Les serveurs de Shopify reçoivent la demande, identifient qu'il s'agit de la page produit de Bougie Cèdre, et rassemblent les données réelles de ce produit.
  • Le fichier Liquid correspondant est exécuté côté serveur, chez Shopify : chaque balise Liquid est remplacée par la vraie donnée qu'elle représente.
  • Le résultat, un document HTML tout à fait normal, sans plus aucune trace de Liquid, est envoyé au navigateur du visiteur.

Concrètement, un visiteur ne reçoit jamais de code Liquid. Si vous affichez le code source d'une page dans un navigateur, vous verrez du HTML pur, déjà rempli avec les vraies données : le titre, le prix, la description de la bougie, sans aucune accolade Liquid visible. Liquid a déjà fini son travail avant que la page n'atteigne le navigateur.

Un exemple concret, avant et après

Voici, très simplifié, ce qu'un fichier Liquid pourrait contenir pour afficher un titre de produit :

Et voici ce que reçoit réellement le navigateur d'un visiteur, une fois Liquid exécuté côté Shopify pour la fiche Bougie Cèdre :

La structure <h1> reste identique pour tous vos produits ; seul {{ product.title }} change de résultat selon le produit réellement affiché. C'est exactement le mécanisme que vous allez pratiquer en détail dans les deux prochains guides.

Pourquoi Shopify a créé son propre langage

Liquid a été conçu par Shopify spécifiquement pour être utilisable dans un contexte où de nombreux thèmes différents, écrits par des personnes différentes, s'exécutent sur la même plateforme. Il reste volontairement limité par rapport à un langage de programmation complet comme JavaScript : il ne peut pas se connecter directement à une base de données externe, ni exécuter n'importe quel code arbitraire. Cette limitation volontaire garantit que Shopify reste stable et sécurisé, quel que soit le thème installé sur une boutique.

Vérifiez que vous avez compris

Un visiteur d'Atelier Lumière affiche le code source de la fiche produit Bougie Cèdre dans son navigateur, via le menu de son navigateur. Va-t-il y voir des balises Liquid comme {{ product.title }} ?

Non. Liquid s'exécute entièrement côté serveur, chez Shopify, avant que la page ne soit envoyée au navigateur. Le visiteur ne reçoit que le résultat final, du HTML classique avec les vraies données déjà insérées, jamais le code Liquid source qui les a produites.

Chapitre terminé