Comment modifier le menu principal dans Shopify : Guide UX

Le menu de navigation est le GPS de votre boutique en ligne. Si un client arrive sur votre site et ne trouve pas en moins de 3 secondes où cliquer pour trouver ce qu'il cherche, il le quittera.

De nombreux commerçants commettent l'erreur de surcharger leur menu principal de liens inutiles (« À propos », « Blog », « Politique d'expédition ») avant même de présenter leurs produits. Pire encore, ils créent des structures si complexes que personne ne les comprend.

Dans ce tutoriel, vous apprendrez à modifier, organiser et créer des menus déroulants dans Shopify, en appliquant les meilleures pratiques en matière d'UX (expérience utilisateur).

Étape 1 : Accéder à l’éditeur de navigation

Contrairement à d'autres plateformes, les menus de Shopify ne sont pas modifiés dans la section « Conception du thème », mais dans une section dédiée.

1. Accédez à votre panneau d'administration.
2. Cliquez sur Boutique en ligne > Navigation .
3. Vous verrez deux menus par défaut :
   • Menu principal : celui qui apparaît en haut de l’en-tête.
   • Menu de pied de page (menu inférieur) : celui qui apparaît en bas de la page (idéal pour les mentions légales et le formulaire de contact).
4. Cliquez sur le menu principal pour le modifier.

Étape 2 : Ajouter et lier les éléments

Dans l'éditeur, vous verrez la liste des liens actuels.

Pour ajouter un nouveau lien :

1. Cliquez sur Ajouter un élément de menu .
2. Nom : Indiquez le texte que le client verra (par exemple, « Baskets »).
3. Lien : C’est ici que la magie opère. Plus besoin de copier-coller les URL. Cliquez sur la case et sélectionnez :
   • Collections : Pour créer un lien vers une catégorie de produits (le plus courant).
   • Produits : Pour mettre en avant un produit spécifique (par exemple, « Carte cadeau »).
   • Pages : Pour « À propos de nous » ou « Nous contacter ».
   • Blogs : Pour votre blog d’actualités.

Conseil de pro : Utilisez des noms courts et descriptifs. « Femmes » est préférable à « Catalogue de vêtements pour femmes ».

Étape 3 : Créer des menus déroulants

Si vous avez plusieurs catégories (T-shirts, pantalons, manteaux), ne les mettez pas toutes sur la première ligne. Regroupez-les sous « Vêtements ».

Pour créer un sous-menu (imbrication) :

1. Créez l'élément principal (par exemple, « Vêtements ») et liez-le à une collection générale, ou utilisez `#` si vous ne souhaitez pas qu'il soit lié à un élément quelconque.
2. Créez les éléments enfants (par exemple, « T-shirts »).
3. Glisser-déposer : Cliquez sur les 6 points (⠿) à gauche du nom « T-shirts » et faites-le glisser en dessous et légèrement à droite de « Vêtements ».
4. Vous constaterez qu'une structure hiérarchisée s'est créée. Cela indique que « T-shirts » se trouve désormais dans « Vêtements ».

Vous pouvez créer jusqu'à 3 niveaux de profondeur (Menu > Sous-menu > Sous-sous-menu).

La règle d'or : moins, c'est plus

Votre menu principal n'est pas un entrepôt, c'est une vitrine. Suivez ces règles pour vendre plus :

• Maximum 7 éléments : La mémoire à court terme humaine s'effondre avec plus de 7 options.
• L'élément important à gauche : placez « Boutique » ou vos catégories principales (« Nouveautés », « Meilleures ventes ») en haut.
• Les informations institutionnelles doivent figurer à la fin (ou dans le pied de page) : les rubriques « Contact », « Livraison » et « Mentions légales » ne doivent pas occuper une place prépondérante dans l’en-tête. Déplacez-les dans le menu de pied de page ou dans un menu secondaire.

Questions fréquentes sur la navigation

Comment créer un « méga menu » avec des photos ?

L'éditeur natif de Shopify ne permet que les menus textuels simples. Si vous souhaitez un menu Mega Menu visuel avec des images promotionnelles, votre thème doit le prendre en charge (la plupart des thèmes Premium 2.0 le font) ou vous devez installer une application de menu.

Est-il possible d'avoir des menus différents pour mobile et ordinateur ?

Shopify utilise nativement le même menu (« Menu principal ») pour les deux plateformes, l'adaptant au format hamburger sur mobile. Cependant, certains thèmes avancés permettent de sélectionner des menus différents dans les paramètres d'en-tête.

Comment créer un lien qui ne mène nulle part (juste un menu déroulant) ?

Lors de la création de l'élément parent (par exemple, « Catalogue »), saisissez le symbole ># dans le champ Lien et sélectionnez-le. Cela créera un lien mort qui servira uniquement à ouvrir le menu déroulant.