Bonjour à toi, je te souhaite la bienvenue sur le site Full Stack Entrepeneur.

Moi c'est Thomas, je suis le fondateur de la chaîne youtube Thomas Giraud. Ma mission est simple, te permettre de tout modifier sur ton site shopify.

Si tu utilises Shopify tu dois te rendre compte que ton thème est limité, dans la mesure où tout n'est pas personnalisante.

Et c'est ici que j'interviens. Je vais t'appendre (sans que tu n'es besoin d'avoir aucune base en code) à modifier tout ce que tu veux sur ton site Shopify en passe par le code.

Si tu veux aller plus loin pour retourner littéralement ton thème Shopify, et pouvoir tout personnaliser à ta guise tu peux rejoindre ma formation gratuite en cliquant sur le bouton juste en dessous.

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

Sinon si tu veux juste changer la couleur de fond d'une section Shopify suit bien ce tutoriel pas à pas.

Let's Go !

Étape 1 : trouver ta section Shopify

Pour cela tu vas utiliser la console sur Google Chrome. Oui Google Chrome seulement.

Une fois que tu es sur la page qui contient la section que tu veux modifier tu fais un clic droit au niveau de ta section.

Un petit menu déroulant va apparaître, à ce moment là tu vas choisir : inspecter l'élément.

Dans mon exemple le nom de ma section est :

feature-row.liquid

Étape 2 : Se rendre sur le back office Shopify

Une fois que tu as trouvé le nom de ta section grâce à l'inspecteur d'élément, tu dois te rendre dans cette même section depuis le back office shopify.

Pour cela rendre doit sur ton back office (tonsite/admin).

Ensuite tu dois te rendre sur :

• Boutique en ligne
• Thème
• Section
• Nom de ta section

Étape 3 : trouver l'identifiant de la section à modifier

Félicitations, vous êtes maintenant sur la bonne section Shopify pour changer la couleur de fond de ta section Shopify.

Reste maintenant à trouver le nom de l'identifiant de ta section ! Pourquoi ? Car un identifiant est unique, ainsi tu modifieras la couleur de fond de seulement la section qui t'intéresse et pas de toutes les autres.

Pour trouver l'identifiant de ta section rend toi à nouveau sur la page qui comporte ta section. Clique doit sur ta section et à nouveau inspecter l'élément. Tu trouveras un identifiant de ce genre :

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

Tu n'as plus qu'à copier l'élément de ton identifiant et à te rendre à l'étape 4

Étape 4 : modifier la couleur de fond de ta section

Ça y est tu as copier l'identifiant de ta section et tu as bien trouvé le dossier de ta section dans ton back office.

Tu dois maintenant intégrer quelques lignes de code tout en haut de la section de ton back office pour pouvoir changer la couleur de fond de ta section :

{%style%}
              #shopify-section-feature-row (tu mets le nom de ta section){
              background-color:red (tu mets la couleur de ton choix)
              }
              {%enstyle%}

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

Le CSS et le language de code qui te permet de modifier le design d'une .class ou d'un #id.

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-color: red est le code CSS qui te permet de changer le style de ton identifiant.

Tu peux aussi voir comment ajouter un dégradé de couleur de fond à une section sur Shopify en cliquant sur ce lien.

Tutoriel vidéo pour changer la couleur de fond d'une section sur Shopify

En résumé

Donc pour résumer pour changer la couleur de ta section tu dois :

• Trouver le nom de ta section
• Te rendre sur ta section depuis ton back office Shopify
• Trouver l'identifiant de ta section
• Appliquer le code CSS sur l'identifiant de ta section dans le fichier de ta section

J'espere que ce tutoriel t'auras permis de changer le fond de ta section. Si tu as rencontré des problèmes n'hésite pas à commenter, j'essayerai de te recontacter au plus vite pour t'aider.

C'était Thomas ! Salut