Code shopify : Comment éditer le code dans Shopify et utiliser les .liquid ?

Il semblerait que tu veuilles éditer le code de ta boutique Shopify ! Hélas, tu es tombé sur d’affreux fichiers nommés les « .liquid ». Alors, qu’est-ce que c’est ? Est-ce du html ? Du css, du php, du javascript ou encore une autre forme de code shopify ou un autre langage ? Pas de panique, les fichiers « .liquid » de Shopify ne sont pas si compliqués que ça à lire et ressemblent à de bon vieux amis si tu as déjà fait un peu de développement.

Où éditer le code de Shopify ?

Pour éditer le code de Shopify, rien de plus simple :

1. Connecte-toi à ta boutique Shopify.
2. Va dans les paramètres permettant de gérer le choix de ton thème. (Je te recommande le thème Speedfly si tu veux gagner du temps).
3. Ensuite, clique sur la petite flèche à côté du nom du thème que tu veux éditer.
4. Tu trouveras le mot « edit code » ou « éditer le code ».
5. Clique dessus et tu arrives sur un interface composé de plusieurs fichiers et d’un éditeur !

Une fois arrivé à cette étape, il te faut bien entendu quelques compétences en code et développement informatique. Sache que les principales fonctionnalités comme le fait de changer une couleur de fond, déplacer une section et autre se font au travers de l’éditeur de thème de Shopify. Dans ce cas, pas besoin d’aller dans le code. Sinon, je t’invite à regarder cette petite vidéo d’initiation qui permet bien entendu de comprendre ce qu’est un .liquid, du html, du css, du js et du php ! Tu sauras où trouver les bons fichiers et le code de Shopify avec ce tutoriel !

Mais c’est quoi, un .liquid ?

Un fichier .liquid est un template de langage que Shopify a créé ! En gros, c’est au travers de ces fichiers que tu vas pouvoir créer toute la structure et l’ossature de ton thème. Si tu fais du html, tu retrouveras bien entendu de nombreuses balises que tu connais déjà ! En réalité, ce qui va être le plus embêtant à comprendre. C’est l’appel des fonctions et la transmission des variables qui permettent à Shopify d’appeler du contenu dynamiquement.

Houla, je crois que je t’ai perdu 🙂 Je vais faire plus simple : tu trouveras dans ces fichiers .liquid :

• Des parties de html qui permettent de découper la structure de ta page.
• Du CSS qui permet de faire un joli design. Il permet de déterminer par exemple la taille de ton écriture, la couleur et ainsi de suite.*
• Du javascript et du php, c’est en gros pour faire fonctionner ton site pour qu’il communique avec une BDD (base de données).

Une base de donnée contiendra par exemple le nom de tous tes articles, les prix, les images des produits. Ainsi, grâce au php, javascript et notamment grâce aux fonctions contenues dans ce .liquid, tu pourras chercher les données dans la base de données et les afficher sur ton site. C’est ça qui fait que dès que tu mets une promotion, tous les prix changent et c’est ce pourquoi Shopify est d’une simplicité déconcertante. Le type de fichier « .liquid » permet donc d’y écrire tout le code qui va faire fonctionner ta boutique en ligne.

Quand et pourquoi aller dans le code de Shopify ?

Seul toi le sait ! Mais en tout cas, peu de e-commerçants vont éditer le code de la boutique Shopify. Il faut vraiment que ce soit un élément très particulier qui vient gêner dans ton design de page, une incompatibilité avec une application ou que tu aies envie de détourner une fonction.

En effet, si tu as envie par exemple :

• De changer une couleur.
• Changer de police et éditer sa taille.
• De créer une page, un article, modifier une page produit.
• Changer une session, réduire la taille d’une image
• Etc.

Tout cela se fait bien plus simplement au travers de l’éditeur du thème, celui qui te permet d’agencer les différentes sessions de tes pages. Tu n’as nullement besoin d’aller dans le code informatique. D’ailleurs, je te recommande de toujours faire un double et de sauvegarder. Je connais bien trop d’élèves qui ont cherché à changer une couleur et qui ont supprimé la mauvaise ligne ! Tiens, je vais te montrer d’ailleurs un cas précis où tu as besoin d’éditer le code : afin d’enlever le fameux texte « propulsé par shopify » ou « powered by shopify ».

Je te montre comment tu peux le faire dans cette petite vidéo. C’est bien l’une des seules raisons qui devraient te pousser à aller éditer le code. Si c’est pour faire du design, l’éditeur visuel de Shopify suffira très bien et sinon, je t’invite même à installer Gempages pour créer des landing pages personnalisées comme je l’explique dans mes formations en dropshipping.

Code shopify : Comprendre la structure de base

La meilleure manière de commencer à se servir du langage de programmation code in shopify est de comprendre que c’est un langage Template. Il constitue en effet un pont entre les données que tu trouves dans le tableau de bord de shopify et les Template html shopify.

Même si tu ne comprends absolument rien de la majorité du langage, il importe que tu maîtrises quand même les variables du Template. En effet, tu auras l’accès à ces dernières et il te faut les maîtriser.

Lors de l’envoi du Template au niveau, la modification des blocs se fait par Liquid. Les deux principaux blocs qu’il te faut connaître sont entre autres :

Les doubles-parenthèses pour l’affichage ;

Le signe de pourcentage qui indique la logique.

Ces blocs sont les seules parties du langage auxquelles tu dois t’intéresser dans ce cas précis. C’est la base de la construction de Liquid.

Code shopify : Apprendre à manipuler les .liquid

Pour commencer il y a :

L’affichage

En matière d’affichage, il s’agira de mettre l’accent sur {{shop.name}}. Pas de panique, c’est quelque chose de très simple qui de permettra de changer l’output. Il te faudra juste modifier le nom de ta boutique et l’espace sera remplacé par le nouveau nom.

La logique

Il se définit par le symbole « % » qui te permettra de contrôler le rendu. Tu peux avoir par exemple une logique selon laquelle une quantité X d’un produit B est vendu. Il sera affiché comme ceci : « A en rupture de stock ». C’est ce qui rend votre site Web interactif.

Les boucles

Elles servent à afficher le même code plusieurs fois dans le Template. Par exemple, cela peut être utilisé pour afficher toutes les images associées à un produit donné. À première vue, cela peut sembler compliqué, mais c’est facile à comprendre une fois que vous commencez à l’utiliser.

Code shopify : Comment utiliser le .liquid ?

La raison pour laquelle l’apprentissage du .liquid est si important est qu’il te permet de maximiser le contrôle de ton sujet. Cela te permettra de créer le meilleur magasin qui te convient le mieux. Tu peux commencer déjà à mettre ces cours en pratique.

Choisis au hasard un thème sur Shopify, puis commence à analyser ces nombreuses parties. Tu peux donc utiliser l’aperçu de Shopify pour voir ce que tu fais sans toutefois toucher au magasin de production.

Code shopify : .liquid est-il un moteur ou un langage ?

Il n’est pas rare de voir que plusieurs personnes considèrent .Liquid comme un langage de Template. D’autres par contre préfèrent parler de moteurs. Dans l’un ou dans l’autre cas, les deux parties ont entièrement raison.

En effet, .liquid a une synthase semblable à celle de tous les langages en matière de programmations et de concepts. Ce sont entre autre la sortie (output), la logique et les boucles. Par ailleurs, il interagit avec des données comme les langages Web (comme PHP).

Compte tenu de sa conception, .Liquid peut faire beaucoup de choses. Par exemple, le concept d' »état » n’existe pas. Il ne permet pas d’accéder aux différentes couches de la plateforme et parfois il semble contre-intuitif même aux développeurs expérimentés. Mais .Liquid a été bien pensé. D’ailleurs, ce qui semblait défectueux au départ s’est avéré être choisi volontairement pour de bonnes raisons.

Est-il pratique d’utiliser Liquid dans Shopify ?

Nul ne peut nier que la création d’un thème shopify sans aucune base prend énormément de temps. Toutefois, tu n’es pas obligé de le faire.

Pour le propriétaire moyen d’une boutique en ligne, apprendre les bases de Liquid peut lui permettre d’apporter des modifications mineures au thème standard.

Même les petits changements peuvent rendre votre boutique en ligne unique. La recherche montre que cela peut faire une grosse différence dans les ventes.

Code shopify : Quelle est l’utilité du .liquid ?

Le .liquid ou Liquid constitue comme dans tout langage un pont entre un fichier html et un ensemble de données. Il s’agit bien évidemment ici d’une boutique shopify et pour cela Liquid donne accès aux variables du Template ou d’un fichier Liquid en utilisant une synthase facile à lire et à utiliser.

Avec shopify chaque fichier Liquid permet facilement d’accéder à des variables. Par exemple, le modèle product.liquid permet d’accéder à toutes les données liées au produit sélectionné.

D’autre part, .liquid peut afficher ces données sans avoir à obtenir au préalable des informations sur le produit. Ces variables sont des variables de Template. Ainsi, tu peux te servir du .liquid pour appeler des données auxquelles shopify ne peut accéder.

Par exemple, tu peux demander à Shopify d’utiliser tous les produits d’une collection spécifique pour remplir les variables que tu crées. Une fois que tu as le nom de la variable à laquelle tu désires accéder ou créer, tu pourras alors te servir de la structure Liquid (telle que « sortie » ou « boucle ») pour afficher les données dans le fichier Liquid.

Shopify identifiera alors les données à obtenir et le format des données affichées en fonction du code Liquid du thème. Cela peut simplement afficher le nom du produit, ou quelque chose de plus compliqué, comme l’affichage d’une série d’images liées au produit.

L’avantage principal d’un langage de Template comme .liquid est que le concepteur n’a nullement besoin de savoir quoi que ce soit sur le magasin sur lequel il travaille. Ainsi, les thèmes que vous aurez choisis seront compatibles à 100 %.

Tu peux donc les appliquer sur d’autres boutiques sans au préalable avoir connaissance du contenu des boutiques.

Code shopify : Les différents filtres Liquid

Les filtres constituent d’intéressantes fonctionnalités du Liquid. Ces filtres ont principalement trois fonctions. Ils permettent dans un premier temps de modifier et de traiter le format des données de sortie.

Ils ont ensuite pour fonction de rendre les thèmes accordables. Cela permet aux designers de gagner du temps en diminuant la quantité de code qu’ils auront à écrire. Les filtres du Liquid sont toujours attachés aux informations de sortie.

Pour citer pêle-mêle ces différents filtres, il y a les filtres date, asset_url, style.cssasset_url, stylesheet_tag, script_tag. Il y a également pluralize, replace, money, money_with_currency. Ces différents filtres vous seront d’une grande utilité.

Les différents opérateurs

Tu as sans doute remarqué la constance de l’opérateur « supérieur à »>. Si la variable cart.item_count renvoie le nombre d’articles dans le panier de l’utilisateur, il est donc possible de savoir si le nombre est supérieur à zéro, afin de savoir s’il y a des articles dans le panier.

Si la réponse est ‘’true’’ (et donc correcte), un message indiquant le nombre d’articles dans le panier sera affiché. Par ailleurs, il existe une grande variété d’opérateurs de comparaison dans le .liquid. Il s’agit :

== égal à ;

! = différent de ;

> supérieur à ;

< Inférieur à ;

>= supérieur ou égal à ;

<= inférieur ou égal à ;

or condition A ou condition B ;

and condition A et condition B ;

Etc.

Il est possible de modifier et de changer le code de chaque thème que tu auras choisi. Cela te permettra d’apporter de plus amples modifications à ta boutique en ligne.

En réalité, la majorité des fichiers qui entrent dans la composition d’un thème est composée de Liquid. Ce dernier est comme tu le sais déjà le langage de Template de shopify. Ces dits fichiers sont aussi constitués de (HTML, CSS, JavaScript).

Nous voilà à la fin, j’espère que cet article t’as aidé à mieux comprendre comment éditer un code dans shopify afin d’utiliser aisément les .liquid. Je te retrouve très prochainement pour un numéro plus intéressant et plus instructif.