Comment Ă©diter le code dans Shopify et utiliser les .liquid ? đź’Ž

Comment Ă©diter le code dans Shopify et utiliser les .liquid ? đź’Ž

Cette image représente un fond noir où on observe du code .liquid de Shopify. On se rend compte qu'il y a du html, du css, du js et du php dans ces fichiers .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 ou un autre language ? 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 bien entendu, 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 language 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 partie 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 ecommerç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.
  • De 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 faire ça dans cette petite vidĂ©o. C’est bien l’une des seules raisons qui devrait 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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *