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 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

Fermer le menu