Comment utiliser?
Mega Menu est l’un des types de menus les plus populaires et efficaces, surtout sur desktop. Les utilisateurs s’attendent naturellement à trouver un Mega Menu juste en dessous de l’en-tête du site web. Cependant, le menu par défaut de Shopify est généralement simple, manque de structure solide et offre peu ou pas de support d’image. C’est pourquoi vous devriez utiliser le Navi+ Mega Menu.
Avantages clés :
- Remplace entièrement le simple menu méga par défaut de Shopify
- Offre plusieurs styles de présentation avec images, grilles et dispositions multi-niveaux pour une expérience riche et professionnelle
- Fonctionne parfaitement sur mobile et desktop pour une expérience cohérente
FAQ :
1. Je n'ai pas encore décidé d'utiliser la version gratuite ou payante. Puis-je essayer les modèles de menu professionnels ?
Absolument ! Les groupes de menus sont principalement là pour aider les débutants à éviter de se sentir submergés par les fonctionnalités avancées de Navi+ 😄. La meilleure façon est d'essayer les menus professionnels pour explorer toutes les fonctionnalités et options de mise en page. Plus tard, vous pouvez simplement supprimer tout menu dont vous n'avez pas besoin ou que vous trouvez inadapté.
2. Créer un menu ici le fait-il apparaître sur mon site immédiatement ?
Pas encore. Vous devrez publier le bon menu pour qu'il apparaisse sur votre site. Ne vous inquiétez pas — c'est facile !
3. Que se passe-t-il si je choisis le mauvais modèle ou fais une erreur ?
Aucun problème. Vous pouvez le supprimer et en créer un nouveau à tout moment. Si vous testez un menu et souhaitez essayer un autre modèle, vous pouvez enregistrer celui en cours comme fichier de sauvegarde et le rouvrir plus tard. Vous pouvez même copier et coller des parties entre les menus (en ouvrant deux onglets de navigateur) pour conserver votre travail précédent. N'hésitez pas à expérimenter !
4. Dois-je créer un seul menu ou plusieurs ?
Vous devriez créer plusieurs menus. Seul le menu actif s'affichera sur votre site, mais vous pouvez préparer de nombreuses versions — en sélectionnant différents modèles ou en clonant des menus. Les menus peuvent être configurés pour afficher/masquer en fonction du type de page (accueil, produit, collection...), de l'appareil (mobile ou desktop) ou des mots-clés d'URL. Alors allez-y et construisez des menus qui s'adaptent à chaque situation !
Étape 1 : Modifier l’arbre du menu
1.1. Comprendre l’arbre du menu
L’arbre du menu est la partie la plus importante de tout menu — il définit la structure.
Voici un exemple d’un arbre de menu d’un méga menu complet pour desktop :
[+] Menu
[+] Catégories
[+] Alphabets
Skateboarding
- Composants (Nom du groupe)
- Bureaux
- Trucks
- Plus (Lien bleu vers le détail..)
- Completes
- Chapeaux (Nom du groupe)
- Burton Lunchlap Earflap Hat
- Volcom Ramp Stone Adjustable Hat
- ...
[+] Accessoires
[+] Blogs
[+] Support
[+] Plus
C’est un arbre de menu à 3 niveaux. Le niveau 1 comprend Menu, Catégories, Alphabets, Skateboarding… et Plus... Skateboarding a 5 sous-menus de niveau 2 : Composants, Bureaux, Completes (comprend quelques sous-menus de niveau 3 : Chapeaux, Burton Lunchlap Earflap Hat…)
Vous passerez la plupart de votre temps à construire cet arbre de menu pour votre site web, aidant les clients à trouver le contenu qu’ils recherchent.
1.2. Interactions de base avec l’arbre du menu
Vous pouvez faire glisser et déposer des éléments de menu vers le haut et vers le bas ou à gauche et à droite pour changer leur position et leurs relations parent-enfant dans l’arbre du menu.
Lorsque vous survolez n’importe quel élément de menu, vous verrez des options supplémentaires : modifier les détails de l’élément, le supprimer de l’arbre du menu ou le copier et le coller ailleurs.
Astuce : Vous pouvez copier un élément de menu d’un menu à un autre en ouvrant l’application Navi+ dans deux onglets de navigateur.
1.3. IMPORTANT ! Supprimez les éléments de menu d’exemple et gardez uniquement la structure que vous souhaitez.
C’est une situation courante lors de la création d’un menu avec Navi+. Lorsque vous créez un nouveau menu, nous incluons un exemple complet avec des éléments de menu populaires pour montrer des idées de mise en page et vous permettre de copier/coller au besoin. Cependant, si vous êtes nouveau sur Navi+ et utilisez le plan Starter, vous verrez de nombreux avertissements rouges (i) pour des fonctionnalités qui ne sont pas disponibles, comme le téléchargement d’images ou l’utilisation d’interactions avancées.
Si vous aimez ces fonctionnalités avancées, envisagez de passer à un plan Business ou Elite. Mais si vous souhaitez continuer avec le plan Starter, veuillez trouver et supprimer les éléments de menu avec des avertissements rouges (i).
Astuce importante : Lorsque la confirmation de suppression apparaît, activez « Ne demandez plus la prochaine fois » pour supprimer plus rapidement.
1.4. Ajouter des éléments de menu à l’arbre du menu
Pour ajouter un élément de menu, vous avez deux options :
Option 1 **(Non recommandé si vous êtes nouveau sur Navi+)**** :** Cliquez sur « Ajouter un menu » pour insérer un élément de menu vide à la fin de l’arbre du menu. Cette méthode nécessite une bonne compréhension des paramètres des éléments de menu, que nous aborderons ci-dessous. Cela peut sembler écrasant au début, donc vous pouvez explorer cela plus tard.
Option 2 (Recommandée) : Nous avons déjà préparé de nombreux modèles d’éléments de menu bien conçus pour vous. Il vous suffit de les copier et de les coller au bon endroit. Après avoir terminé votre arbre de menu, il vous suffit de supprimer les modèles inutilisés.
1.5. IMPORTANT ! L’attribut « Élément de menu multi-colonnes » (disponible uniquement pour Desktop et pour les méga menus).
C’est une fonctionnalité hautement spécialisée conçue spécifiquement pour les méga menus desktop. Elle est utilisée lorsque vous avez besoin d’un élément de menu plein écran avec plusieurs colonnes. Chaque colonne peut être configurée avec des largeurs personnalisées (par exemple, 3/12, 4/12, 6/12…). L’élément de menu multi-colonnes est extrêmement puissant et flexible pour construire des mises en page de menu complexes adaptées à vos besoins.
Si vous n’avez pas besoin de mises en page complexes comme les éléments de menu multi-colonnes — ou si vous prévoyez de les utiliser plus tard — vous pouvez les supprimer en toute sécurité de vos éléments de menu de niveau 1.
Voir les instructions détaillées sur l'utilisation de l'attribut « Élément de menu multi-colonnes ».
Lorsqu'un élément de menu de niveau 1 est défini sur « Élément de menu multi-colonnes », il sera mis en surbrillance en jaune clair sur l'arbre du menu, et ses éléments de menu de niveau 2 seront automatiquement convertis en Colonnes (avec une icône rouge), indépendamment de tout autre attribut que vous assignez.
Pour ces éléments de menu de niveau 2 en colonne, le seul attribut utilisable est Disposition de largeur. Tous les sous-éléments de menu sous cette colonne seront alors disposés dans une seule colonne.
Vous trouvez ce type de menu difficile à utiliser ? Vous avez raison ! Mais les résultats que vous obtenez avec cet attribut sont vraiment WOW.
Si vous supprimez l'attribut « Élément de menu multi-colonnes » de l'élément de menu de niveau 1, tout reviendra à l'état d'origine.
Pourquoi avez-vous besoin de l'attribut « Largeur du menu déroulant lorsqu'il est développé » ?
Par défaut, lorsque vous utilisez l'attribut « Élément de menu multi-colonnes », le sous-menu (déroulant) s'étend à la largeur de l'écran complet (ou en fonction de la taille du conteneur, généralement 1280, 1366, 1440 ou 100 % — configurable dans l'onglet Avancé). Cependant, avec une zone aussi large, vous n'aurez peut-être pas toujours suffisamment de contenu ou d'idées pour remplir l'espace.
Dans ce cas, vous pouvez limiter la largeur du sous-menu (individuellement pour chaque élément de menu multi-colonnes) pour éviter un aspect vide ou déséquilibré.
Exemple : Vous pouvez créer un menu avec une largeur de 700px et deux colonnes à 6/12 chacune. De cette façon, vous obtenez toujours une mise en page spacieuse sans gaspiller trop d'espace à l'écran.