Configuration de menus déroulants dans votre boutique en ligne

Vous pouvez utiliser des menus déroulants pour regrouper des produits, des collections ou des pages et permettre ainsi aux clients de naviguer plus facilement dans votre boutique en ligne. Par exemple, si vous avez un grand nombre de produits, vous pouvez les ajouter à des collections, puis utiliser un menu déroulant dans le menu principal pour organiser les collections. Cela peut aider les clients à trouver le type de produits qu’ils recherchent.

Vous pouvez également ajouter, supprimer ou modifier des éléments de menu dans des menus déroulants ou dans vos menus par défaut.

Vous pouvez afficher et modifier les menus de votre boutique en ligne depuis Contenu > Menus dans votre interface administrateur Shopify.

Imbrication d’éléments de menu pour créer des menus déroulants

Vous pouvez créer des menus déroulants en créant ou en déplaçant des éléments de menu de manière à les imbriquer sous un élément de niveau supérieur. L’élément de niveau supérieur s’affiche dans le menu principal de votre boutique en ligne, et les éléments de menu imbriqués s’affichent dans un menu déroulant. L’élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués.

Tous les thèmes affichent les éléments imbriqués sous forme de menus déroulants dans le menu principal, et certains thèmes affichent les éléments imbriqués sous forme de menus déroulants à d’autres emplacements.

Le menu principal et les menus déroulants s’affichent à différents emplacements dans votre boutique en ligne en fonction de votre thème. Certains thèmes affichent une icône à côté du nom d’un menu déroulant dans le menu principal pour aider les clients à savoir qu’un menu déroulant est présent.

Ajouter un menu déroulant à partir du menu principal

Vous pouvez ajouter un menu déroulant à partir de n’importe quel élément du menu principal.

Étapes :

Intégration du menu de pied de page

Les menus déroulants peuvent également être mis en œuvre dans les menus de pied de page.

Étapes :

1. Depuis l’interface administrateur Shopify, allez à Contenu > Menus.
2. Facultatif : suivez les mêmes principes d’imbrication que ceux utilisés pour les menus principaux, par exemple en faisant glisser les éléments de menu sous un élément d’en-tête pour créer une structure déroulante en cliquant sur l’icône et en faisant glisser les éléments en place.
3. Saisissez # dans le champ Lien pour les éléments d’en-tête qui ne doivent pas rediriger vers une page (par exemple, les en-têtes « Assistance » ou « Explorer »).

Considérations relatives à la compatibilité des thèmes

Passez en revue les considérations suivantes concernant l’ajout de menus déroulants à votre thème :

• La plupart des thèmes prennent en charge jusqu’à deux niveaux de menus déroulants imbriqués. Consultez la documentation de votre thème ou testez les éléments imbriqués pour confirmer la compatibilité.
• Certains thèmes peuvent nécessiter des ajustements CSS pour améliorer l’ergonomie sur les appareils mobiles. Ne personnalisez pas votre thème si vous ne maîtrisez pas le code de thème. En savoir plus sur la personnalisation de votre thème.

Déterminer si votre thème prend en charge les menus déroulants imbriqués

Pour déterminer si votre thème actuel prend en charge le nombre maximal de niveaux de menus déroulants imbriqués que vous souhaitez mettre en œuvre, vous pouvez utiliser les ressources suivantes :

1. Consultez la documentation de votre thème : consultez la documentation du thème pour obtenir des informations spécifiques sur les capacités du menu et les niveaux d’imbrication pris en charge.
2. Testez les éléments imbriqués : créez une structure de menu de test avec le nombre de niveaux d’imbrication souhaité et vérifiez qu’elle s’affiche correctement sur les ordinateurs de bureau et les appareils mobiles.

La plupart des thèmes prennent en charge jusqu’à deux niveaux de menus déroulants imbriqués. Si vous rencontrez des problèmes avec les menus déroulants, vérifiez que votre thème prend en charge le nombre de niveaux d’imbrication que vous essayez de mettre en œuvre, car certains thèmes peuvent nécessiter une personnalisation supplémentaire pour prendre en charge plusieurs niveaux d’imbrication.

Bonnes pratiques pour les menus déroulants

Passez en revue les bonnes pratiques suivantes pour créer une structure de menu utile qui fonctionne bien sur tous les appareils :

• Utilisez des libellés descriptifs, tels que « Acheter par catégorie », pour les éléments de menu de premier niveau avec des liens #.
• Assurez-vous que les menus sont optimisés pour les appareils mobiles. Vous pouvez tester les menus sur des appareils mobiles pour confirmer que les menus déroulants s’agrandissent comme prévu.
• Ajoutez sept éléments de menu de premier niveau ou moins pour éviter l’encombrement.
• Utilisez des titres de lien clairs et descriptifs. Par exemple : « Collections » et « Robes d’été ».
• Chaque menu peut contenir jusqu’à 10 000 éléments, et votre boutique peut avoir jusqu’à 1 000 menus au total. Tout élément de menu comportant des sous-éléments dans un menu déroulant est comptabilisé comme un menu distinct par rapport à cette limite.

Accessibilité des menus déroulants

La plupart des thèmes mettent en œuvre les en-têtes de menu déroulant sous forme de boutons plutôt que de liens cliquables. Il s’agit d’une conception intentionnelle en matière d’accessibilité qui aide les clients qui utilisent des technologies d’assistance à comprendre la structure de navigation.

Lorsqu’un élément de menu de premier niveau contrôle un sous-menu déroulant, il fonctionne comme un bouton permettant d’agrandir le menu plutôt que comme un lien vers une nouvelle page. Cette approche garantit que les clients qui utilisent des lecteurs d’écran ou d’autres appareils d’assistance peuvent naviguer correctement dans le système de menus de votre boutique.

Si vous souhaitez que les clients accèdent à une page de catégorie principale (telle que « Tous les produits » ou « Toutes les collections »), ajoutez-la comme premier élément dans le menu déroulant lui-même au lieu de rendre l’en-tête cliquable.

Résolution des problèmes courants

Passez en revue les solutions suivantes aux problèmes courants que vous pourriez rencontrer lors de la configuration des menus de navigation :

• Redirections du menu mobile : si un lien de menu de premier niveau redirige vers une nouvelle page lorsque vous appuyez dessus, vérifiez le menu dans votre interface administrateur Shopify pour confirmer que le champ du lien de menu est bien #.

• Problèmes de visibilité : si les éléments imbriqués ne s’affichent pas, assurez-vous qu’ils sont entièrement glissés sous l’élément d’en-tête et indentés dans l’interface Menus. Confirmez que votre thème prend en charge le nombre de niveaux imbriqués que vous avez configurés.

• Compatibilité du thème : si vous rencontrez des problèmes avec les menus déroulants, vérifiez que votre thème prend en charge le nombre de niveaux d’imbrication que vous essayez de mettre en œuvre. Certains thèmes peuvent nécessiter une personnalisation supplémentaire pour prendre en charge plusieurs niveaux d’imbrication.

• Création de menu imbriqué bloquée : si vous rencontrez l’erreur « Le menu ne peut pas contenir de menus imbriqués. Activez la fonctionnalité de navigation imbriquée pour l’utiliser. », il est possible que votre boutique doive activer la fonctionnalité de navigation imbriquée. Cela concerne généralement les boutiques créées avant 2018. Contactez l’Assistance Shopify si vous rencontrez cette erreur.

• Affichage du mauvais menu : si plusieurs liens de navigation pointent vers la même page (par exemple, votre page d’accueil), il est possible que votre thème affiche le mauvais sous-menu. Assurez-vous que chaque section de navigation redirige vers une page unique pour éviter toute confusion.

• Disparition d’éléments de menu : si des liens de menu disparaissent sans avoir été supprimés, vérifiez si vous avez supprimé les produits, les collections ou les pages vers lesquels les éléments de menu pointaient. La suppression de la ressource liée entraîne également la suppression de l’élément de menu.

Personnalisation du code du thème pour les menus déroulants

Pour les thèmes nécessitant une personnalisation plus poussée, vous pouvez envisager de personnaliser le code de votre thème.