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(#a91111, #000000); }

De gauche à droite

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

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

Cet article a 8 commentaires

  1. BOnsoir et merci pour ce tuto,
    doit ton mettre le code en bas de page ?
    si oui pour moi cela ne fonctionne pas, j’utilise JUMPSTART
    Asset – theme.scss.liquid

    merci en otus cas pour tous tes tutos qui mon permis d’ameliorer ma boutique pour 0€ (du temps par contre)

    1. Bonsoir, le code en bas de page ? si tu parles du code css oui dans le theme.scss.liquid 🙂

  2. On attend la vidéo avec impatience !
    Merci encore pour tout ces tutos grâce à toi on pourra tous bientôt créer notre propre thème

  3. Merci de ton tuto encore une fois 🙂 J’ai bien compris comment faire, par-contre je voulais mettre ce dégradé sur un texte comme toi, mais le dégradé se place derrière le texte et non dessus. J’ai bien pris l’identifiant de cette section. J’ai essayé plusieurs fois, mais ça me fait toujours pareil :/

    1. Hello, oui ça me parait normal le texte doit être visible du coup ca se met sur la div du fond.

  4. Bon j’ai réussis à mettre le dégradé juste sur mon texte, mais j’ai due l’enlever. Pour voir le texte dessus il fallait que j’enlève la couleur de fond de mon contenu, mais quand j’enlève ce fond et bien ça me l’enlève sur plusieurs éléments tels que le fond de mon sous menu, donc il devient illisible :/ J’aurais aimé si il était possible de faire juste un petit cadre avec des ombrages comme tu m’as fait pour mon sous menu, mais autour de mes textes. J’ai réussis à faire les animation de ton dernier toto. Ca rend vraiment bien.. D’où m’est venu l’idée de mettre juste un ombrage comme le sous menu. Merci d’avance 🙂

    1. Hello, j’ai répondu pour la 1ere question sur l’autre commentaire 🙂 Pour le reste ça reste hors cadre du tuto faudra voir sur le site directement car pas simple sans visuel 😉

      1. Hey. Merci de ta réponse. Oui je comprends que c’est hors sujet ma demande ^^ Dès que tu es dispo vient en mp sur fb si tu veux 🙂

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