Besoin d'un devis ou d'un conseil sur Shopify ? 📞 Appelez nous au 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 👇

  • Quelles apps utiliser sur un site Shopify en 2020 ?

    Vous avez un beau site Shopify ? Il réalise pas mal de ventes mais vous aimeriez quand même augmenter votre chiffre d’affaires e-commerce ? Vous avez envie de vous faciliter la vie de e-commerçant ...

  • Shopify lance Cdiscount Feed ! 

    Shopify à beau être une solution Nord Américaine, depuis plusieurs mois, elle a à coeur de s’attaquer au marché français et de proposer les meilleurs apps pour les e-commerçants. Dans cette lancée...

  • Un site Shopify peut-il être performant sur Gtmetrix ? 

    Vous avez déjà peut être entendu une rumeur sur la performances des sites Shopify. Il ne serait pas forcément aussi que d’autres solutions e-commerce et cela pourrait se ressentir sur le business. ...

  • Quel thème gratuit de Shopify choisir ? 

    Vous avez choisi Shopify pour la création ou la refonte de votre site e-commerce et vous voulez utiliser un des thèmes gratuit de Shopify ?  Cela tombe bien, il en existe 8 sur le site officiel The...

  • Propulsé par Shopify : Comment l’enlever de votre site (définitivement) 

    Vous avez créé un beau site Shopify, vous êtes fier de votre beau projet mais au final, vous ne voyez qu’une seule chose sur votre site, c’est ce fameux “Propulsé par shopify”  ou “Powered By shopi...

Laisser un commentaire

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