Hello ! On me demande trop souvent comment ajouter une image de fond à une section Shopify. Plutôt que de me démener à répondre à tout le monde individuellement j'ai décidé de t'écrire un article.

Si tu tombes par hasard sur cet article, alors laisse moi me présenter en deux mots : Je m'appelle Thomas, je suis développeur web spécialisé sur Shopify et ma mission et de te permettre de modifier ton thèmes Shopify de A à Z en passant par le code sans avoir forcément de solides bases de développement web.

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

Identifie le nom de ta section Shopify que tu souhaites modifier

La première étape sera donc de venir trouver le nom de la section sur laquelle tu veux ajouter une image de fond.

Pour cela tu vas utiliser l'inspecteur d'élément de Google Chrome.

Si tu ne connais pas cet outil, voilà comment l'utiliser :

Rends toi sur la page qui contient le bloc que tu veux modifier (sur google chrome). Tu dois ensuite faire un clic droit sur la section en question, et là cliquer sur 'inspecter l'élément' pour accéder au code et trouver le nom de ta section.

Il est probable que le nom de ta section soit quelque chose du genre :

feature-row.liquid

Rends toi sur la section identifiée depuis le back office Shopify

Ça y est tu as réussi à trouver le nom de la section que tu souhaites modifier ! Déjà bien joué. Maintenant tu dois te rendre sur ton back office pour rejoindre cette section.

Pour cela suit ce chemin :

• mon-site.myshopify/admin
• boutique en ligne
• thèmes
• sections
• nom de ta section

Trouve l'identifiant de la section Shopify

Maintenant que tu as réussi à trouver ta section dans ton back office tu dois encore trouver le nom de l'identifiant de cette dernière.

Quelle est la différence entre le nom de ta section et l'identifiant de ta section ?

Le nom de ta section comme on l'a vu plus haut dans cet article te permet d'accéder à ta section depuis ton back office Shopify.

C'est important car c'est dans ce dossier de ton back office que tu vas pouvoir ajouter tes lignes de codes pour mettre une image de fond à ta section.

L'identifiant quant à lui te permet de cibler la section sur laquelle va s'appliquer le code. De plus un identifiant désigne une section bien spécifique.

Par conséquent le code ne s'appliquera qu'à ta section ciblée et non à toutes les sections de ta boutique shopify.

Alors comment trouver l'identifiant de ta section ?

Pour cela rien de plus simple. Il te suffira de venir sur la page de ta boutique qui contient la section que tu veux modifier.

Une fois sur cette page fait un clique droit sur la section en question (en utilisant Google Chrome) puis fait un 'inspecter élément'.

Tu auras ensuite accès au code source de ta section et tu trouveras l'identifiant de ta section dans une div probablement similaire à ci dessous :

<div id="shopify-section-feature-row">

Tu n'as plus qu'à copier l'élément de ton identifiant et à continuer à suivre le tutoriel.

Mettre une image de fond sur ta section Shopify

Let's go tu as presque terminé !

Maintenant que tu as trouvé le fichier et l'ID de ta section tu n'as plus qu'à appliquer le code suivant tout en haut du fichier de ta section :

{%style%}
              #shopify-section-feature-row (tu mets le nom de ta section){
              background:url(".jpg") (tu mets l'image que tu veux)
              }
              {%enstyle%}

Ici le code {style} te permet d'ajouter du CSS à ton identifiant.

Le CSS est le langage de code qui te permet de modifier le design d'une .class ou d'un #id, c'est à dire d'une classe ou d'un identifiant.

Le #shopify-section-feature-row est la cible de ton identifiant.

Ça signifie que tout le code que tu vas intégrer s'appliquera seulement à cet identifiant.

Enfin le background:url(".jpg") est le code CSS qui te permet de changer le style de ton identifiant.

Tu peux aussi voir comment changer la couleur de fond d'un section sur Shopify en cliquant sur ce lien.

Tutoriel vidéo pour changer l'image de fond de ta section shopify

En résumé

Donc pour résumer :

Pour mettre une image de fond à une de tes sections Shopify tu vas devoir suivre les étapes suivantes :

• Trouver le nom de ta section
• Repérer le fichier de ta section
• Trouver l'identifiant de ta section
• Intégrer ton code CSS à ton fichier

J'espère que tu as bien réussi à changer ton image de fond. Si ce n'est pas le cas regarde la vidéo juste au dessus et suis pas à pas mes actions.

En attendant si tu as des questions n'hésite pas à les poster en commentaire. Je fais tout mon possible pour y répondre le plus régulièrement possible.

C'était Thomas, à bientôt !