Shopify

Créer un menu déroulant sur Shopify : sous-menus, catégories et mega menu

Vincent Fredet·Fondateur de Scale Ova
·9 min de lecture
Créer un menu déroulant sur Shopify : sous-menus, catégories et mega menu

Ta boutique grandit et ton menu ne tient plus sur une ligne. Tu veux un onglet « Boutique » qui déroule tes catégories quand on passe la souris dessus. Sur Shopify, il n'y a rien à installer pour ça. Un menu déroulant n'est qu'un élément de menu glissé sous un autre. Le plus long, c'est de préparer ce que le menu va afficher.

Comment marche un menu déroulant sur Shopify

Ta boutique a deux menus par défaut. Le menu principal s'affiche en haut de chaque page, avec deux éléments au départ, Accueil et Catalogue. Le menu du pied de page s'affiche en bas. Les menus déroulants vivent dans le menu principal.

Le principe est simple. Un élément de premier niveau s'affiche dans la barre du menu. Les éléments glissés en dessous s'affichent dans la liste qui se déroule. Shopify accepte deux niveaux sous chaque élément de premier niveau. Tu peux donc faire Boutique, puis Femme, puis Robes.

Avant de toucher au menu, crée ce vers quoi il pointe. Un élément de menu renvoie vers une collection, un produit, une page ou un article. Shopify demande que cette ressource existe déjà. Si tu veux un sous-menu par catégorie, crée d'abord une collection par catégorie. Le pas-à-pas est dans créer une collection sur Shopify. Et si ta boutique n'a pas encore de produits, ajouter un produit sur Shopify montre aussi comment les ranger dans une collection.

Créer un menu déroulant, étape par étape

  1. Dans l'admin Shopify, va dans Contenu > Menus.
  2. Clique sur le nom de ton menu principal.
  3. Choisis l'élément qui servira d'en-tête au menu déroulant, ou crée-le avec Ajouter un élément de menu. Si cet en-tête ne doit mener nulle part, tape # dans le champ Rechercher ou coller un lien.
  4. Clique sur Ajouter un élément de menu pour créer le premier élément du sous-menu.
  5. Dans le champ Nom, tape le texte affiché, par exemple « Bougies ».
  6. Dans le champ Rechercher ou coller un lien, choisis la destination, comme la collection Bougies.
  7. Clique sur Ajouter.
  8. Attrape l'élément par sa poignée et fais-le glisser sous l'en-tête, en le décalant vers la droite. Il est imbriqué quand il apparaît en retrait sous l'en-tête.
  9. Répète pour chaque élément du sous-menu.
  10. Clique sur Enregistrer le menu.

Ouvre ensuite ta boutique sur ordinateur et sur téléphone. Sur ordinateur, le sous-menu s'ouvre au survol ou au clic selon le thème. Sur téléphone, il se déplie souvent dans un menu latéral.

Ajouter un troisième niveau

Pour un sous-menu dans le sous-menu, refais le même geste un cran plus loin. Glisse un élément sous un élément déjà imbriqué. Tu obtiens alors trois niveaux, le maximum de Shopify.

Ton thème doit savoir l'afficher. Le centre d'aide indique que tous les thèmes Online Store 2.0 gèrent plusieurs niveaux. Les vieux thèmes à sections peuvent demander une mise à jour. Si ton troisième niveau n'apparaît pas, regarde d'abord la version de ton thème.

Trois niveaux, c'est souvent trop pour un débutant. Un client sur téléphone doit alors ouvrir trois listes avant de voir un produit. Avec un petit catalogue, deux niveaux suffisent presque toujours.

Ton menu ne s'affiche pas sur la boutique

Tu modifies un menu, tu enregistres, et rien ne change en ligne. Le centre d'aide cite d'abord une cause simple. Ton thème affiche un autre menu que celui que tu modifies.

Pour le vérifier, va dans Boutique en ligne et clique sur Personnaliser à côté de ton thème. Ouvre la section En-tête. Le réglage Menu y indique quel menu le thème affiche. Choisis le bon, puis enregistre.

Une appli de mega menu peut aussi être en cause. Ces applis construisent leur propre menu au lieu d'utiliser celui de l'admin. Tant qu'elle est active, tes changements dans Contenu > Menus ne se voient pas.

Un mega menu sur Shopify

Un mega menu est un menu déroulant qui s'ouvre en grand panneau, souvent sur plusieurs colonnes et avec des images. Shopify ne le crée pas dans Contenu > Menus. C'est ton thème qui décide comment il affiche les sous-menus.

Dans Dawn, un thème gratuit de Shopify, c'est un simple réglage. Ouvre la section En-tête dans l'éditeur de thème. Le réglage Type de menu propose Menu déroulant, Méga menu ou Tiroir. Choisis Méga menu, et tes sous-menus s'affichent sur toute la largeur de la page.

Dans Horizon, un autre thème de Shopify, le bloc du menu a un réglage Type de support multimédia. Il ajoute au sous-menu des Images de collection, des Produits en vedette ou des Collections en vedette. Les thèmes payants ont chacun leur façon de faire, souvent avec des images par colonne. Leur documentation le précise.

Si ton thème ne propose rien, il reste les applis du Shopify App Store, comme Globo Mega Menu, Meteor Mega Menu ou Buddha Mega Menu. Pense au piège vu plus haut. L'appli gère alors son propre menu, à côté de celui de l'admin. Avant d'en installer une, vérifie si un thème gratuit ne fait pas déjà le travail. Le comparatif des meilleurs thèmes Shopify liste ceux qui intègrent un mega menu.

Organiser un menu par catégories

Le centre d'aide donne un repère utile. Garde sept éléments de premier niveau au maximum, sinon la barre devient illisible. Mets les catégories qui vendent le plus en premier, puis les pages d'information à la fin. Ces pages doivent exister avant le menu, comme ta page À propos ou ton blog.

Donne aux en-têtes des noms qui disent ce qu'ils contiennent, comme « Acheter par catégorie » plutôt que « Plus ». Dans la plupart des thèmes, un en-tête de menu déroulant se comporte comme un bouton qui ouvre la liste. Il ne mène pas vers une page. Si tu veux un lien vers toute la catégorie, ajoute-le en premier élément du sous-menu, avec un nom comme « Tout voir ».

Chaque élément doit pointer vers une destination différente. Si deux sections du menu pointent vers la même page, certains thèmes affichent le mauvais sous-menu.

Les pièges qui reviennent

  • L'en-tête ouvre une page sur téléphone au lieu de dérouler le menu. Son lien n'est pas #. Corrige le champ Rechercher ou coller un lien de l'en-tête.
  • Un élément a disparu du menu sans que tu le supprimes. Tu as supprimé la collection, le produit ou la page vers lequel il pointait. Shopify retire alors l'élément du menu avec la ressource.
  • Tout le sous-menu a disparu d'un coup. Supprimer un élément qui a des éléments imbriqués supprime aussi ces éléments et le menu déroulant.
  • Les éléments imbriqués ne s'affichent pas. Ils ne sont pas assez décalés sous l'en-tête dans l'admin, ou ton thème ne gère pas ce nombre de niveaux.
  • L'admin bloque tes modifications. Shopify compte chaque ajout, modification, suppression ou déplacement. Au bout de 200 modifications sans enregistrer, il limite les actions suivantes. Enregistre souvent.
  • Le pied de page ne déroule rien. Le centre d'aide précise que le menu du pied de page n'affiche en général que le premier niveau. Garde tes sous-menus pour le menu principal. Le pied de page sert plutôt aux liens simples, comme celui de ta page Contact. Pour créer cette page, suis le guide pour créer une page contact sur Shopify.
  • Le message « Le menu ne peut pas contenir de menus imbriqués ». Il touche surtout des boutiques créées avant 2018. Il faut contacter l'assistance Shopify pour activer la navigation imbriquée.

Tu cherches un menu déroulant sur la fiche produit ?

Une partie des recherches « menu déroulant Shopify » vise en fait la fiche produit, pas la navigation. Deux réglages du thème répondent à ce besoin. Ils se trouvent dans l'éditeur de thème, sur le modèle de page produit.

Pour que le client choisisse sa taille dans une liste, ouvre le bloc du sélecteur de variantes. Dans Dawn, son réglage Style propose Menu déroulant à la place des boutons. Pour ranger la livraison ou l'entretien dans des sections qui s'ouvrent au clic, ajoute un bloc Rangée réductible. Les noms changent selon le thème, alors cherche ces deux réglages dans le tien. Ce qui doit aller sur une fiche produit est détaillé dans une fiche produit Shopify qui convertit.

Le faire en une phrase avec Ova

Si ta boutique est construite avec Scale Ova, tu peux demander le menu à Ova plutôt que de glisser chaque élément. Par exemple : « Dans le menu principal, ajoute un onglet Boutique avec trois sous-menus Bougies, Diffuseurs et Coffrets, chacun vers sa collection. » Ova écrit le menu dans ton admin Shopify, jusqu'à trois niveaux. Il peut aussi renommer, déplacer ou retirer des éléments d'un menu existant. Les collections doivent exister avant, et Ova sait les créer aussi. Pour le reste de la boutique, le guide complet pour créer une boutique Shopify reprend chaque réglage dans l'ordre.

FAQ

Comment créer un menu déroulant sur Shopify ?
Va dans Contenu > Menus et ouvre ton menu principal. Ajoute les éléments avec Ajouter un élément de menu, puis fais-les glisser sous l'élément qui servira d'en-tête. Clique sur Enregistrer le menu.
Comment créer un sous-menu sur Shopify ?
Un sous-menu est un élément glissé sous un autre dans Contenu > Menus. Il apparaît en retrait sous son en-tête. Pour un sous-menu dans le sous-menu, glisse un élément sous un élément déjà imbriqué.
Combien de niveaux de menu peut-on faire sur Shopify ?
Trois en tout. Un élément de premier niveau accepte deux niveaux d'éléments imbriqués. Le thème doit aussi savoir les afficher, ce que font tous les thèmes Online Store 2.0 d'après le centre d'aide.
Comment faire un mega menu sur Shopify sans appli ?
Passe par le thème. Dans Dawn, ouvre la section En-tête de l'éditeur de thème et règle Type de menu sur Méga menu. D'autres thèmes ont un réglage proche. Si le tien n'en a pas, il faut une appli ou un autre thème.
Pourquoi mon menu déroulant ne s'affiche pas sur Shopify ?
Le plus souvent, ton thème affiche un autre menu. Vérifie le réglage Menu de la section En-tête dans l'éditeur de thème. Vérifie ensuite que les éléments sont bien en retrait sous leur en-tête, et qu'aucune appli de menu ne remplace le tien.
Peut-on mettre un menu déroulant dans le pied de page ?
En général non. Le centre d'aide indique que le menu du pied de page n'affiche que les éléments de premier niveau. Les menus déroulants vont dans le menu principal.

Sources