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; }

Ce tutoriel existe aussi en vidéo

Bon tuto à tous

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

Cet article a 16 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 🙂

  5. Super simple à comprendre mais… Je n’ai pas réussi sur Speedly … Peux tu m’aider ? MERC 😀

  6. Je viens de comprendre, je m’étais trop d’espaces. Cependant j’aimerai faire le dégrader sur mon header la ou se trouve mon menu principal, tu as une astuce, l’identifiant « header » ne fonctionne pas. Merci 🙂

    1. Ok, il faudrait rependre la main dessus car y a pas d’identifiant mais une classe donc mettre ça .cont-header { …

      1. Pour le header
        header.site-header {background-color: #EEECD5;}
        .site-header__mobile-nav { background-color: #EEECD5 !important;}

  7. Hi,
    Tout simplement comme je galérai avec le header je n’avais pas touché au css des autres parties…
    Maintenant que j’ai compris, je m’amuse comme un fou et fais une page d’accueil à la façon GANTRY
    avec des transitions et autres. Du coup j’en oublie l’essentiel: le contenu.
    Merci

    1. Hehe bravo ! oui c’est le risque à force de s’amuser on oublie le plus important 😀

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

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

S'abonner à la chaine