Agence Shopify à votre service ! Besoin d'un devis ou d'un conseil ? 📞 01 84 25 92 21

C'est quoi le Liquid ?

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…

Exemple de code Liquid d'un template Shopify

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 !

📚 A lire aussi 👇

  • Comment ajouter un second texte seo sur les catégories sur Shopify ?

    Pour booster son trafic SEO, rien de mieux que du contenu, des liens et un site de qualité.  Ce sont les 3 piliers fondamentaux du référencement naturel et depuis 20 ans, cela n’a pas beaucoup boug...

  • Comment ajouter les factures dans Shopify ?

    Cela va peut être vous sembler idiot mais de base, dans Shopify, il n’y a pas de factures disponible pour les clients. C'est-à dire que, a moins d’installer la bonne application, aucun de vos clien...

  • Comment dupliquer un thème Shopify ?

    Vous avez déjà un thème Shopify actif sur votre boutique et vous voulez le dupliquer pour une raison particulière ? Que ce soit pour le sauvegarder sur votre ordinateur ou sur le cloud, comme Dropb...

  • Est-ce que Shopify est gratuit ?

    Shopify est un logiciel e-commerce payant et il n’existe pas de version gratuite pour le moment. Shopify propose tout de même une version d’essai de 14 jours qui ne nécessite pas de carte bleue, de...

  • Quel est le nombre de produits maximum sur Shopify ?

    Vous êtes intéressés par Shopify mais vous avez beaucoup de produits ou de variantes ? Vous avez envie de connaître les limites techniques de Shopify ? Vous avez envie de savoir si le nombre de pro...

Laisser un commentaire

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés