Nous allons voir dans ce tutoriel comment créer un système de dégradé sur Shopify. Ceci va permettre de se différencier de la concurrence et s’éloigner de l’aspect trop dropshipping de Shopify, tous les coups sont permis pour innover 😉

Vous pouvez voir le résultat sur le site de démonstration

 

Comprendre son navigateur

Avant toute chose il va falloir comprendre comment fonctionne son navigateur et afficher les outils dédiés aux développeurs.

Si vous êtes sous chrome et sur Windows cliquez sur la touche F12 de votre clavier. Si vous utilisez un Mac: fn + F12.

A ce stade vous allez voir apparaitre une fenêtre en bas ou sur le coté comme l’exemple ci-dessous:

Cliquez sur la 1ère icône à gauche, un carré avec une flèche dedans.

Ensuite vous allez sélectionner une zone de votre site ou vous souhaitez créer un effet de dégradé, généralement une sur-brillance bleu se mettra sur vos différents éléments selon la position de votre souris.

Une fois la zone déterminée cliquez dessus et vous allez dans la fenêtre de développement sur l’onglet « Eléments ». Vous allez avoir un élément du DOM (balise html sélectionnée) qui va se mettre en sur-brillance. vous allez repérer l’attribut « id= » et copier son identifiant en double cliquant dessus, ça va ressembler à ceci : « shopify-section-1575454112847 ». C’est sur cet élément que nous allons travailler.

Installation et choix du code

Rendez-vous dans « Boutique en ligne – Actions – Modifier le Code » – Trouvez le dossier « Assets ». Dans ce dossier vous allez devoir trouver votre fichier « xxx.scss.liquid ». Généralement un « theme.scss.liquid, style.scss.liquid, timber.scss.liquid » bref un truc du genre 😉

Vous allez prendre un des codes ci-dessous et remplacer « l’identifiant » par votre sélection pour avoir un truc de ce genre: « #shopify-section-1575454112847 {…} ».

Types de dégradé

Ces exemple sont basé sur un dégradé de rouge à noir.

De haut en bas

#identifiant { background: linear-gradient(90deg, #a91111, #000000) !important; }

De gauche à droite

#identifiant { background: linear-gradient(#a91111, #000000); }

Jouer sur les obliques

Vous pouvez jouer de le % d’inclinaison en changeant la valeur 45deg.

#identifiant { background: linear-gradient(45deg, #a91111, #000000); }

Un effet radial (rond central en dégradé)

Exemple sur du rouge et noir pour bien voir l’effet

#identifiant { background: radial-gradient(#a91111, #000000); }

Effet pétage de plomb à la mode Mire des TV des années 70 😅

#identifiant { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); }

Comment personnaliser les couleurs ?

Il vous suffit de remplacer les 2 couleurs hexadécimales en trouvant leurs valeurs sur le site suivant: https://htmlcolorcodes.com/fr/

Exemple de HEX : #0AB2F6

Hack pour mettre vos textes en blanc

N’oubliez pas de changer l’identifiant 😉

#identifiant * { color:FFFFFF !important; }

Vous aurez bientôt la version vidéo qui sera plus simple à comprendre 😉

Bon tuto à tous

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation