Salut à toi ! Tu cherches à ajouter un dégradé de couleur de fond à une section Shopify ? Cet article est fait pour toi !

Mais avant de commencer laisse moi me présenter. Je suis Thomas Giraud, le fondateur de Full Stack Entrepreneur. J'ai suis développeur Web.

Après avoir fait l'école 42, j'ai décidé de partir vivre à Malte pour me consacrer à plein temps à ma passion : former les entrepreneurs au web.

Je me suis très vite spécialisé sur Shopify car je suis tout simplement tombé amoureux de ce CMS, si facile et efficace dans son utilisation.

Ce que je te propose, c'est de venir apprendre à coder sur le thème de ton site Shopify. Tu pourras ainsi améliorer sa performance et son apparence.

Si tu te sens déjà chaud pour aller plus loin 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 es là juste pour créer un dégradé de couleur de fond à ta section Shopify, lis cet article bien attentivement.

C'est parti !

Comment trouver la classe de ta section Shopify à modifier ?

Il existe un outil formidable pour identifier les éléments du code de n'importe quelle section sur Shopify.

Cet outil s'appelle l'inspecteur d'élément. Il est disponible uniquement sur Google Chrome cependant.

Alors tu dois donc te rendre sur la page qui contient la section que tu souhaites personnaliser. Tu fais un clic doit sur la section et là tu vas venir cliquer sur 'inspecter l'élément'.

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

feature-row.liquid

Comment se rendre sur la section à modifier sur le back office Shopify ?

Maintenant que tu as identifié le nom de ta section, rendez vous sur ton back office shopify (site.myshopify.com/admin).

Ensuite pour te rendre sur ta section :

boutique en ligne / thèmes / section / nom de ta section

Comment trouver l'identifiant de ta section Shopify ?

Alors maintenant que tu as réussi à te rendre sur ta section, tu vas devoir trouver son identifiant.

Oui l'identifiant est différent du nom de ta section dans la mesure ou le nom de ta section t'a permis de son dossier alors que l'identifiant te permettra de cibler ta section pour y appliquer ton code.

Un identifiant te permettra d'appliquer ton code à une seule section bien spécifique.

Si tu veux tout comprendre au code shopify je te conseille vraiment de suivre ma formation gratuite en cliquant sur le bouton juste en dessous :

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

Pour trouver l'identifiant de ta section rends toi sur la page qui comporte ta section (en utilisant Google Chrome) et fait un clique droit sur ta section.

Tu vas ainsi tomber sur un identifiant du type :

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

Copie cette section et passe à l'étape suivante !

Comment créer le dégradé sur ma section Shopify ?

Voilà tu y es ! Maintenant que tu as bien identifié le fichier de ta classe sur ton back office et que tu as trouvé l'identifiant de ta section tu n'as plus qu'à intégrer ces quelques lignes de code CSS tout en haut du fichier de ta section.

Ce que tu veux c'est créer un dégradé de fond. Le code CSS à utiliser est le suivant :

{%style%}
              #shopify-section-feature-row (tu mets le nom de ta section){
              background: linear-gradient(blue, white) (tu mets les couleurs 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 (en l'occurence à ta section).

Enfin le linear-gradient est le code CSS qui te permet de changer le style de ton identifiant.

Tu peux aussi voir comment ajouter une image de fond sur une section Shopify en cliquant sur ce lien.

Tutoriel vidéo mettre un dégradé de fond sur une section Shopify

En résumé

Pour résumer tout ce qu'on vient de voir dans cet article, pour créer un dégradé de fond sur une section de ton site Shopify tu devras :

• 1 : Trouver le nom de ta section
• 2 : Trouver le fichier de ta section
• 3 : Trouver l'ID de ta section
• 4 : Ajouter le code CSS en haut du fichier de ta section

J'espère que ce petit tuto t'aura été utile.

Si tu as des questions, n'hésite pas à me les poser en commentaire. J'essaye d'y répondre régulièrement.

A très vite pour un futur tuto Shopify !

C'était Thomas, CIAO