Un menu de navigation sur ordinateur créé dans une application de menu ne vaut que par la structure qui le sous-tend. En esquissant un arbre à trois niveaux, en construisant des colonnes plutôt que des listes interminables, en choisissant délibérément le survol ou le clic et en publiant la barre au bon endroit sous votre en-tête, l’exploration de votre catalogue devient fluide.
Pour les marchands gérant un catalogue en expansion, un menu horizontal bien ordonné offre des repères immédiats. Les clients ne devraient jamais avoir à deviner l’emplacement des collections ni à parcourir des listes saturées. En disposant des colonnes aérées sous votre en-tête, vous offrez un accès visuel direct à vos collections sur ordinateur.
Réponse rapide : comment créer un menu de navigation sur ordinateur dans une application de menu Shopify
Pour créer un menu de navigation pour ordinateur dans une application de menu Shopify, commencez par esquisser un arbre de menu comprenant jusqu’à trois niveaux, activez l’intégration d’application dans votre thème, construisez les éléments de premier niveau et les colonnes déroulantes, définissez le déclenchement au survol ou au clic, puis publiez la barre sous votre en-tête ou à la place du menu natif avant de tester chaque résolution d’écran.
- Planifier l’arbre de menu : Cartographiez jusqu’à trois niveaux sur papier avant d’ouvrir l’application.
- Activer l’app embed : Activez l’extension Store Connector dans l’éditeur de thème Shopify.
- Ajouter les éléments de niveau 1 : Créez un Desktop Mega Menu et définissez vos liens horizontaux principaux.
- Construire les colonnes déroulantes : Activez le mode multicolonne et équilibrez les largeurs.
- Publier sous l’en-tête et tester : Sélectionnez Insert After ou Replace et vérifiez l’affichage sur ordinateur.
La suite de ce guide détaille chaque étape dans Navi+, avec les difficultés courantes et leurs solutions.
Ce qu’une application de menu apporte au menu d’ordinateur de Shopify
Shopify propose des outils de navigation fiables, mais leurs options de présentation dépendent de votre thème. D’après le Centre d’aide Shopify, un élément de menu principal peut contenir jusqu’à deux niveaux de menus déroulants imbriqués. Shopify précise également que l’emplacement et l’affichage de vos menus varient selon le thème actif.
Certains thèmes Shopify intègrent leurs propres paramètres de méga menu. Si votre thème offre déjà la mise en page multicolonne souhaitée, l’utilisation de ses réglages natifs reste la voie la plus simple. Le tutoriel ci-dessous illustre le fonctionnement avec un thème :
If your theme already has a mega menu, this walkthrough shows the theme-only route.
Cependant, lorsqu’un catalogue s’étoffe, les menus natifs des thèmes montrent vite leurs limites. Une application dédiée apporte plusieurs atouts pratiques :
- Des largeurs de colonnes personnalisables sur une grille flexible à 12 colonnes.
- Des vignettes visuelles de collections insérées directement dans les volets déroulants.
- Un contrôle précis du mode d’ouverture, au survol ou au clic.
- Des options d’accroche pour positionner la barre au-dessus, au sein ou en dessous de l’en-tête.
Comme le montrent les recherches en ergonomie du Nielsen Norman Group, une disposition bidimensionnelle en méga menu permet aux visiteurs d’embrasser l’ensemble des choix d’un seul coup d’œil, sans avoir à mémoriser des rubriques enfouies dans des cascades profondes. Pour évaluer où s’arrêtent les réglages natifs, consultez notre analyse sur les limites du menu de thème natif Shopify.
Planifier d’abord l’arbre du menu : niveau 1, colonnes et liens
Avant de configurer l’application, esquissez votre arborescence sur papier ou dans un tableau. Un méga menu d’ordinateur lisible s’organise selon un arbre à trois niveaux :
- Niveau 1 (Barre principale) : Les catégories horizontales visibles sur l’en-tête. Visez cinq à sept éléments pour que la barre tienne sur un écran d’ordinateur portable sans passer sur deux lignes.
- Niveau 2 (Colonnes) : Les en-têtes de colonnes au sein du volet déroulant. Regroupez-les selon les habitudes d’achat : typologie de produit, public cible ou occasion.
- Niveau 3 (Liens) : Les collections, pages ou fiches produits individuelles sous chaque en-tête de colonne.
Lors de l’organisation de ces niveaux, faites preuve d’une grande rigueur. Selon le Nielsen Norman Group, les menus de navigation doivent être élagués encore plus strictement que les pages elles-mêmes. Chaque lien superflu augmente la charge cognitive et ralentit le balayage visuel. Choisissez des libellés courts et ne conservez des visuels que s’ils représentent de véritables options de navigation, à l’image d’une carte de collection mise en avant.
Voici un exemple d’arborescence équilibrée à trois niveaux :
Femmes (Niveau 1)
├── Vêtements (Colonne Niveau 2 - Largeur : 3/12)
│ ├── Robes & Combinaisons (Lien Niveau 3)
│ └── Hauts & T-shirts (Lien Niveau 3)
├── Chaussures (Colonne Niveau 2 - Largeur : 3/12)
│ ├── Bottes & Talons (Lien Niveau 3)
│ └── Baskets (Lien Niveau 3)
├── Accessoires (Colonne Niveau 2 - Largeur : 3/12)
│ ├── Sacs à main (Lien Niveau 3)
│ └── Bijoux (Lien Niveau 3)
└── En vedette (Colonne Niveau 2 - Largeur : 3/12)
└── [Vignette Nouvelle Saison] (Niveau 3)
Hommes (Niveau 1)
├── Prêt-à-porter (Colonne Niveau 2 - Largeur : 4/12)
│ ├── Chemises & Polos (Lien Niveau 3)
│ └── Pantalons & Chinos (Lien Niveau 3)
└── Chaussures (Colonne Niveau 2 - Largeur : 4/12)
└── Chaussures de ville (Lien Niveau 3)
Accessoires (Niveau 1)
├── Petite maroquinerie (Colonne Niveau 2 - Largeur : 6/12)
└── Ceintures & Écharpes (Colonne Niveau 2 - Largeur : 6/12)
Soldes (Niveau 1 - Lien direct)
Pour découvrir d’autres structures adaptées, parcourez notre guide sur les bonnes pratiques d’agencement et de regroupement des méga menus.
Étape 1 : Installer Navi+ et activer l’app embed
Installez Navi+ depuis le Shopify App Store.
Navi+ se charge via une intégration d’application (app embed) du thème : vous devez l’activer avant que tout menu créé ne devienne visible sur votre boutique.
- Dans l’administration Shopify, accédez à Boutique en ligne > Thèmes.
- Si votre boutique reçoit du trafic, cliquez sur les trois points à côté de votre thème actif et sélectionnez Dupliquer. Travailler sur une copie permet de construire, styliser et tester votre menu en toute sécurité sans perturber vos acheteurs.
- Cliquez sur Personnaliser sur le thème dupliqué pour ouvrir l’éditeur de thème.
- Dans la barre latérale gauche, cliquez sur l’icône App embeds, comme l’explique le guide du Centre d’aide Shopify sur les extensions de thème.
- Repérez Store Connector dans la liste et activez l’interrupteur sur la position Activé.
- Cliquez sur Enregistrer en haut à droite.
Gardez à l’esprit que les intégrations d’applications sont associées à un thème spécifique. Si vous changez de thème ou mettez à niveau votre version ultérieurement, n’oubliez pas d’ouvrir l’éditeur et d’activer à nouveau Store Connector dans le nouveau thème.
Étape 2 : Créer un Desktop Mega Menu et ajouter les éléments de niveau 1
Une fois l’intégration active, ouvrez le tableau de bord Navi+ dans votre administration Shopify.
- Créez un nouveau menu et sélectionnez Desktop Mega Menu comme type de menu. Vous pouvez partir d’un modèle ou d’une page vierge.
- Si vous choisissez un modèle, supprimez les éléments prédéfinis qui ne correspondent pas à votre plan initial.
- Ajoutez vos éléments de niveau 1 un par un en suivant votre arborescence.
- Glissez-déposez les éléments vers le haut, le bas, la gauche ou la droite pour définir leur ordre et leur hiérarchie parent-enfant. Le déplacement vertical modifie l’ordre d’affichage ; le déplacement horizontal permet d’imbriquer les sous-éléments sous une catégorie parente.
- Associez une URL de destination valide à chaque élément de premier niveau. Même si un élément ouvre un volet multicolonne, reliez-le à une page de collection globale pour orienter les visiteurs qui cliqueraient sur l’en-tête principal.
Step 3: Build dropdown columns, links, and images
Transformez à présent vos longues listes de liens en colonnes claires et faciles à parcourir.
Figure 1 : Illustration conceptuelle (Concept illustration) — Step 3: Build dropdown columns, links, and images {#step-3-build-dropdown-columns-links-and-images}
- Sélectionnez un élément de niveau 1 nécessitant un volet étendu et cochez l’option intitulée Is Multi-Column menu item. Ce paramètre convertit immédiatement ses éléments enfants directs (niveau 2) en en-têtes de colonnes.
- Sous chaque en-tête de colonne, ajoutez vos liens de destination de niveau 3.
- Définissez la largeur de chaque colonne sur la grille à 12 colonnes de l’application. Pour un volet à quatre colonnes, assignez des largeurs telles que 3/12, 3/12, 3/12 et 3/12. Pour un menu à deux colonnes, attribuez 6/12 à chacune.
- Si un sous-menu ne comporte que quelques liens, ajustez le paramètre de largeur de sous-menu multicolonne dans vos options de mise en page afin d’éviter un espace vide démesuré. Pour un élément n’ayant que trois ou quatre liens, un menu déroulant classique à une colonne est plus adapté qu’un panneau trop vaste.
- Apportez du dynamisme en intégrant une vignette visuelle de collection cliquable dans la colonne de droite. Assurez-vous que l’image renvoie directement vers une collection afin qu’elle serve de choix concret plutôt que de simple élément décoratif. Une mise en page bidimensionnelle réussie guide les décisions de vos clients avec clarté.
Étape 4 : Choisir le survol ou le clic et styliser la barre
Déterminez ensuite le mode d’ouverture des volets déroulants et harmonisez le graphisme de la barre avec l’identité de votre boutique.
Le choix entre l’ouverture au survol de la souris ou au clic suscite régulièrement le débat parmi les marchands. Les études révèlent des compromis nets :
| Mode d’interaction | Prévalence et données d’ergonomie | Avantages pratiques | Risques d’usage et écueils |
|---|---|---|---|
| Déclenchement au survol | Observé sur 74% des sites e-commerce pour ordinateur dans les analyses Baymard ; 60% le mettent en œuvre maladroitement. Baymard préconise un délai de 300–500 ms ; NN/g recommande d’attendre une immobilité du curseur de 0,5 seconde. | Navigation rapide à la souris lorsqu’un délai d’attente approprié est configuré. | Déclenchements involontaires lors du survol de l’en-tête ; disparition du volet si le curseur dévie de la cible. |
| Déclenchement au clic | Recommandé par Smashing Magazine (Vitaly Friedman, 2021) pour éviter les pièges du survol. Le thème Dawn de Shopify a adopté le clic car le survol échouait aux tests d’accessibilité. | Interaction stable et volontaire, sur souris comme sur ordinateurs tactiles ; moins d’ouvertures accidentelles. | Exige un clic explicite pour chaque catégorie ; parcours un peu plus lent pour balayer plusieurs rayons. |
Dans Navi+, le choix de votre modèle d’interaction s’effectue via un simple interrupteur. Dans vos paramètres de disposition, utilisez l’option Show submenu on hover pour définir le comportement désiré. Activer cette option ouvre les sous-menus au survol ; la désactiver exige que les utilisateurs cliquent sur l’élément pour afficher le volet déroulant.
Après avoir sélectionné votre mode de déclenchement, ajustez la personnalisation visuelle :
- Définissez des teintes d’arrière-plan et de texte parfaitement en accord avec l’en-tête de votre thème.
- Configurez des effets discrets de survol ou de soulignement pour fournir un retour visuel instantané aux internautes.
- Adaptez la taille des polices et l’espacement horizontal pour que la barre s’intègre harmonieusement aux côtés de votre logo et des icônes d’en-tête.
Step 5: Publish under the header and test every screen width
Votre menu configuré et stylisé ne devient visible sur votre boutique qu’une fois la publication validée dans l’application.
Figure 2 : Illustration conceptuelle (Concept illustration) — Step 5: Publish under the header and test every screen width {#step-5-publish-under-the-header-and-test-every-screen-width}
Dans l’éditeur Navi+, cliquez sur le bouton Publish to website et activez le sélecteur Insert/Replace.
| Méthode d’insertion | Sélecteur cible recommandé | Comportement sur la boutique |
|---|---|---|
| Insert After | header |
Insère la barre de méga menu immédiatement sous l’en-tête du thème ; configuration la plus répandue pour Desktop Mega Menu. |
| Replace | .header-menu (structure Dawn) |
Masque le menu natif du thème et positionne Navi+ exactement à son emplacement d’origine. |
| Insert Before | main |
Place la barre de navigation immédiatement avant l’élément sélectionné, par exemple au-dessus de la zone de contenu principale de la page. |
Pour limiter ces règles aux écrans d’ordinateur, ajoutez le suffixe (D) à votre sélecteur, par exemple header(D).
Par défaut, toute largeur d’affichage inférieure à 768px bascule vers le mode mobile.
Testez la présentation sur plusieurs configurations : un moniteur très large, un ordinateur portable classique et une tablette en mode paysage. Vérifiez que la barre ne se scinde pas sur deux lignes et que les sous-menus demeurent parfaitement centrés.
- Activez le mode de navigation au clavier et appuyez sur la touche
Tabpour parcourir vos liens un à un. - Vérifiez que l’indicateur de focus visuel reste distinct sur chaque élément parent et chaque lien déroulant.
- Appuyez sur la touche
Escapelorsqu’un volet déroulant est ouvert afin de confirmer qu’il se referme et replace le curseur sur le bouton parent, conformément aux recommandations de navigation par volet de la W3C WAI-ARIA.
Pour découvrir des étapes d’installation propres à certains thèmes, consultez notre guide pour ajouter un méga menu au thème Dawn et parcourez les menus Navi+ sur les thèmes Shopify populaires. Pour des instructions pas à pas en images, référez-vous au guide complet de publication avec captures d’écran.
Si vous souhaitez proposer une navigation cohérente sur smartphone, sachez qu’un même menu peut être déployé sur mobile grâce à la synchronisation Smart responsive, détaillée ci-après.
Problèmes fréquents : menu invisible, masqué par l’en-tête, passage sur deux lignes
Lors de l’installation et de la publication d’un menu tiers sur ordinateur, certains marchands constatent des anomalies d’affichage. Utilisez ce tableau de dépannage pour les résoudre rapidement :
| Problème constaté | Cause probable | Solution recommandée |
|---|---|---|
| Le menu n’apparaît pas sur la boutique | L’app embed est désactivée, le menu n’est pas publié ou le sélecteur CSS est incorrect. | Vérifiez l’Éditeur de thème > App embeds et confirmez que Store Connector est activé et enregistré. Dans Navi+, assurez-vous d’avoir cliqué sur Publish to website. Contrôlez que votre sélecteur correspond à un conteneur présent dans le code de votre thème. |
| Le volet déroulant est masqué par l’en-tête fixe | L’en-tête du thème possède un niveau d’empilement (z-index) supérieur au volet déroulant de l’application. | Ouvrez les réglages de mise en page dans Navi+ et augmentez la valeur du Z-Index afin que le panneau du méga menu apparaisse devant l’en-tête fixe du thème. |
| La barre de menu passe sur deux lignes | Les éléments de niveau 1 sont trop nombreux ou leurs libellés sont trop longs pour un écran d’ordinateur portable standard. | Réduisez les catégories principales à cinq ou sept éléments, raccourcissez les libellés ou activez les flèches de défilement pour regrouper les liens en excès derrière un bouton sans casser la barre en deux lignes. |
| Le menu ordinateur bascule en mobile sur petit écran ou tablette | La largeur de la fenêtre passe sous le seuil par défaut de 768px prévu pour les ordinateurs. | Diminuez le seuil de rupture pour ordinateur dans les paramètres de disposition et activez les flèches de débordement pour maintenir la barre horizontale active sur les écrans intermédiaires. |
| L’ancien menu du thème clignote brièvement au chargement | Avec Replace, Navi+ attend que l’ancien menu s’affiche avant de le remplacer : l’ancien menu peut donc apparaître un instant. | Suivez la section I.5 du guide de publication (publishing guide) : elle masque l’ancien menu et affiche un effet de chargement à la place. |
| Des liens renvoient vers des erreurs 404 ou de mauvaises cibles | Les adresses URL ont été mal saisies ou pointent vers des collections non publiées. | Cliquez sur chaque lien de votre arborescence en prévisualisation directe pour valider la bonne redirection de chaque collection, page et fiche produit. |
Pour des conseils de configuration avancés et des situations spécifiques, consultez la FAQ du Desktop Mega Menu.
Compromis : quand un simple menu déroulant surpasse un méga menu
Un méga menu multicolonne constitue un outil de mise en avant puissant, mais il ne convient pas nécessairement à toutes les boutiques Shopify. Avant de concevoir une mise en page complexe, prenez en compte ces compromis essentiels :
- Catalogues restreints : Si votre boutique ne propose que quelques produits ou s’appuie sur deux ou trois collections phares, le menu natif de votre thème ou un simple menu déroulant à une colonne est plus rapide et plus épuré. La navigation par défaut de Shopify prend en charge jusqu’à deux niveaux déroulants imbriqués, ce qui est largement suffisant pour une offre ciblée.
- Charge de maintenance : Un méga menu exige une gestion éditoriale constante. Au fil des lancements, des renouvellements de stocks et de l’expiration des offres promotionnelles, chaque colonne, titre et visuel doit être mis à jour manuellement. Ajouter continuellement des liens sans discipline risque de créer un volet surchargé qui perturbe vos acheteurs.
- Risques d’interaction : Les méga menus basés sur le survol peuvent frustrer les clients lorsqu’ils ne sont pas dotés d’un délai d’attente bien réglé ou lors de l’utilisation d’écrans d’ordinateurs portables tactiles.
- Dépendance vis-à-vis du thème : Installer une application de navigation nécessite l’activation d’une intégration d’application qui doit être contrôlée à chaque changement de thème.
Un méga menu d’ordinateur mérite cet investissement dès lors que vous disposez d’un vaste catalogue, que vous devez structurer vos collections en plusieurs colonnes ou que vous souhaitez valoriser des vignettes de collections directement dans le menu principal. Pour identifier la structure la plus adaptée à votre catalogue, consultez notre guide pour choisir le type de menu adapté à votre boutique.
Où Navi+ se positionne
Navi+ Tab Bar & Mega Menu a été conçu pour faire la passerelle entre les structures rigides des thèmes et la complexité du code sur mesure.
Pour les affichages sur ordinateur, Navi+ offre un éditeur dédié de Desktop Mega Menu fondé sur une arborescence à trois niveaux claire et ordonnée. Les marchands peuvent ajuster les largeurs de colonnes sur une grille flexible, basculer entre le survol et le clic en un clic, et positionner la barre à l’aide des options Insert After ou Replace avec un ciblage spécifique pour ordinateur.
Pour garder la barre propre sur les ordinateurs portables plus étroits, Navi+ propose un réglage de point de rupture (breakpoint) et un bouton flèche de débordement qui range les éléments de premier niveau en trop derrière une flèche au lieu de les faire passer à la ligne. Smart responsive intègre une référence vivante de votre arbre desktop dans un tiroir mobile, ce qui vous évite de créer un second arbre.
Si vous souhaitez tester cette organisation sur votre propre boutique, Navi+ Tab Bar & Mega Menu vous permet de configurer le Desktop Mega Menu présenté ici, de l’essayer en toute sérénité sur un thème dupliqué et de le désactiver à tout moment.
Liste de contrôle avant publication
Passez en revue cette liste de contrôle méthodique avant de rendre votre nouveau menu de navigation sur ordinateur visible pour vos clients :
- Arborescence de menu définie : Un maximum de trois niveaux a été esquissé sur papier (barre principale, colonnes, liens).
- App embed activée : Store Connector est activé et enregistré sous Éditeur de thème > App embeds.
- Éléments de niveau 1 équilibrés : Les catégories principales tiennent sur une seule ligne horizontale sur un ordinateur portable standard.
- Colonnes structurées et calibrées : Les éléments de niveau 2 sont définis en en-têtes de colonnes avec des largeurs proportionnées.
- Visuels validés : Les vignettes illustrent de véritables choix de collections sans surcharger l’espace de fioritures.
- Mode de déclenchement choisi : Le survol avec temporisation adéquate ou le clic a été délibérément sélectionné.
- Sélecteur de publication contrôlé : L’option Insert After ou Replace utilise le bon sélecteur d’en-tête avec le suffixe d’ordinateur
(D). - Affichage multi-écrans validé : Le rendu a été testé sur écran large, ordinateur portable classique et tablette.
- Navigation au clavier vérifiée : L’appui sur
Tabdéplace le focus logiquement à travers les éléments et les liens déroulants, et la toucheEscapereferme le panneau actif en replaçant le curseur sur l’élément parent, respectant les normes W3C. - Validité des liens confirmée : Chaque lien a été cliqué pour s’assurer qu’il mène bien à des pages et collections actives.
Si vous souhaitez tester cette organisation sur votre propre boutique, Navi+ Tab Bar & Mega Menu vous permet de configurer le Desktop Mega Menu présenté ici, de l’essayer en toute sérénité sur un thème dupliqué et de le désactiver à tout moment.
FAQ
Combien de niveaux un menu pour ordinateur peut-il comporter ?
Les menus déroulants natifs de Shopify autorisent deux niveaux imbriqués sous un élément principal. L’arborescence d’un Desktop Mega Menu dans Navi+ s’articule autour de trois niveaux : la barre principale, les en-têtes de colonnes et les liens individuels.
Un méga menu doit-il s’ouvrir au survol ou au clic ?
Les deux approches sont envisageables si elles sont maîtrisées : le survol nécessite un bref délai d’attente (Baymard préconise 300–500 ms) pour éviter les ouvertures intempestives, tandis que le clic offre le choix le plus stable et accessible. Dans Navi+, vous basculez d’un mode à l’autre grâce à l’option “Show submenu on hover”.
Où le menu apparaît-il au niveau de mon en-tête ?
Avec le mode Insert After et le sélecteur header, le menu s’affiche immédiatement en dessous de l’en-tête. Avec l’option Replace, le menu natif du thème est masqué et Navi+ prend exactement sa place.
Pourquoi mon menu ne s’affiche-t-il pas après avoir installé l’application ?
La cause la plus fréquente est une app embed inactive ou un menu non encore publié. Assurez-vous que Store Connector est activé dans l’éditeur de thème, vérifiez la conformité de votre sélecteur et ajustez le z-index si un en-tête fixe vient masquer le menu.
Pourquoi mon menu d’ordinateur bascule-t-il en version mobile sur tablette ou petit ordinateur ?
Par défaut, tout écran dont la largeur est inférieure à 768px passe en affichage mobile. Vous pouvez diminuer ce seuil dans les paramètres de disposition et activer les flèches de défilement pour préserver l’agencement horizontal.
Le même menu peut-il être affiché sur mobile ?
Oui, la fonctionnalité Smart responsive intègre une référence directe de votre menu d’ordinateur au sein d’un Slide menu mobile sans vous obliger à reconstruire une seconde arborescence.
Sources
- Centre d’aide Shopify : Menus déroulants
- Centre d’aide Shopify : Intégrations d’applications dans les thèmes
- Nielsen Norman Group: Mega Menus Work Well
- Nielsen Norman Group: Mega Menus Gone Wrong
- Baymard Institute: Dropdown Menu Flickering Issue
- Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
- Shopify Dawn Theme PR #1316
- W3C WAI-ARIA APG: Disclosure Navigation Example
- Aide Navi+ : Publication sur Shopify
- Aide Navi+ : FAQ Desktop Mega Menu
- Aide Navi+ : Utiliser Desktop Mega Menu
- Aide Navi+ : Configuration de la mise en page
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.