Salut à toi et Bienvenue sur le blog FullStack Entrepreneur.
Je me présente, je m'appelle Thomas et je suis :

  • Développeur
  • Formateur
  • Expert Shopify

Sur ce blog, je vais t'aider à créer des boutiques incroyables en cassant littéralement Shopify en deux (oui monsieur).

Je m'explique, la grande majorité des entrepreneurs utilisent Shopify uniquement comme un simple CMS. C'est à dire qu'à partir d'un thème ils vont pouvoir :

  • Remplacer leurs images
  • Utiliser leurs couleurs
  • Mettre leurs textes

Mais dès lors qu'ils veulent personnaliser leur site au delà de ce que peut leur permettre leur thème, ça bloque...

Rassure-toi... Tu es tombé entre de bonnes mains. Ici je vais te montrer comment personnaliser ta boutique Shopify de A à Z.

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

Pourquoi modifier le code de ma boutique Shopify ?

Premièrement, comme tu l'as compris dans l'introduction : Modifier le code de ta boutique Shopify va te permettre de la personnaliser complètement, bien au delà de que ton thème peut te permettre de faire.

Deuxièmement, il faut noter que ce tutoriel s'applique sur tous les thèmes qui existent ! Pourquoi ? Car tous les thèmes doivent avoir la même structure de fichiers et de dossiers sur Shopify. C'est une règle instaurée par Shopify.

De quoi est composé le code de ta boutique Shopify ?

La première question qu'il faudra se poser est tout simplement : quel est le code utilisé sur une boutique Shopify.

Petite parenthèse, cela concerne bien tous les thèmes Shopify.

Alors tout d'abord, tu pourras retrouver du HTML.

Pour rappel, le HTML est un langage très simple (presque enfantin) qui va te permettre de structurer ta page. Si tu n'y connais vraiment rien tu peux toujours accéder à ma formation gratuite "mets un terme à 80% de tes problèmes sur Shopify".

On retrouve donc dans ce fichier theme.liquid : 

<html>
                </html>

C'est à dire une balise ouvrante <html> et une balise fermante </html>. C'est entre ces deux balises que tu trouveras tout le code HTML de ta page. Car elles définissent le début et la fin de ta page web.

Au sein de ces balises, tu trouveras des sous balises : 

<head>
                </head>

Ces balises head sont les balises qui vont appeler les grands outils externes au HTML sur ta page. Par exemple, c'est ici que tu viendras intégrer ta balise analytics pour tracker ton site. (si tu l'as pas encore fait, fait le maintenant !)

Tu trouveras aussi la balise body : 

<body>
                </body>

C'est entre ces balises Body qu'il y aura tout le contenu de ta page.
Enfin, sur Shopify tu y trouveras :

  • Les sections
  • Les snippets
Le HTML est la porte d'entrée de ton code sur Shopify

C'est quoi les sections Shopify ?

C'est tout simplement une partie de ta page. Par exemple tu pourras retrouver la section produit, la section avis, etc...

Donc pour rappel les sections se trouvent dans les Templates (pages) qui sont appelés à l'intérieur de la balise Body qui elle même se trouve dans le fichier theme.liquid.

Et dans ces sections tu retrouveras les snippets.

Mais c'est quoi les Snippets !?

Tout doux. Tu verras tout va bien se passer.

Les Snippets c'est tout simplement des morceaux de code appelées par les sections (comme nous l'avons vu plus tôt).

Un snippet c'est quelque chose qui va se répéter. C'est un morceau de code réutilisable qui peut être appelé par plusieurs sections.

Si tu veux en savoir plus sur la partie dynamique, tu peux directement retrouver les détails sur mon article : Apprendre le .liquid en 10 minutes.

Donc en fait tous les éléments dynamiques (qui se répètent) sont isolés dans des snippet.

Voici une liste d'exemple non exhaustive d'éléments dynamiques :

  • Le bouton ajout panier
  • Les variantes du produit

Pourquoi ? Car on va utiliser le bouton ajout panier ou les variantes du produit à plusieurs endroits :

  • La section produit en vedette
  • Les pages produit
  • Sous les produits d'une collection
  • Etc...

Tu ne comprends rien ? Pas de panique, laisse moi encore 5 minutes de théorie et on passe à la pratique (sous format vidéo en plus).

Comment accéder au code de ma boutique Shopify ?

Pour ce faire rien de plus simple. Rends-toi sur ton back-office (monsite.myshopify.com/admin).

Ensuite rends-toi sur "boutique en ligne / thème" puis "Actions" > "Modifier le code".

Ici tu auras accès à tout ton code soigneusement rangé dans différents fichiers :

  • Layout
  • Template
  • Section
  • Snippets
  • Assets
  • Config
  • Locales
Je te conseille de te balader sur tes fichiers directement depuis ton Back Office

Le Dossier Layout

Le dossier Layout est le dossier central de ton site web. C'est dans ce dossier que tu trouveras ton fichier theme.liquid qui contient la structure de ton code HTML. Tu auras donc ton <body> et ton <head>.

Toutes les balises HTML sont statiques. Mais tu verras que dans ta balise <body> tu trouveras le code suivant :

content_for_layout

content_for_layout appelle les fichiers contenus dans le dossier Template (oui, tes pages). C'est donc pour cette raison que ta page affiche ton template.

Les autres Dossiers

Maintenant que tu as compris que le dossier layout appelle le dosser template grâce à la balise content_for_layout. Tu comprendras que c'est exactement la même logique en cascade pour tes autres fichiers :

  • Le layout appelle le template
  • Le template appelle les sections
  • Les sections appelle les snippets

Ensuite tu as le dosser Assets qui concerne

  • Le javascript (l'animation de ton site)
  • Le CSS (le style de ton site)

Et après il y a le dossier config qui contrôle :

  • Tous tes paramètre de thème (Les paramètres généraux que tu peux modifier depuis l'interface de personnalisation),
  • Tout ce que tu as modifié dans ton site,
  • Les traductions (mais ça on s'en fou un peu)
Je te recommande de te former au HTML CSS avant de te plonger de ton code Shopify

Comment trouver une section sur ma boutique Shopify ?

Maintenant je vais te montrer dans cette vidéo à partir de 6 minutes 32 dans un cas pratique comment tu vas pouvoir identifier ta section pour ensuite venir la modifier directement dans ton éditeur de thème :

En résumé

Tu vois qu'il n'est pas si compliqué d'accéder à ton code shopify, et de comprendre le tenants et aboutissants de tes sections sur ton back-office.

Cependant je te mets en garde, si tu es un jeune padawan, t'aventurer sans connaissance dans le code de Shopify pourrait être une prise de risque... Voir pire, tu pourrais littéralement casser ton code (oups).

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

C'était Thomas,

A la prochaine !

Informations