Points clés
- Allez dans Boutique en ligne > Navigation > cliquez sur le menu > Ajouter un élément de menu.
- Définissez le nom (le texte affiché dans la barre) et le lien de destination.
- Vous pouvez faire un lien vers n’importe quelle page, collection, produit, blog ou URL personnalisée.
- Pour créer un menu déroulant (dropdown), faites glisser un nouvel élément vers la droite sous un élément parent.
Ajouter un nouvel élément à la navigation de votre boutique Shopify prend environ 30 secondes. Voici comment faire, et comment le configurer en tant que menu déroulant.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons aussi développé Fudge - un éditeur de boutique par IA avec une note de 5.0 sur le Shopify App Store.
Comment ajouter un élément de menu sur Shopify
Étape 1. Dans votre interface d’administration Shopify, allez dans Boutique en ligne > Navigation.
Étape 2. Cliquez sur le menu auquel vous souhaitez ajouter un élément. Pour la plupart des boutiques, ce sera le Menu principal (header) ou le Pied de page (footer).
Étape 3. Cliquez sur Ajouter un élément de menu.
Étape 4. Remplissez les deux champs :
- Nom - le texte qui apparaîtra dans la barre de navigation. Optez pour la concision : un ou deux mots.
- Lien - l’endroit où le client sera redirigé en cliquant.
Étape 5. Cliquez sur Ajouter pour intégrer l’élément à la liste.
Étape 6. Cliquez sur Enregistrer le menu.
Le nouvel élément s’affiche dans votre navigation immédiatement après l’enregistrement.
Article lié : Créer une nouvelle page sur Shopify.
Vers quoi faire un lien
Lorsque vous choisissez le lien pour un élément de menu, le sélecteur de liens de Shopify affiche une liste de recherche de tout votre contenu :
- Pages - À propos, Contact, FAQ, ou toute autre page personnalisée
- Collections - toutes vos collections de produits
- Produits - les pages des produits individuels
- Blogs - les pages d’accueil de vos blogs
- Articles de blog - vos différents articles
- URL personnalisée - n’importe quel code (path) ou lien externe saisi manuellement
- Aucun lien - particulièrement utile lorsque l’élément sert d’en-tête de menu déroulant mais sans propre destination
Pour lier un site externe, tapez l’URL complète (avec le https://) directement dans le champ de lien.
Article lié : Créer une page de collection sur Shopify.
Comment créer un menu déroulant
Pour qu’un nouvel élément apparaisse sous la forme d’un menu déroulant rattaché à un élément de navigation existant :
Étape 1. Ajoutez le nouvel élément de menu comme décrit ci-dessus.
Étape 2. Dans la liste du menu, passez votre souris sur ce nouvel élément. Une poignée pour faire glisser (drag handle) va apparaître sur la gauche.
Étape 3. Faites glisser l’élément vers la droite et placez-le sous l’élément parent désiré.
Étape 4. Relâchez quand l’élément est mis en retrait (indenté). Il s’affichera désormais comme sous-menu du parent.
Étape 5. Enregistrez le menu.
L’élément parent doit déjà exister dans ce menu. Si vous créez une toute nouvelle catégorie pour un menu déroulant, ajoutez l’élément parent en premier (sans forcément mettre de lien, juste le libellé), puis imbriquez les éléments enfants juste en dessous.
Article lié : Créer un menu déroulant sur Shopify.
Article lié : Modifier les menus de navigation sur Shopify.
Ajouter un élément “En promo” ou mis en évidence à la navigation
Il est très courant de vouloir ajouter un élément de navigation visuellement mis en avant, comme une étiquette rouge “Promo” (Sale) ou un badge “Nouveau” (New) sur un élément bien spécifique. Cet élément de menu va s’ajouter de la même manière que pour n’importe quel autre élément classique.
Son style (couleur, gras, badge) est par contre une étape distincte :
- Certains thèmes vont directement gérer ça en natif. Jetez un œil dans votre Éditeur de thème > section En-tête pour trouver une option de “mise en évidence” ou “d’accent” sur vos éléments de navigation.
- Si votre thème n’a pas ça, il faudra un petit changement en CSS pour cibler un élément de menu en particulier.
Vous pourriez d’ailleurs juste décrire ceci à Fudge : “Affiche l’élément ‘Promo’ de la navigation principale en texte rouge avec un petit badge.”
Article lié : Réorganiser les éléments de menu sur Shopify.
Ajouter des éléments au menu du footer
Le menu du footer va fonctionner exactement de la même façon que votre menu principal. Dirigez-vous vers Boutique en ligne > Navigation > Pied de page, et ajoutez simplement des éléments en suivant ces mêmes instructions.
On a certains thèmes qui admettent un système multi-colonnes dans le footer, disposant de handles de menu distincts pour chacune d’entre elles. S’il s’avère que votre footer a effectivement ces colonnes (exemple de type “Boutique”, “L’entreprise”, “Support”), allez voir dans Éditeur de thème > section Pied de page pour déterminer à quelle colonne vos menus sont assignés.
Que faire si mon nouvel élément n’apparaît pas dans la navigation ?
Vérifiez deux choses :
-
Avez-vous enregistré ? Cliquez sur « Enregistrer le menu » - la modification ne s’appliquera pas tant que vous ne l’aurez pas explicitement enregistrée.
-
Le bon menu est-il assigné à l’en-tête ? Dans l’Éditeur de thème > section En-tête (Header), il y a généralement un paramètre pour définir le menu à utiliser. Assurez-vous qu’il pointe vers le menu que vous avez modifié (habituellement « Menu principal » avec le handle
main-menu).
FAQ
Quel est le nombre maximum d’éléments de menu que je peux ajouter ?
Shopify prend en charge jusqu’à trois niveaux d’imbrication et environ 250 éléments par menu au total. La limite pratique est généralement bien inférieure : plus de 7 ou 8 éléments de premier niveau encombrent la navigation sur ordinateur, et les menus déroulants de plus de 10 éléments deviennent illisibles. Si vous avez besoin de plus, envisagez plutôt un mega menu.
Puis-je avoir un élément de menu sans lien (juste un parent pour un menu déroulant) ?
Oui. Lors de l’ajout de l’élément, laissez le champ Lien vide ou définissez-le sur « Aucun lien ». L’élément parent agit simplement comme une étiquette qui révèle le menu déroulant : cliquer dessus ne fait rien en soi. Très pratique pour les en-têtes de catégories comme « Boutique » ou « Ressources » où le parent n’est pas une vraie destination.
Comment ajouter une icône à un élément de menu dans Shopify ?
La navigation native ne prend pas en charge les icônes par élément de menu. La solution la plus propre : décrivez ce que vous voulez à Fudge (« afficher une icône Lucide à côté de chaque élément du menu principal, associée par handle ») et il modifiera le Liquid de l’en-tête pour générer un SVG par élément. Alternative rapide : utiliser un emoji directement dans le nom du menu (« 🔥 Promos »). Certains thèmes premium proposent aussi nativement l’ajout d’icônes par élément de menu.
Puis-je faire en sorte qu’un élément de menu s’ouvre dans un nouvel onglet ?
Pas depuis l’interface standard des menus. Pour forcer l’ouverture dans un nouvel onglet, vous devrez modifier le code Liquid de la section en-tête pour ajouter target="_blank" rel="noopener" selon une condition personnalisée (par ex. un modèle d’URL ou un metafield sur l’élément de menu). Pour les liens externes que vous souhaitez ouvrir dans un nouvel onglet, cette petite modification de code en vaut la peine.
Comment changer l’ordre des éléments de menu ?
Dans Boutique en ligne → Navigation → cliquez sur le menu → survolez n’importe quel élément pour voir la poignée de glissement sur sa gauche → faites glisser vers le haut ou le bas pour réorganiser. Faites glisser vers la droite pour l’imbriquer comme menu déroulant sous l’élément précédent, vers la gauche pour annuler l’imbrication. Enregistrez le menu une fois terminé.
