Un utilisateur cherche à modifier la couleur des menus du header uniquement sur la page d’accueil de sa boutique Shopify (thème Sense) : texte blanc sur fond noir pour l’accueil, et texte noir sur fond blanc pour les autres pages.
Solution proposée :
header.liquid et rechercher header-wrapper{% if request.page_type == 'index' %})Résultat : La solution a été testée avec succès. Des captures d’écran illustrent la configuration et le rendu final.
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
Bonjour Nat27_,
c’est possible de le faire avec un peu de css et javascript.
Merci, mais quel bout de code faut-il entrer ?
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
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 
)
et les autres page :
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.
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).
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 :
Mille mercis pour votre aide, ça fonctionne enfin !
