Configurer des 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 faciliter la navigation des clients dans votre boutique en ligne. Par exemple, si vous avez beaucoup de produits, vous pouvez les regrouper en collections, puis utiliser un menu déroulant dans le menu principal pour les organiser. Cela permet aux clients d’identifier rapidement le type de produits qu’ils cherchent.

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

Remarque

Les menus de pied de page ne peuvent afficher que des éléments de premier niveau. Les menus déroulants ne peuvent pas être utilisés dans le pied de page de votre boutique en ligne.

Vous pouvez afficher et changer les menus de votre boutique en ligne à partir de Contenu > Menus dans votre interface administrateur Shopify.

Remarque

Dans la plupart des cas, vous devez créer un élément avant de pouvoir insérer un lien y menant. Par exemple, vous devez créer une collection avant de pouvoir l’ajouter à un menu.

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

Vous pouvez concevoir des menus déroulants en créant ou en déplaçant des éléments de menu afin qu’ils soient imbriqués sous un article de niveau supérieur. L’article de niveau supérieur s’affiche dans le menu principal de votre boutique en ligne, et les articles de menu imbriqués s’affichent dans un menu déroulant. L’article de niveau supérieur peut avoir jusqu’à deux niveaux de menu déroulant imbriqués.

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

L’apparence et l’emplacement du menu principal et des menus déroulants dans votre boutique en ligne dépendent de votre thème. Certains thèmes afficheront une icône à côté du nom d’un menu déroulant dans le menu principal pour aider les clients à reconnaître qu’il existe un menu déroulant.

Remarque

Assurez-vous de mettre à jour votre thème afin qu'il affiche les trois niveaux de menu de votre boutique en ligne.

Ajouter un menu déroulant à partir du menu principal

Vous pouvez ajouter un menu déroulant à partir des éléments de menu du menu principal.

Étapes :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Contenu > Menus.

2. Cliquez sur le titre de votre menu principal.

3. Choisissez l’un des éléments de menu principal pour en faire l’en-tête de votre menu déroulant ou ajoutez un nouvel élément de menu. Si vous ne souhaitez pas que l’en-tête soit lié à un élément, saisissez # dans le champ Rechercher ou coller un lien pour l’élément de menu d’en-tête.

4. Pour ajouter un élément de menu à inclure au menu déroulant, effectuez les tâches suivantes :

   1. Cliquez sur Ajouter un élément de menu.
   2. Dans le champ Nom, saisissez un nom pour votre élément de menu.
   3. Dans le champ Rechercher ou coller un lien, saisissez ou sélectionnez une destination pour votre élément de menu.

5. Cliquez sur Ajouter, puis sur et faites glisser l’élément de menu afin de le placer sous l’élément de menu d’en-tête.

6. Cliquez sur Enregistrer le menu.

iPhone

1. Depuis l’application Shopify, appuyez sur le bouton .

2. Appuyez sur Contenu > Menus.

3. Appuyez sur le nom de votre menu principal.

4. Choisissez l’un des éléments de menu principal pour en faire l’en-tête de votre menu déroulant ou ajoutez un nouvel élément de menu pour en faire l’en-tête. Si vous ne souhaitez pas que l’en-tête soit lié à un élément, saisissez # dans le champ Rechercher ou coller un lien pour l’élément de menu d’en-tête.

5. Pour ajouter un élément de menu à inclure au menu déroulant, effectuez les tâches suivantes :

   1. Appuyez sur Ajouter un élément de menu.
   2. Dans le champ Nom, saisissez un nom pour votre élément de menu.
   3. Dans le champ Rechercher ou coller un lien, saisissez ou sélectionnez une destination pour votre élément de menu.

6. Appuyez sur Ajouter, puis sur et faites glisser l’élément de menu afin de le placer sous l’élément de menu d’en-tête.

7. Appuyez sur Enregistrer.

Android

1. Depuis l’application Shopify, appuyez sur le bouton .

2. Appuyez sur Contenu > Menus.

3. Appuyez sur le nom de votre menu principal.

4. Choisissez l’un des éléments de menu principal pour en faire l’en-tête de votre menu déroulant ou ajoutez un nouvel élément de menu pour en faire l’en-tête. Si vous ne souhaitez pas que l’en-tête soit lié à un élément, saisissez # dans le champ Rechercher ou coller un lien pour l’élément de menu d’en-tête.

5. Pour ajouter un élément de menu à inclure au menu déroulant, effectuez les tâches suivantes :

   1. Appuyez sur Ajouter un élément de menu.
   2. Dans le champ Nom, saisissez un nom pour votre élément de menu.
   3. Dans le champ Rechercher ou coller un lien, saisissez ou sélectionnez une destination pour votre élément de menu.

6. Appuyez sur Ajouter, puis sur et faites glisser l’élément de menu afin de le placer sous l’élément de menu d’en-tête.

7. Appuyez sur ✓.

Remarque

Vous pouvez modifier le menu principal par défaut pour la plupart des thèmes en changeant les paramètres dans la section En-tête du thème.

Intégration du menu Pied de page

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

Étapes :

1. Depuis votre interface administrateur Shopify, accédez à Contenu > Menus.
2. Facultatif : suivez les mêmes principes d’imbrication que ceux utilisés pour les menus principaux, comme faire glisser des éléments de menu sous un élément d’en-tête pour créer une structure de menu déroulant en cliquant sur 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 être liés à une page (par exemple, en-têtes « Assistance » ou « Explorer »).

Considérations sur la compatibilité des thèmes

Passez en revue les considérations suivantes pour ajouter des 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 la convivialité mobile. Ne personnalisez pas votre thème si vous n’êtes pas familier avec le code du thème. En savoir plus sur la personnalisation de votre thème.

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 étiquettes descriptives telle que « Shop par catégorie » pour les éléments de menu de niveau supérieur avec des liens #.

• Assurez-vous que les menus sont optimisés sur les appareils mobiles. Vous pouvez tester les menus sur les appareils mobiles pour confirmer que les menus déroulants s’agrandissent comme prévu.

• Ajoutez sept éléments de menu de niveau supérieur ou moins pour éviter le surpeuplement.

• Utilisez des titres de liens transparents et descriptifs. Par exemple, « Collections » et « Robes d’été ».

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 de menu mobile : si un lien de menu de niveau supérieur redirige vers une nouvelle page lorsque vous appuyez dessus, vérifiez alors le menu dans votre interface administrateur Shopify pour confirmer que le champ du lien de menu est #.

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

Personnalisation du code du thème

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