FROM CACHE - fr_header

Changer la couleur du header uniquement sur la page d'accueil

RÉSOLU

Changer la couleur du header uniquement sur la page d'accueil

nat27_
Touriste
4 0 1

Bonjour !

 

Je fais face à un petit soucis. J'aimerais que les menus du header (accueil, catalogue, contact, panier etc...) sur la page d'accueil soit en blanc, mais que sur toutes les autres pages, ils soient en noir.

Je me doute qu'il s'agit d'un bout de code css, mais je après avoir bien fouillé, je ne trouve pas la solution.

Je suis sur le thème Sense et voici le lien de ma boutique : https://421437-3.myshopify.com/

 

Merci beaucoup d'avance

1 SOLUTION APPROUVÉE
HenriB
Shopify Partner
20 6 5

Succès.

Bonjour,

Effectivement je suis parti sur la couleur de fond un peu trop vite !
Mais je pense que le principe reste le même :
Il faut régler dans Boutique > Personnalisé -> section Header (en-tête)
Le nuancier numéro 2 par exemple avec la couleur de texte en blanc et le fond noir
Et le numéro 1 texte noir fond blanc.

Avec le code plus haut qui fait qu'on passe la classe  "nuancier 2" sur la page d'accueil et "nuancier 1" sur les autres page ça devrait marcher.
On peut même prendre les autres nuanciers 3 4 ou 5 (si vous en avez de disponible )  pour éviter de toucher aux autres section qui ont le nuancier 2 par exemple, et changer le numéro dans la condition.

Rapidement ça peut donner cela : 

HenriB_0-1701444307928.png

 



Voir la solution dans l'envoi d'origine

6 RÉPONSES 6

rochelin_
Shopify Partner
121 13 15

Bonjour Nat27_,

c'est possible de le faire avec un peu de css et javascript.

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.
nat27_
Touriste
4 0 1

Merci, mais quel bout de code faut-il entrer ?

HenriB
Shopify Partner
20 6 5

Bonjour, 
J'ai trouver un moyen de le faire : On va aller dans le code par contre ! 

Boutique en ligne > Thèmes > Le thème Actuel : clique sur les 3 points > modifier le code 

HenriB_0-1701350506593.png

Recherche "header.liquid"

Dans ce fichier on va rechercher (avec CTRL + F) "header-wrapper"

la taille de la ligne est un peu longue désolé et elle pourrait être différentes car j'utilise le thème Dawn pour tester.

<{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">

donc on va regarder à partir d'ici  : class="header-wrapper color-{{section.settings.color_scheme}} 
et changer "color--{{...}}" en 

{% if  request.page_type == 'index' %} color-background-2 {% else %} color-{{ section.settings.color_scheme }} {% endif %}

Ce qui fait que sur la page "index" (la page accueil), on lui dit qu'on veut la class "color-background-2" sinon on reprend la class qui est sélectionnée dans l'éditeur.

ce qui nous donne pour le site : (les couleurs sont sympa 😉)

HenriB_0-1701351302549.png

et les autres page : 

HenriB_1-1701351331557.png


On peut bien sur prendre les autres version des nuancier disponible en changeant le chiffre "color-background-4" par exemple.


En espérant avoir été clair.

nat27_
Touriste
4 0 1

Bonjour,

Merci beaucoup pour réponse.

J'ai peut-être pas été assez clair, désolé. Ce n'est pas pour modifier la couleur du header, mais plutôt la couleur des menus du header.

Je souhaiterais afficher les écritures Accueil / Catalogue / FAQ en blanc sur la homepage (car le fond sera noir), et en noir sur les autres pages (car le fond sera blanc).

HenriB
Shopify Partner
20 6 5

Succès.

Bonjour,

Effectivement je suis parti sur la couleur de fond un peu trop vite !
Mais je pense que le principe reste le même :
Il faut régler dans Boutique > Personnalisé -> section Header (en-tête)
Le nuancier numéro 2 par exemple avec la couleur de texte en blanc et le fond noir
Et le numéro 1 texte noir fond blanc.

Avec le code plus haut qui fait qu'on passe la classe  "nuancier 2" sur la page d'accueil et "nuancier 1" sur les autres page ça devrait marcher.
On peut même prendre les autres nuanciers 3 4 ou 5 (si vous en avez de disponible )  pour éviter de toucher aux autres section qui ont le nuancier 2 par exemple, et changer le numéro dans la condition.

Rapidement ça peut donner cela : 

HenriB_0-1701444307928.png

 



nat27_
Touriste
4 0 1

Mille mercis pour votre aide, ça fonctionne enfin !