Si votre site Web de bureau affiche une icône hamburger (☰) au lieu de liens de navigation visibles, ce guide vous aidera à passer à une disposition de menu horizontale (étendue).
Qu'est-ce qu'un menu de hamburgers ?
Le menu hamburger est l'icône à trois lignes (☰) qui se développe pour afficher des liens de navigation lorsqu'on clique dessus.
Il est couramment utilisé sur les appareils mobiles car il permet de gagner de la place sur les petits écrans. Sur ordinateur, en revanche, un menu hamburger signifie que la navigation est réduite au lieu d'être entièrement visible.
Qu'est-ce qu'un menu horizontal (navigation étendue sur le bureau) ?
Un menu horizontal (également appelé navigation de bureau étendue) affiche tous les liens de navigation principaux sur une même ligne en haut de la page.
Exemple :
Accueil | Boutique | À propos | Contact
Cette mise en page :
- Rend la navigation immédiatement visible
- Améliore la clarté pour les nouveaux visiteurs
- Réduit le risque que les clients manquent des pages importantes
- Améliore souvent l'ergonomie sur ordinateur.
Bien que les menus hamburger permettent de gagner de la place, ils peuvent masquer des catégories importantes. Si les visiteurs ne cliquent pas sur l'icône, ils risquent de ne jamais voir le menu complet.
Pour la plupart des boutiques d'applications sur ordinateur, une disposition de navigation horizontale est recommandée.
Comment passer d'un menu hamburger à un menu horizontal
Suivez les étapes ci-dessous pour passer de la navigation de votre bureau réduite (menu hamburger) à la navigation développée (horizontale).
Étape 1 : Configurer la structure de votre menu
- Accédez à l'administration Shopify.
- Accédez à Contenu → Menus.
- Ouvrez Menu (ou le menu associé à votre en-tête).
- Ajouter, supprimer ou réorganiser les éléments du menu selon les besoins.
- Faites glisser légèrement les éléments vers la droite pour créer une structure déroulante.
- Cliquez à nouveau sur Enregistrer.
Étape 2 : Modifier le type de menu en Horizontal
- Allez dans Boutique en ligne → Thèmes.
- Cliquez à nouveau sur Personnaliser sur votre thème actif.
- Ouvrez le En-tête .
- Localisez le Type de menu multiculturel.
- Modifiez-le en :
Déroulante (recommandé pour les magasins simples), ou
Mega menu (recommandé pour les magasins proposant de nombreuses catégories).
- Cliquez à nouveau sur Enregistrer.
Étape 3 : Activer l’en-tête Shopify dans GemPages
Si vous utilisez GemPages pour créer votre page, vous devez vérifier que l'en-tête du thème Shopify est activé.
Même si vous modifiez correctement le type de menu en menu déroulant ou méga menu dans les paramètres de votre thème, la navigation n'apparaîtra pas si l'en-tête Shopify est masqué dans GemPages.
Pour vérifier ceci :
- Ouvrez la page dans le Éditeur GemPages.
- Cliquez sur Paramètres (icône d'engrenage) dans la barre d'outils supérieure.
- Activer Afficher l'en-tête et le pied de page du thème Shopify.
- Enregistrer et Publier la page.
Votre menu horizontal statique devrait désormais apparaître de manière cohérente sur les pages Shopify et GemPages.
Merci pour vos commentaires