Réparer les liens du menu de navigation Shopify : liens cassés, manquants et non cliquables

Dans la gestion quotidienne d’une boutique en ligne, peu de situations sont aussi déconcertantes que de découvrir un lien de navigation qui ne réagit pas lorsqu’on clique dessus. Vous sélectionnez une catégorie principale dans l’en-tête de votre boutique en espérant afficher un catalogue de produits soigneusement organisé, mais rien ne se produit. Pire encore, un acheteur appuie sur un lien depuis son téléphone portable et atterrit sur une page d’erreur 404 vide.

Comprendre la distinction entre un lien de menu défaillant et un lien de navigation correctement configuré commence par diagnostiquer l’endroit précis où la liaison a échoué. Sur la plupart des boutiques Shopify, les liens de menu défectueux ne résultent pas d’anomalies de programmation complexes dissimulées dans les modèles Liquid. La plupart des cas se rattachent à quatre symptômes opérationnels bien précis : des liens morts pointant vers des ressources supprimées, des liens orientant les acheteurs vers une mauvaise destination, des en-têtes parents de menus déroulants qui ouvrent des sous-menus sans rediriger, ou encore des modifications enregistrées dans l’administration qui ne s’affichent pas sur la vitrine en direct.

Chaque symptôme dispose d’une solution méthodique qui commence directement dans votre tableau de bord Shopify sous Contenu > Menus, sans recourir précipitamment à des modifications de code risquées. Ce guide vous accompagne pas à pas pour poser le bon diagnostic, réparer les destinations en toute sécurité et rendre vos en-têtes déroulants cliquables sur ordinateur comme sur mobile.

Réponse rapide : comment réparer les liens dans un menu Shopify

Pour réparer les liens dans un menu de navigation Shopify, ouvrez Contenu > Menus, recherchez l’élément concerné, cliquez sur le x à côté du champ de lien et choisissez la bonne collection, page ou fiche produit, puis enregistrez le menu (Shopify Help Center). Si un élément parent avec menu déroulant n’est pas cliquable, cela provient généralement de la conception du thème : la plupart des thèmes affichent les en-têtes déroulants comme des boutons et non comme des liens (Shopify Help Center).

Suivez ces cinq étapes pour remettre en état un lien défaillant :

1. Ouvrez Contenu > Menus dans votre interface d’administration Shopify pour accéder à vos listes de navigation (Shopify Help Center).
2. Ouvrez le menu assigné à votre en-tête (tel que le “Menu principal”) et repérez la ligne qui pose problème.
3. Cliquez sur le x à côté du champ de lien pour dissocier l’ancienne cible, puis sélectionnez la collection, la page ou le produit adéquat (Shopify Help Center).
4. Enregistrez le menu en cliquant sur le bouton d’enregistrement dans la barre d’action supérieure ou inférieure.
5. Testez le lien dans une fenêtre de navigation privée sur ordinateur et sur mobile afin de vérifier que la page se charge sans encombre.

S’il s’agit d’une catégorie de premier niveau abritant des sous-menus qui n’affiche aucune page lors d’un clic, ce comportement dépend de l’architecture de votre thème. Consultez la section ci-dessous détaillant pourquoi un élément parent avec menu déroulant n’est pas cliquable pour adopter la solution appropriée.

Identifier votre symptôme : mort, incorrect, non cliquable ou non actualisé

Avant de toucher aux réglages de navigation ou de modifier des fichiers de thème, vous devez identifier avec exactitude votre symptôme d’affichage. Les différentes anomalies visuelles proviennent de zones distinctes de la plateforme Shopify. Traiter un menu parent non cliquable comme un lien vers une ressource supprimée ne ferait que compliquer votre configuration.

Utilisez le tableau de diagnostic ci-dessous pour faire correspondre le comportement observé sur votre vitrine avec sa cause fondamentale :

Lors de votre inspection, prêtez une attention rigoureuse à la réaction de l’interface. Un lien brisé renvoie vers une page d’erreur 404 standard. Une destination erronée exige simplement de désigner la ressource appropriée dans le sélecteur. En revanche, un en-tête configuré en tant que bouton déroulant réagit de manière fondamentalement différente d’un lien classique, car le navigateur capte l’événement pour basculer l’affichage des sous-éléments.

Réparer un lien cassé ou erroné dans Contenu > Menus

Lorsqu’un lien de menu conduit à une page 404 ou affiche une catégorie inappropriée, la correction principale se déroule dans vos paramètres de navigation. Dans l’administration Shopify, vous pouvez afficher et modifier les menus de votre boutique en ligne depuis Contenu > Menus (Shopify Help Center).

Figure 1 : Illustration conceptuelle (Concept illustration) — Réparer un lien cassé ou erroné dans Contenu > Menus

Pour corriger l’élément défectueux, suivez ces trois étapes :

Supprimer l’ancien lien

Rendez-vous dans Contenu > Menus et cliquez sur le titre du menu qui contient l’élément à corriger. Cliquez sur Modifier en regard de la ligne correspondante. Dans la fenêtre de modification, vous trouverez le champ Nom et le champ Lien. Pour modifier la destination de l’élément de menu, cliquez sur le x à côté du champ de lien (Shopify Help Center). Choisissez ensuite la nouvelle destination.

Choisir une collection ou une page

Le champ de lien étant désormais vide, cliquez à l’intérieur pour déployer le sélecteur de ressources de Shopify. Shopify permet de créer un lien vers des produits, des collections, des pages, des articles de blog et des politiques. Comme le précise la documentation de Shopify, dans la plupart des cas, vous devez créer un élément avant de pouvoir créer un lien vers celui-ci (Shopify Help Center). Si vous prévoyez une nouvelle ligne de produits, veillez à ce qu’elle soit déjà publiée dans votre tableau de bord avant d’essayer de la lier ici.

Sélectionnez toujours votre cible directement depuis cette liste plutôt que de saisir une URL manuellement (comme /collections/vetements). La sélection dans la liste évite aussi les fautes de frappe dans le chemin.

[!NOTE] Si un élément a subitement disparu de votre menu sans modification de votre part, vérifiez vos collections et pages. Si vous supprimez une ressource utilisée dans les menus de votre boutique, tous les éléments de menu associés sont également supprimés automatiquement (Shopify Help Center).

Enregistrer le menu

Dès que la ressource adéquate figure dans le champ de lien, cliquez sur Appliquer les modifications, puis sur le bouton Enregistrer le menu situé dans la barre principale de l’administration. La nouvelle adresse est désormais enregistrée.

Rediriger les anciennes URL après un changement de handle

Les commerçants sont régulièrement confrontés à des liens brisés après avoir réorganisé leur catalogue. Par exemple, si vous modifiez le handle d’URL d’une collection de /collections/tenues-dete vers /collections/vetements-estivaux, les anciens liens ou favoris qui utilisent l’ancien chemin peuvent aboutir sur une page 404.

Lorsque vous modifiez une URL sur votre boutique Shopify, vous pouvez créer une redirection d’URL pour éviter que vos visiteurs et les moteurs de recherche ne tombent sur une page introuvable (Shopify Help Center).

Pour réussir la redirection de vos anciennes URL, gardez deux règles essentielles à l’esprit :

Premièrement, vous ne pouvez rediriger que depuis des URL brisées (Shopify Help Center). Si l’ancienne adresse n’existe plus ou a été supprimée, Shopify réorientera automatiquement les visiteurs vers votre nouvelle collection.

Deuxièmement, si l’URL charge toujours une page web valide, la redirection d’URL ne fonctionnera pas (Shopify Help Center). Si l’adresse précédente correspond encore à une ressource active, la plateforme continuera de charger cette page plutôt que d’exécuter la redirection configurée.

Après avoir créé votre redirection, retournez dans Contenu > Menus pour mettre à jour directement la cible du menu. Ne comptez pas sur les redirections pour votre navigation principale : elles servent de filet de sécurité pour les anciens liens, tandis que le menu doit pointer directement vers l’URL active.

Pourquoi un élément parent avec menu déroulant n’est pas cliquable

L’une des interrogations les plus fréquentes sur Shopify survient lorsqu’on ajoute des sous-menus sous un élément principal. Vous créez un élément nommé “Boutique” pointant vers /collections/all, puis vous glissez des sous-catégories comme “Chemises” et “Pantalons” sous cet en-tête. Dès l’enregistrement, cliquer sur “Boutique” sur votre vitrine n’affiche plus le catalogue complet de vos produits.

Figure 2 : Illustration conceptuelle (Concept illustration) — Pourquoi un élément parent avec menu déroulant n’est pas cliquable

Il s’agit généralement d’un choix de conception du thème, et non d’un dysfonctionnement. Comme l’indique la documentation officielle de Shopify, la plupart des thèmes implémentent les en-têtes de menu déroulant sous forme de boutons plutôt que de liens cliquables (Shopify Help Center).

Sur le plan technique, de nombreux thèmes récents conçoivent leurs conteneurs déroulants à l’aide des balises HTML natives <details> et <summary>. Selon la documentation MDN Web Docs, cliquer sur l’élément <summary> bascule l’état d’ouverture ou de fermeture de l’élément parent <details> (MDN Web Docs).

Comme le navigateur réserve le clic sur <summary> pour gérer l’affichage déroulant, l’interaction se trouve modifiée :

• Ouvre uniquement le menu déroulant : L’action de clic est entièrement interceptée par le navigateur pour déployer ou masquer les sous-éléments, ce qui empêche toute redirection vers une page web liée.

Les commerçants témoignent fréquemment de cette contrainte. Sur le forum Shopify Community, plusieurs utilisateurs soulignent que les liens parents dans l’en-tête ne sont plus cliquables après l’ajout de menus déroulants et de sous-liens. Un autre vendeur confirme cette situation : après avoir transformé sa navigation en menu déroulant, celle-ci ne dirige plus vers la page de tous les produits (Shopify Community).

Lorsque vous organisez des hiérarchies denses, maîtriser la structure de menu multiniveau Shopify vous permet de hiérarchiser vos catégories sans dérouter les utilisateurs mobiles.

Rendre le lien parent cliquable : paramètre de thème, astuce de menu ou code

Si votre boutique exige que les visiteurs puissent aussi bien parcourir la catégorie parente que déployer les sous-menus, trois options s’offrent à vous, de la plus simple à la plus technique :

Vérifier le type de menu de l’en-tête

Avant de modifier du code, inspectez les paramètres dans l’éditeur de thème. Certains thèmes proposent des options intégrées pour déterminer comment l’en-tête présente les listes déroulantes.

Par exemple, sur le thème Trade, les retours de la communauté ont mis en évidence que lorsque le type de menu est défini sur “méga menu”, les ajustements visant à rendre le parent cliquable ne produisent aucun effet, alors qu’en choisissant “menu déroulant”, le comportement fonctionne convenablement (Shopify Community). Explorez la section En-tête de votre thème pour voir si des agencements natifs alternatifs sont proposés.

Ajouter un sous-lien “Tout afficher”

Une alternative sans code consiste à réorganiser le premier sous-élément. Au lieu de forcer l’en-tête principal à faire office de bouton et de lien en même temps, vous le configurez uniquement comme un dossier thématique.

Dans Contenu > Menus, modifiez l’élément parent. Si vous ne souhaitez pas que l’en-tête mène vers une page précise, saisissez le caractère # dans le champ de lien (Shopify Help Center). Créez ensuite un nouvel élément imbriqué tout en haut de ce menu déroulant, intitulé “Tout afficher” ou “Voir toute la collection”, pointant directement vers la collection parente.

Cette méthode offre trois atouts majeurs :

1. Elle ne requiert aucun changement de code, supprimant tout risque d’altérer les fichiers du thème.
2. Le parent reste un menu déroulant, tout en offrant aux acheteurs un lien vers la collection complète.
3. Les acheteurs comprennent immédiatement que la ligne principale déploie le menu et que le premier lien permet d’explorer la gamme complète.

Modifier le code du thème (pensez à sauvegarder)

Si vous tenez impérativement à ce que le libellé parent déclenche une navigation vers la collection lors d’un clic sur ordinateur, vous pouvez intervenir dans les fichiers Liquid du thème (comme header-dropdown-menu.liquid ou header.liquid).

[!WARNING] Avant toute intervention dans le code, gardez à l’esprit la recommandation officielle de Shopify : il est judicieux de créer une copie de sauvegarde de votre thème avant de le personnaliser (Shopify Help Center). Dupliquer votre thème actif vous garantit un point de restauration immédiat si une modification de balise altère votre mise en page.

Le principe technique consiste à entourer le texte de l’élément parent d’une balise d’ancrage HTML <a> pourvue d’un attribut href valide, plutôt que de le laisser sous la forme d’un simple nœud de texte <summary>. Cette structure est également essentielle pour l’exploration par les moteurs de recherche. D’après Google Search Central, généralement, Google ne peut explorer votre lien que s’il s’agit d’un élément HTML <a> (Google Search Central) ; consultez nos conseils pour s’assurer que Google peut explorer votre menu.

Sur ordinateur, cette approche met généralement en place une commande scindée :

• Lien avec flèche : La partie textuelle de la catégorie fait office de lien direct vers la collection, tandis qu’une icône de chevron adjacente sert de bouton pour ouvrir la liste déroulante.

Toutefois, la prudence s’impose. Les discussions sur le forum concernant Dawn 7.0.1 prouvent que les ajustements manuels en Liquid fonctionnant sur ordinateur peuvent échouer sur smartphone, ou cesser de fonctionner sur une autre version du thème en raison de modifications des classes CSS ou du DOM (Shopify Community).

Les modifications de menu ne s’affichent pas sur la boutique

Autre incident fréquent : vous réorganisez vos éléments dans l’administration, enregistrez vos modifications, mais votre vitrine continue d’afficher les anciens liens.

Vérifier quel menu est rattaché à l’en-tête

Dans la majorité des cas, ce décalage provient de la modification d’un menu qui n’est pas celui utilisé en façade. Votre boutique peut contenir plusieurs listes de menus dans Contenu > Menus (comme “Menu principal”, “Navigation 2026”, “Menu Mobile” ou “Pied de page”).

Pour vérifier la configuration active :

1. Dans l’administration Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté de votre thème actif.
3. Dans la barre latérale gauche, sélectionnez la section En-tête.
4. Examinez le paramètre Menu dans le volet droit.

Si l’en-tête utilise “Nouvelle Navigation” alors que vos changements ont été portés dans “Menu principal”, votre boutique n’affichera jamais ces ajustements. Modifiez le réglage du thème pour pointer sur le menu révisé, ou effectuez vos modifications directement sur la liste attribuée à l’en-tête.

L’astuce de réenregistrement du handle

Si le thème pointe sur la bonne liste de menu mais que les nouveaux liens tardent à paraître, un délai de mise en cache peut être en cause.

Sur la communauté Shopify, des marchands confrontés à des retards de synchronisation ont identifié une astuce administrative : modifier et enregistrer le handle du menu, puis l’enregistrer à nouveau avec son handle initial (Shopify Community).

[!NOTE] Cette technique de réenregistrement du handle constitue une astuce signalée par la communauté et non une procédure d’assistance officielle de Shopify. Avant de modifier des handles, faites toujours un test en navigation privée pour vous assurer que votre navigateur ne conserve pas une version en cache de la page.

Le menu déroulant se ferme trop tôt sur ordinateur

Une gêne ergonomique bien connue survient lorsqu’un lien est parfaitement fonctionnel, mais que les visiteurs ne parviennent pas à atteindre les sous-éléments parce que le panneau déroulant se referme prématurément.

Dans ce cas, l’utilisateur survole la catégorie supérieure avec sa souris, commence à descendre vers un sous-élément, et voit la liste disparaître subitement avant d’avoir pu cliquer.

D’après les analyses d’experts sur le forum de la communauté, ce comportement est généralement causé par un espace involontaire créé par la bordure entre l’élément de premier niveau et le volet déroulant, rompant le pont de survol de la souris (Shopify Community). Dès que le curseur traverse cette zone vide, l’état de survol est perdu et le menu se referme.

Des conflits de styles CSS injectés par des applications tierces récemment installées peuvent produire le même effet. Pour identifier l’origine du souci sans écrire de règles CSS hasardeuses, désactivez temporairement les blocs d’applications dans les paramètres de votre thème, ou rapprochez-vous du développeur de votre thème pour corriger les espacements de survol.

Compromis : quand ne pas modifier le code du thème

Face à un lien parent récalcitrant, il est tentant de récupérer un extrait de code Liquid sur un forum et de l’insérer sans tarder dans les fichiers de son thème. Cependant, ces modifications manuelles génèrent des coûts de maintenance tangibles :

• Écrasement lors des mises à jour : Lorsque l’éditeur de votre thème publie une mise à jour d’optimisation ou de sécurité, vos retouches manuelles dans header.liquid ou header-dropdown-menu.liquid ne sont pas reportées automatiquement. Vous devrez réappliquer et tester ces modifications à chaque nouvelle version.
• Incompatibilité entre versions de thèmes : Les structures de thèmes changent constamment. Comme observé pour le thème Dawn 7.0.1, un morceau de code fonctionnel sur une version peut devenir inopérant sur une autre parce que les balises summary ou les sélecteurs CSS ont été remaniés (Shopify Community).
• Perturbations sur mobile : Les scripts conçus pour le survol sur ordinateur réagissent souvent mal sur écran tactile. Toucher une catégorie parente sur mobile peut déclencher immédiatement le changement de page avant que l’utilisateur n’ait pu voir ou toucher les sous-menus.

Pour de nombreuses boutiques, l’ajout d’un sous-lien “Tout afficher” offre une navigation claire sans code personnalisé à maintenir. Si vos gammes de produits exigent des structures plus élaborées, examinez les limites des menus de thèmes pour déterminer si une application dédiée répondrait mieux à vos besoins.

Où se situe Navi+

Si votre catalogue nécessite une organisation poussée et que vous préférez ne pas intervenir dans le code Liquid de votre thème, Navi+ apporte une réponse modulaire.

Navi+ est une solution de navigation spécialisée comprenant des menus tiroirs pour mobile, des méga menus pour ordinateur et mobile, ainsi qu’une barre d’onglets pour smartphone, prenant en charge jusqu’à trois niveaux d’arborescence. Au lieu d’altérer les fichiers du thème, Navi+ s’exécute de façon autonome en complément de votre interface.

Chaque élément configuré dans Navi+ propose des options de liaison sur mesure :

• Attribuer # à un élément parent permet à l’utilisateur d’appuyer pour afficher les sous-éléments sans quitter la page (Documentation Navi+).
• Pour les boutiques nécessitant un accès direct au parent, les en-têtes de section de Navi+ peuvent à la fois créer un lien et déployer les sous-menus : toucher le texte permet de dérouler la liste, tandis qu’appuyer sur la flèche dédiée ouvre directement la page de collection (Changelog Navi+).

Si votre thème transforme systématiquement vos éléments parents en boutons et que vous souhaitez éviter la maintenance de code d’en-tête personnalisé, vous pouvez concevoir votre menu dans Navi+ et définir précisément pour chaque ligne si elle doit rediriger, se déployer, ou combiner les deux actions.

Checklist après correction

Une fois vos liens remis en état, passez en revue cette checklist pour vérifier que l’ensemble de votre dispositif de navigation fonctionne parfaitement :

• Ouvrez une fenêtre de navigation privée sur ordinateur et sur mobile afin de tester votre vitrine sans éléments mis en cache.
• Cliquez ou appuyez sur chaque élément des niveaux 1, 2 et 3 pour confirmer que l’URL de destination se charge comme prévu.
• Vérifiez l’absence d’erreurs 404 sur les collections renommées ou dont le handle a été modifié, et confirmez la présence des redirections d’URL dans l’administration (Shopify Help Center).
• Dans l’éditeur de thème, vérifiez que la section En-tête utilise bien la liste de menu que vous venez d’enregistrer dans Contenu > Menus.
• Vérifiez qu’une copie de sauvegarde de votre thème a bien été réalisée avant toute modification manuelle de code (Shopify Help Center).
• Contrôlez régulièrement vos menus lors de la suppression de collections, pages ou fiches produits pour identifier les éléments retirés d’office (Shopify Help Center).
• Testez le survol sur ordinateur pour vous assurer que les menus déroulants ne se referment pas brutalement lors des déplacements de la souris.
• Consultez notre guide complet des menus Shopify pour maintenir une arborescence harmonieuse et accessible au fil de la croissance de votre catalogue.

Foire aux questions

Pourquoi ne puis-je pas cliquer sur mon élément de menu principal doté d’un sous-menu ?

Shopify explique que la majorité des thèmes conçoivent les en-têtes de menu déroulant sous la forme de boutons plutôt que de liens cliquables (Shopify Help Center). Vous pouvez contrôler les options de type de menu dans votre thème (Shopify Community) ou insérer un sous-lien “Tout afficher” pointant vers la collection parente.

Pourquoi un élément a-t-il subitement disparu de mon menu ?

Si vous supprimez une ressource (comme une collection, une page ou un produit) rattachée à vos menus, tous les éléments de menu qui y font référence sont également supprimés d’office (Shopify Help Center). Vérifiez si la ressource correspondante n’a pas été effacée récemment.

Pourquoi mon lien de menu renvoie-t-il une erreur 404 après avoir renommé une collection ?

Lorsque vous modifiez le handle ou l’adresse d’une page sur votre boutique, vous pouvez créer une redirection d’URL pour conserver le trafic (Shopify Help Center). Cependant, les redirections ne s’appliquent qu’aux URL rompues, vous devez donc toujours réassigner directement la nouvelle cible dans Contenu > Menus.

Pourquoi mon menu de navigation ne se met-il pas à jour sur ma boutique ?

Vérifiez quel menu est sélectionné dans la section En-tête de votre éditeur de thème. Une astuce mentionnée par la communauté consiste à changer et enregistrer le handle du menu, puis à le réenregistrer avec son handle d’origine (Shopify Community) ; faites d’abord un test en navigation privée.

Combien de niveaux peut comporter un menu déroulant Shopify ?

L’élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués sous lui (Shopify Help Center), ce qui permet de créer jusqu’à trois niveaux de navigation au total.

Est-il sans danger de modifier le code de l’en-tête pour corriger le problème ?

Shopify conseille de créer une copie de sauvegarde en dupliquant votre thème avant d’en modifier le code (Shopify Help Center). Des modifications manuelles en Liquid risquent de provoquer des erreurs de mise en page lors des mises à jour ou sur les écrans tactiles.

Sources

• Shopify Help Center: Editing Menus — Gestion des destinations de menu et association des ressources.
• Shopify Help Center: Drop-down Menus — Règles des menus imbriqués et comportement des boutons parents.
• Shopify Help Center: URL Redirects — Principes et restrictions applicables aux redirections d’URL.
• Shopify Help Center: Duplicating Themes — Bonnes pratiques de sauvegarde avant modification de code.
• Google Search Central: Make Links Crawlable — Critères de conception des balises d’ancrage HTML pour l’indexation.
• MDN Web Docs: The Summary Element — Fonctionnement technique des éléments HTML summary et details.
• Shopify Community: Why Isn’t My Navigation Menu Updating — Échanges sur les délais de synchronisation des handles de menu.
• Shopify Community: Why Aren’t the Main Menu Links Working — Analyse des bordures et ruptures de survol sur ordinateur.
• Shopify Community: Dropdown Menu Clickable - Trade — Impact du type de menu d’en-tête dans le thème Trade.
• Shopify Community: Dawn Theme 7.0.1 Dropdown Menu Parent Link Not Clickable — Témoignages de marchands sur les en-têtes parents non cliquables.
• Shopify Community: How to Make My Shop Link in the Header Work Again — Retours d’expérience sur la perte de lien lors du passage en menu déroulant.
• Navi+ Documentation: Menu Item Link Types — Configuration des types de liens et comportement des liens dièse sur tactile.
• Navi+ Changelog: Latest Update — Double fonction de liaison et de déploiement pour les en-têtes de section.