Symptôme

Sur un téléphone mobile, le menu hamburger (les trois barres qui ouvrent le menu) et l'icône du panier ont disparu en haut de votre boutique. Les icônes sont toujours là et fonctionnent toujours, mais elles ont la même couleur que la barre située derrière elles, ce qui les rend invisibles.

Cause

Cela se produit le plus souvent après une modification des couleurs de votre template. Un changement peut donner à l'arrière-plan de la barre d'en-tête mobile une couleur très proche de celle des icônes du panier et du menu hamburger : les icônes se fondent alors dans la barre. Rien n'est cassé et rien ne manque, les icônes sont toujours présentes et fonctionnent, vous ne les voyez simplement plus.

Solution

Donnez à la barre d'en-tête mobile sa propre couleur d'arrière-plan à l'aide d'un petit contenu personnalisé.

1. Lancez votre boutique dans ShopFactory.
2. Cliquez sur le menu déroulant "Central" -> Contenu personnalisé de la boutique.
3. Cliquez sur le bouton + (Ajouter) pour ajouter un NOUVEAU code html personnalisé dans la zone 1 du site.
4. Faites glisser le contenu du bloc de texte dans la section description.
5. En haut à droite de votre nouveau bloc de texte (HC1 ou HC2, selon le nombre de codes html personnalisés que vous avez déjà), cliquez sur l'icône EDIT (crayon).
6. Changez l'intitulé HTML : Mobile header background
7. Copiez/collez le code dans la fenêtre de contenu :

<style>
.ThemeVersion-11 .header.mobile .utils {
background: #747570;
}
</style>

8. Remplacez #747570 par le code hexadécimal de la couleur souhaitée pour la barre. Choisissez une couleur différente de celle des icônes, par exemple celle que vous utilisez ailleurs dans votre en-tête.
9. Cliquez sur OK, puis sur Terminer.
10. Enregistrez et pré-visualisez votre boutique dans un navigateur externe, sur un téléphone ou dans l'affichage téléphone de votre navigateur.
11. Publiez à nouveau votre boutique pour que la modification soit en ligne.

Remarques

• Si votre téléphone affiche encore l'ancienne couleur, actualisez la page ou videz le cache du navigateur. Une modification publiée peut mettre quelques minutes à apparaître.
• Le même bloc définit la couleur de la barre d'en-tête mobile en général : vous pouvez donc aussi l'utiliser pour donner à l'en-tête mobile exactement la même couleur que la version bureau de votre site.

Articles associés

• Comment modifier la couleur du texte blanc sur fond blanc ou noir sur fond noir (la partie E concerne la barre du logo mobile)
• Ajouter du code HTML personnalisé à une page ou à l'ensemble du site