Si vous êtes dans l’univers Shopify depuis un petit moment, vous avez dû forcément entendre parler de ce nom bizarre : le Liquid” (avec un L majuscule) mais vous ne savez peut-être pas précisément ce que c’est ni à quoi ça sert ? Voyons cela ensemble et le Liquid n’aura plus de secret pour vous ou presque.
Liquid, c’est le langage de templating de Shopify
Oula , on va expliquer ne vous en faites pas. Contrairement à ce que l’on peut lire sur d’autres blogs e-commerce, visiblement peu informés sur Shopify, le Liquid n’est pas le langage de programmation de Shopify.
Shopify à une base de code plutôt basée sur Ruby On Rails mais cela à peu d’importance car à par l’équipe de Shopify elle même, personne ne touche au code de Shopify.
“Mais Benoît, tu dis partout sur les articles que vous êtes des développeurs Shopify dans ton agence E-commerce alors que vous ne touchez pas au code de Shopify vous faites quoi ? “
Et bien tout d’abord, merci Jean-kévin pour cette excellente question. 10 points à Gryffondor.
Alors, chez Pikka, nous avons bien des développeurs, mais ils travaillent avec le langage Liquid, le html, le css et le javascript, pour créer des thèmes Shopify uniques pour nos clients. Ils ne touchent pas au code de Shopify mais “seulement” à la partie “front office” que l’on appelle le template.
Le squelette, le design, l’intégration graphique, tout cela représente ce qu’il est possible de faire comme modifications technique sur Shopify.
Bon il y a aussi les apis mais c’est un autre sujet . Concentrons nous sur le Liquid.
Certaines autres solutions e-commerce ont des langages de templating en php ou tout autre langage de programmation. Chez Shopify c’est du Liquid.
A quoi sert le Liquid ?
Le Liquid va servir à rendre le site dynamique et surtout “variable”. Prenons un exemple simple. Sur une page , vous voulez afficher le titre de la page. Dans le code, nous n’allons pas mettre le nom de la page en dur. On va utiliser une variable , par exemple {{page.title}} .
Shopify, à chaque fois qu’il va charger une page va voir ce truc bizarre {{page.title}} (double accolade, texte, fermeture des doubles accolade) et va savoir qu’il doit remplacer le mot entre les accolade par la valeur de la page.
Et sur chaque page nous aurons bien un titre différent pour chaque page affichée au client, avec une seule ligne de code. Bon c’est l’exemple le plus simple. Il faut imaginer maintenant faire la même chose pour chaque image, texte, photo, bannière, prix, information etc…
Et là ça commence à faire pas mal de travail de coder un thème sur mesure pour un client. C’est pour cela que créer un thème représente un budget qui peut commencer à partir de 15 000 € généralement, voir tarifs et prix des prestations Shopify pour plus d’informations.
Un thème réalisé en Liquid va contenir des milliers de lignes de codes, de combinaisons, de boucles d’itérations, de conditions logiques booléennes pour afficher la bonne information au bon moment. C’est un travail de fourmis mais qui va permettre de transformer une simple idée en rendu graphique haut de gamme pour un site e-commerce de luxe par exemple.
Quelle est la différence entre le Liquid, le html, le css et la javascript ?
Mais alors, si le Liquid sert de langage de programmation pour créer des thèmes Shopify. Que viennent faire le html, le css et le javascript là-dedans ?
Et chacun à son utilité et reste complémentaire.
Les navigateurs ne comprennent pas le langage Liquid . Shopify sert donc de traducteur pour transformer les variables Liquid en informations mais il faut bien les présenter correctement.
Le Html
C’est le rôle du Html pour la partie “DOM” , document object model, pour faire simple disons la structure technique de la page. Vous savez, celle qu’il faut optimiser pour améliorer la vitesse de chargement de son site e-commerce.
Le CSS
Le CSS lui c’est la couche graphique. Il va dire à un blog html de devenir bleu ou rouge et de changer de design en fonction du support, mobile ou desktop par exemple.
Créer des milliers de lignes de CSS est toujours une grosse partie de notre travail à l’agence lorsque nous créons des intégrations graphiques via des maquettes Figma par exemple.
Le JavaScript
Le javascript lui va gérer les événements dynamiques. Que se passe-t-il si l’on clique sur ce bouton par exemple. Mais il peut aussi afficher ou masquer des éléments en fonction de certains clics , scroll ou autre.
L’ensemble des trois constituent la plus grande partie du ou des templates graphiques que l’on peut retrouver dans un thème Shopify, que ce soit un thème gratuit ou un thème payant, côté technique c’est la même chose à l’intérieur.
Si vous avez besoin d’un expert Liquid pour faire des modifications graphiques ou techniques sur votre site Shopify, vous pouvez demander un devis à notre équipe commerciale, nous nous ferons un plaisir de vous accompagner dans l’évolution de votre site marchand en mettant notre expertise à votre service !
Quelles ressources pour booster ses connaissances en Liquid ?
Si ce sujet vous intéresse, vous pouvez consulter les liens suivants pour en savoir plus sur le langage de templating "Liquid" et améliorer vos connaissances :
Liquid sur GitHub
Shopify à ouvert un espace de documentation Liquid sur GitHub disponible ici -> https://shopify.github.io/liquid/
Idéal pour tout savoir sur les grands principes de Liquid et pour la base documentaire précise des boucles et différents éléments de logique utilisable dans Liquid. Ca manque un peu d'exemples mais c'est une bonne base pour vérifier une info ou une nomenclature.
Liquid sur Shopify Dev
L'autre grande source d'informations, beaucoup plus précise et plus complète se trouve sur le site de Shopify.dev, véritable bible de connaissances pour approfondir son savoir sur le langage Liquid.
Le site Shopify .dev est trés complet et couvre de nombreux sujets (API, Headless, Paiement etc...) . Pour accéder à la partie Liquid c'est par ici : https://shopify.dev/api/liquid
