Pourquoi s’intéresser au LIQUID pour son site Shopify ?

Il existe deux types de sites :

• Statiques
• Dynamiques

Les sites web statiques

Toutes les pages que vous retrouverez sur les sites web statiques seront visibles exactement de la même façon par les utilisateurs.

Les sites web dynamiques

Les sites web dynamiques sont des sites dont le contenu va changer selon ses utilisateurs.

Prenons l’exemple de Facebook :

Facebook n’a pas créé des millions de pages profils pour chacun de ses membres. Le site étant dynamique, les variables à l’intérieur des pages Profil sont dynamisés et prennent une valeur en fonction du profil.

Shopify est également un exemple de site web dynamique. Bien que la partie visuelle soit initialement en HTML et CSS (statique), la back office quant à lui est différent pour chaque utilisateur. Les informations affichées dans le back office étant elles même dynamisées.

Il est possible également de dynamiser la partie visuelle de votre site shopify, en utilisant le .LIQUID notamment. Mais par défaut, la partie visuelle d'un site shopify est uniquement composé de CSS / HTML statique.

Utiliser le Liquid pour templater votre site Shopify

Bien que vos pages Shopify seront toujours constituées de CSS & HTML (tout simplement pour afficher le contenu et le styliser sur votre page), il est possible de venir dynamiser l’affichage d’une page en ajoutant des variables avec le Liquid.

Ainsi, les utilisateurs pourront avoir accès à des versions différentes de votre site. Pour cela on va remplacer des champs dits statiques par du code en LIQUID pour venir dynamiser votre site shopify.

En plus de simplement dynamiser votre site, le LIQUID vous permettra également de le templater.

En effet, une fois que vous aurez accès à la connaissance nécessaire pour prendre la main sur le code de votre site Shopify, vous serez en mesure de dupliques vos pages ou modules avec aisance.

Comment utiliser le LIQUID sur son site Shopify

Maintenant que nous avons vu l’intérêt d’utiliser le LIQUID pour venir templater / dynamiser votre site sur shopify, nous allons voir dans la pratique comment le mettre en place sur votre boutique.

Découvrir nos produits et services d'optimisation de boutiques Shopify

Les bases du LIQUID

En LIQUID il y a deux types de balises :

• La balise {{ AFFICHAGE }}
• La balise {% TAG %}

Les valeurs en LIQUID

Qui dit variable dit valeur.

On utilisera {% assign %} pour assigner une variable à une valeur.

Exemple :

{% assign toto = "full" %}
              {% assign titi = "stack" %}

Dans ces cas, on donne la valeur full à la variable toto et la valeur stack à la variable titi.

Les conditions en LIQUID

En LIQUID, comme dans tout langage de programmation ou de templating, nous pouvons également y trouver des conditions.

On utilisera ces balises différentes pour les conditions :

• {% if %} pour ajouter une condition classique.

Exemple :

{% if "toto" %}
                  <p>Hello {{toto}}</p>
              {% else %}
                  <p>Il n'existe pas</p>
              {% endif %}

• {% unless %} qui est l’inverse de if (s’il n’y a pas).

Exemple :

{% unless toto %}
                  <p> toto n'existe pas</p>
              {% else %}
                  <p> Hello {{ toto }} </p>
              {% endunless %}

• {% elsif %} pour éviter la répétition de if.

Exemple :

{% if "toto" %}
                <p>Hello {{toto}}</p>
              {% elsif toto =="stack" %}
                <p>Il n'existe pas</p>
              {% endif %}

• {% case %} comparable au if, pour placer des conditions à l'intérieur d'un cas.

Prenons pour exemple le cas toto :

{% case toto %}
                  {% when "full" %}
                    <p>Hello full</p>
                  {% when "stack" %}
                    <p>hello stack</p>
                  {% else %}
                    <p>toto n'es pas full ni stack/p>
              {% endcase %}

Dans ce cas présent, à la place de créer des conditions "si" nous créerons des conditions "quand".

Les boucles en LIQUID

Les boucles permettent de tourner autour de certaines valeurs.

Par exemple on peut tourner autour des utilisateurs du site :

{% for user in site.users %}

{% for user in site.users %}
                  <p>c'est {{user}}</p>
              {% endfor %}

On peut faire des boucles sur :

• Les produits
• Les collections
• Les utilisateurs
• Sur les chiffres
• …

Tutoriel vidéo

Passons maintenant à la partie pratique.

Je vous montre exactement comment utiliser le LIQUID sur votre site shopify dans cette vidéo à partir de la 9ème minute :

Découvrir nos produits et services d'optimisation de boutiques Shopify

Conlusion

Pour conclure, l’affichage sur Shopify se fait en HTML et CSS.

Cependant, le LIQUID va vous permettre de venir dynamiser vos pages pour proposer du contenu sur mesure à vos utilisateurs. Il vous permettra également de venir Templatiser votre site