Créer une barre de menu Shopify avec Accueil, Catalogue et À propos pour ordinateur et mobile

Le premier menu d’une boutique en ligne n’a besoin que de trois liens soigneusement choisis — Accueil, Catalogue et À propos. Configuré une seule fois dans Contenu > Menus, il s’affiche dans l’en-tête pour ordinateur ainsi que dans le tiroir mobile, et peut être fixé dans une barre d’onglets inférieure sur smartphone pour rester visible en permanence.

Réponse rapide : comment créer une barre de menu avec Accueil, Catalogue et À propos

Créez une page À propos dans Boutique en ligne > Pages, ouvrez Contenu > Menus, sélectionnez votre menu principal et ajoutez trois éléments : Accueil (type de lien Page d’accueil), Catalogue (/collections/all ou une collection) et À propos (votre page). Enregistrez pour que votre thème l’affiche dans l’en-tête d’ordinateur et le tiroir latéral mobile. Ajoutez une barre d’onglets pour les téléphones.

Voici les 5 étapes d’installation :

1. Créer la page À propos dans Boutique en ligne > Pages et la rendre visible.
2. Ouvrir Contenu > Menus dans votre panneau d’administration Shopify et sélectionner le menu principal.
3. Ajouter les trois liens : Accueil (type Page d’accueil), Catalogue (/collections/all ou collection) et À propos (votre page).
4. Enregistrer le menu et vérifier dans les options de thème que l’en-tête pointe vers ce menu.
5. Tester sur mobile : examiner le tiroir de navigation et ajouter une barre inférieure si désiré.

Ce que contient une barre de menu Accueil, Catalogue et À propos

Lancer une boutique en ligne ne nécessite pas une arborescence complexe. Un menu condensé de trois liens offre aux nouveaux visiteurs des repères nets sans encombrement cognitif :

• Accueil : Sert de point d’ancrage permanent pour revenir facilement à la racine du site à tout moment.
• Catalogue : Constitue le pôle central où les acheteurs découvrent l’ensemble des articles, parcourent les collections et font leurs achats.
• À propos : Raconte l’histoire et les engagements de votre marque, fournissant aux premiers clients une raison concrète de vous faire confiance.

Se limiter initialement à trois liens garantit une lisibilité maximale sur tous les écrans. Les travaux de recherche du Nielsen Norman Group indiquent que la navigation apparente fonctionne de manière optimale lorsqu’elle comporte entre 4 et 5 options au niveau supérieur. Conserver trois liens garde les intitulés courts et lisibles sur petit écran, tout en laissant la place d’ajouter ultérieurement une page Contact ou une FAQ.

Étape 1 : Créer la page À propos et choisir le lien Catalogue

Avant d’assembler la barre de menu, préparez vos pages cibles afin que chaque intitulé se connecte directement à un contenu publié.

Créer la page À propos

Dans votre interface Shopify, rendez-vous dans Boutique en ligne > Pages et cliquez sur Ajouter une page. Donnez-lui le titre À propos ou Notre histoire. Rédigez un texte concis présentant l’origine de votre entreprise, la qualité de vos produits et vos engagements clients. La documentation officielle de Shopify sur les pages rappelle que les pages stockent des données évoluant peu, tandis que le guide Shopify sur les pages À propos souligne leur importance pour susciter la confiance. Activez le statut Visible et enregistrez. Notez que la création d’une About page ne l’ajoute pas d’office au menu ; cette étape s’effectue manuellement dans l’éditeur de navigation.

Choisir la destination du lien Catalogue

Déterminez vers quelle adresse orienter le Catalog link :

Selon la documentation du Centre d’aide Shopify sur la page catalogue, toute boutique possède nativement l’URL /collections/all, triée de A à Z par défaut. Pour modifier l’ordre, créez une collection ayant pour identifiant (handle) all, ou ciblez directement une collection personnalisée.

Étape 2 : Construire le menu dans Contenu > Menus

Une fois vos pages publiées, vous pouvez créer l’arborescence du menu dans l’administration.

Figure 1 : Illustration conceptuelle (Concept illustration) — Étape 2 : Construire le menu dans Contenu > Menus

Ajouter l’Accueil

Dans Contenu > Menus, cliquez sur votre menu principal puis sur Ajouter un élément de menu. Nommez-le Accueil. Dans le champ Lien, choisissez Page d’accueil. En sélectionnant ce type de lien spécifique, Shopify attribue automatiquement la racine de votre boutique.

Ajouter le Catalogue

Cliquez sur Ajouter un élément de menu et saisissez Catalogue (ou Boutique). Dans le champ Lien, choisissez une collection dans la liste, ou utilisez la page de tous les produits à l’adresse /collections/all. La documentation Shopify sur l’édition des menus met en garde contre la saisie manuelle d’URL brutes, qui risque de rompre la connexion et de provoquer une erreur 404. Choisissez directement dans la liste dès que la destination y figure.

Ajouter l’élément À propos

Cliquez sur Ajouter un élément de menu et écrivez À propos. Dans le champ Lien, ouvrez la catégorie Pages et cochez la page publiée lors de l’Étape 1.

Enregistrer et définir l’ordre d’affichage

Passez en revue les trois entrées configurées :

À l’aide des poignées situées à gauche de chaque ligne, glissez et déposez les éléments pour définir l’ordre : Accueil, Catalogue, À propos. Cet ordre reflète exactement ce qui s’affichera sur votre boutique en direct. Shopify imposant une limite de 200 modifications non enregistrées, veillez à cliquer régulièrement sur Enregistrer le menu. Vous pouvez aussi incorporer des émojis directement dans les champs de texte pour illustrer les libellés.

Étape 3 : Afficher le menu dans votre en-tête sur ordinateur

L’enregistrement dans l’admin ne garantit pas la visibilité immédiate du menu en vitrine ; son emplacement dépend de la configuration de votre thème.

Pour rattacher votre menu à l’en-tête d’ordinateur, rendez-vous dans Boutique en ligne > Thèmes et cliquez sur Personnaliser sur votre thème actif. Dans la colonne de gauche, cliquez sur la section En-tête. Désignez-y le menu que vous venez de construire. Les noms des paramètres varient selon le thème : cherchez l’option de menu dans cette section.

Sur grand écran, assurez-vous que votre thème déploie les liens à l’horizontale plutôt que de les dissimuler derrière une icône. Les études d’utilisabilité du Nielsen Norman Group sur la navigation pour ordinateur démontrent que des liens clairement exposés facilitent la découverte des pages, là où les menus cachés freinent les conversions. Vérifiez que votre Desktop header menu présente bien les trois éléments de manière aérée.

Comment le même menu s’affiche sur mobile

Si les ordinateurs offrent une largeur généreuse pour disposer les liens côte à côte, les téléphones imposent une contrainte spatiale bien plus stricte.

Figure 2 : Illustration conceptuelle (Concept illustration) — Comment le même menu s’affiche sur mobile

Sur smartphone, la majorité des thèmes Shopify replient automatiquement l’en-tête dans un panneau coulissant (Menu drawer) activable par une icône hamburger. Les recherches du NN/g confirment que dissimuler la navigation diminue la visibilité des contenus clés. Comme un menu à trois liens occupe très peu d’espace, permettre aux acheteurs d’y accéder sans clic préalable constitue un avantage ergonomique notable.

Si vous souhaitez adopter une structure différente selon le support, vous pouvez afficher un menu différent sur ordinateur et mobile.

Étape 4 : Ajouter une barre d’onglets inférieure sur mobile

Si une grande partie de vos clients navigue sur téléphone, un bouton hamburger garde vos liens cachés tant qu’ils n’appuient pas dessus.

Une Bottom tab bar ancre les liens stratégiques au bas de l’écran. Selon la recherche du NN/g sur la navigation mobile, les barres d’onglets sont persistantes : elles restent visibles que l’utilisateur fasse défiler la page ou non.

Les thèmes Shopify standards n’embarquent généralement pas de barre inférieure par défaut, ce qui nécessite généralement une application ou du code personnalisé. En configurant votre barre inférieure, conservez exactement les trois mêmes liens (Accueil, Catalogue, À propos) avec des URL identiques à celles de votre en-tête. Cette cohérence évite de dérouter les utilisateurs lorsqu’ils passent d’un appareil à l’autre.

Ajouter des icônes et tester sur toutes les tailles d’écran

Associer des repères visuels accélère la reconnaissance des sections sur écran tactile, mais leur utilisation requiert de la rigueur.

Bien que les émojis s’insèrent facilement dans les libellés de texte Shopify, l’intégration d’icônes SVG nettes requiert des fonctionnalités de thème ou une application de navigation. Le Nielsen Norman Group recommande d’employer un Icon with label (une icône accompagnée d’un texte explicite), car les pictogrammes isolés prêtent à confusion. Si vous utilisez une solution dédiée, consultez notre guide pour définir une icône pour chaque élément de menu.

Vérifiez également l’accessibilité des zones tactiles. Le critère 2.5.8 des règles WCAG 2.2 du W3C préconise une taille de cible tactile minimale de 24×24 pixels CSS (avec quelques exceptions).

Effectuez ces vérifications avant la mise en ligne :

1. Écran d’ordinateur : Les trois liens s’affichent bien horizontalement sans retour à la ligne involontaire.
2. Tablette : La transition entre le menu horizontal et l’icône hamburger s’effectue proprement.
3. Mobile vertical : Le tiroir s’ouvre avec fluidité et présente les trois liens sans erreur.
4. Mobile horizontal : La barre de navigation ne masque pas une surface excessive d’écran.
5. Vérification des liens : Chaque lien redirige instantanément vers la destination prévue.

Problèmes fréquents et solutions

Si votre menu ne réagit pas comme prévu, examinez ces résolutions types ainsi que notre tutoriel pour corriger les liens brisés dans votre menu de navigation :

Le lien aboutit à une page d’erreur 404

Si le lien Catalogue ou À propos renvoie une erreur 404, vous avez probablement saisi une URL manuelle contenant une coquille. Modifiez l’élément dans Contenu > Menus et pointez directement vers la page ou collection via la liste de sélection.

La page À propos n’apparaît pas dans l’en-tête

Vous avez rédigé la page, mais aucun lien n’apparaît en vitrine. Les pages ajoutées dans Boutique en ligne > Pages ne s’insèrent pas d’elles-mêmes dans la navigation. Vous devez ajouter l’élément dans Contenu > Menus et vérifier que la page est bien sur Visible.

Le catalogue présente un ordre de produits inhabituel

Le lien s’ouvre, mais les produits sont mal ordonnés. L’URL /collections/all de Shopify trie par défaut par ordre alphabétique. Créez une collection portant le handle all.

L’en-tête ne reflète pas les modifications récentes

Vous avez enregistré vos modifications mais la boutique affiche toujours l’ancienne liste. Dans Boutique en ligne > Thèmes > Personnaliser, inspectez la section En-tête pour vérifier que le bon menu est sélectionné.

Cliquer sur un élément parent n’ouvre aucune page

Si vous placez des sous-éléments sous Catalogue et que cliquer sur Catalogue ne navigue pas, cela provient du comportement de votre thème. De nombreux thèmes traitent les titres de menus déroulants comme de simples déclencheurs d’ouverture et non comme des liens actifs.

Compromis : quand un menu à trois liens ne suffit plus

Un menu à trois liens constitue une excellente base, mais l’expansion de votre activité imposera tôt ou tard des évolutions.

Dépasser le cap des trois liens

Lorsque votre catalogue s’étoffe de plusieurs départements, un lien Catalogue unique complique la découverte des articles. Dans ce cas, vous pouvez ajouter un sous-menu sous Catalogue. Les menus Shopify gèrent nativement jusqu’à 2 niveaux d’imbrication pour les menus déroulants. Pour des catalogues très vastes sur grand écran, vous pouvez également transformer votre catalogue en méga menu afin d’afficher des grilles à plusieurs colonnes avec visuels promotionnels.

Visionnez ce tutoriel officiel de la Shopify Academy détaillant la création de menus déroulants :

Limites des barres d’onglets inférieures sur mobile

Bien qu’une barre d’onglets procure un accès direct, les études du NN/g rappellent qu’elle n’est recommandée que pour un petit volume de choix. Au-delà de 4 à 5 onglets, la barre devient surchargée. De plus, la barre occupe un espace vertical fixe. Si votre audience achète quasi exclusivement sur ordinateur, une barre inférieure mobile est facultative.

Où se situe Navi+

Paramétrer vos trois liens Accueil, Catalogue et À propos dans l’admin Shopify se fait en quelques clics, mais les options natives des thèmes offrent peu de contrôle sur l’affichage mobile.

Si vous souhaitez épingler Accueil, Catalogue et À propos au bas de chaque écran mobile avec une icône et une étiquette distinctes pour chaque onglet, Navi+ Tab Bar vous permet de l’activer sans modifier le code de votre thème. Votre menu principal Shopify reste en place pour l’en-tête d’ordinateur, tandis que ces trois liens deviennent accessibles d’un seul geste sur smartphone.

Au fur et à mesure que votre boutique grandit, Navi+ évolue avec vous :

• Navi+ Mobile Menu : Concevez un tiroir mobile personnalisé selon l’identité de votre marque et synchronisez vos liens Shopify en un clic.
• Navi+ Desktop Mega Menu : Structurez les grands catalogues sous forme de méga menus organisés en colonnes avec bannières promotionnelles (jusqu’à 3 niveaux de profondeur).

Pour déterminer la structure la plus adaptée à vos besoins, consultez notre guide pour choisir le bon type de menu pour votre boutique Shopify.

Liste d’actions

Suivez cette liste de vérification avant de lancer votre menu à trois liens :

• Publier la page À propos : Vérifier que la page est créée et configurée sur Visible dans Boutique en ligne > Pages.
• Définir la cible Catalogue : Choisir entre /collections/all par défaut ou une collection avec le handle all.
• Accéder à l’éditeur de navigation : Ouvrir Contenu > Menus et cliquer sur votre menu principal.
• Ajouter l’Accueil : Sélectionner le type Page d’accueil pour que le lien soit assigné automatiquement.
• Ajouter le Catalogue : Choisir l’URL du catalogue directement dans la liste déroulante des collections.
• Ajouter la page À propos : Sélectionner la page publiée dans la liste interne des Pages.
• Ordonner et enregistrer : Déplacer les éléments dans l’ordre voulu et cliquer sur Enregistrer le menu.
• Relier l’en-tête du thème : Dans Boutique en ligne > Thèmes > Personnaliser, s’assurer que l’En-tête exploite ce menu.
• Vérifier le tiroir mobile : Ouvrir la prévisualisation sur smartphone pour contrôler l’affichage.
• (Optionnel) Activer la barre d’onglets : Épingler 3 onglets accompagnés de texte au bas de l’écran mobile.
• Tester les liens en direct : Cliquer sur chaque bouton sur ordinateur et smartphone pour exclure toute erreur.

Foire aux questions

Vers quelle adresse le lien Catalogue doit-il pointer ?

Les boutiques Shopify disposent nativement de la page /collections/all listant tous les articles visibles par ordre alphabétique. Pour modifier l’ordre d’affichage, créez une collection avec le handle all ou ciblez directement une collection de votre choix.

Pourquoi ma page À propos ne s’affiche-t-elle pas dans le menu ?

Rédiger une page dans Boutique en ligne > Pages ne la relie pas spontanément à votre en-tête. Vous devez vous rendre dans Contenu > Menus et l’associer explicitement comme élément de menu.

Le même menu s’affiche-t-il automatiquement sur mobile ?

Oui, la majorité des thèmes reprennent le menu d’en-tête dans le tiroir mobile accessible via l’icône hamburger. Le style visuel variant selon le thème, contrôlez le rendu directement sur un téléphone portable.

Faut-il une application pour installer une barre d’onglets inférieure ?

Les thèmes Shopify habituels proposent un en-tête et un menu tiroir, mais pas de barre d’onglets ancrée en bas. L’ajout d’une telle barre requiert une application ou du code personnalisé, et convient à un petit nombre de liens clés.

Peut-on insérer des icônes dans les liens de menu ?

Les émojis peuvent être écrits directement dans les champs de texte de l’admin. Pour des icônes graphiques SVG soignées, il est nécessaire d’utiliser les options de votre thème ou une application dédiée, en veillant à toujours conserver une étiquette textuelle explicite.

Pourquoi mon lien de menu renvoie-t-il une erreur 404 ?

Taper une URL brute à la main risque de briser la connexion si l’identifiant de la page ou de la collection est modifié par la suite. Sélectionner vos destinations directement dans les listes proposées par Shopify garantit la longévité de vos liens.

Sources

• Shopify Help Center: Editing menus
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Add and edit pages
• Shopify Help Center: Change catalog page
• Shopify Help Center: About us page
• Nielsen Norman Group: Mobile navigation patterns
• Nielsen Norman Group: Visible navigation on mobile
• Nielsen Norman Group: Desktop navigation not hamburger
• Nielsen Norman Group: Hamburger menus and discoverability
• Nielsen Norman Group: Icon usability
• W3C: WCAG 2.2 Target Size (Minimum)