Au-delà de la limite des 3 niveaux d’imbrication des menus Shopify

L’éditeur moderne Boutique en ligne > Navigation de Shopify vous permet d’imbriquer les éléments de menu sur 3 niveaux de profondeur. Pour la plupart des boutiques c’est largement suffisant. Mais si vous vendez des pièces, de la quincaillerie ou quoi que ce soit avec des milliers de références réparties sur des sous-catégories profondes, vous heurterez vite ce plafond. L’imbrication ancienne dans Breadcrumbs Uncomplicated, Categories Uncomplicated et Menus Uncomplicated est la voie propre pour passer outre.

Pourquoi la limite de 3 niveaux existe

L’interface admin moderne des Menus plafonne l’imbrication à 3 niveaux, et le menu déroulant fourni par la plupart des thèmes ne rend pas bien au-delà de toute façon. Mais le modèle de données de Shopify n’a pas un tel plafond - il a toujours pris en charge des arbres plus profonds via l’ancien schéma “un élément de menu pointe vers un autre menu par son nom”. C’est ce que l’imbrication ancienne dans l’application exploite.

Le contournement naïf (et pourquoi il échoue)

Les marchands tentent souvent de feindre un 4e niveau en dupliquant des sous-menus ou en créant des menus frères qui se chevauchent. Shopify ne peut pas distinguer deux éléments de menu portant le même nom, donc les noms et URL de collections en doublon embrouillent le résolveur d’URL. Le symptôme dans votre fil d’Ariane est un fil qui bascule au hasard sur la mauvaise branche pour certains produits, sans schéma apparent - parce que le résolveur a choisi le premier doublon qu’il a vu.

L’imbrication ancienne dans l’application

L’Imbrication des menus se trouve dans Liste de catégories > Imbrication des menus (ou Paramètres de Floatlist > Imbrication des menus dans Menus Uncomplicated).

• Utiliser l’imbrication moderne (limitée à 3 niveaux) (le défaut) - reflète l’admin Shopify, plafonné à 3 niveaux.
• Utiliser l’imbrication ancienne (niveaux illimités, évitez les doublons) - fait correspondre un élément de menu à un autre menu par son titre, et le menu correspondant devient un sous-arbre sous cet élément. Pas de plafond de profondeur.

L’imbrication ancienne est la manière dont la navigation Shopify fonctionnait avant que l’éditeur moderne n’existe, et le modèle de données la prend toujours en charge. Pour dépasser 3 niveaux, vous créez un menu de 4e niveau (ou plus profond) dans Boutique en ligne > Navigation dont le titre correspond à l’élément de menu feuille auquel il doit se rattacher. L’application les recoud au moment du rendu.

Le compromis, mentionné dans l’info-bulle des paramètres elle-même, est que les titres doivent être globalement uniques sur tous les menus - si deux menus ou éléments de menu partagent un titre, Shopify (et l’application) ne peut pas dire lequel est le parent.

Un exemple travaillé : un arbre de fixations à 5 niveaux

Un arbre de fixations à 5 niveaux, du genre dont un catalogue de quincaillerie sérieux a besoin :

• Fixations
  • Vis
    • Vis à métaux
      • Vis à métaux en acier inoxydable
        • Vis à métaux en acier inoxydable 18-8

La structure côté Shopify : un menu appelé main-menu avec Fixations > Vis > Vis à métaux (3 niveaux, la limite moderne), puis un menu séparé nommé Vis à métaux en acier inoxydable dont le premier élément est Vis à métaux en acier inoxydable 18-8. L’application voit la correspondance de titre entre l’élément de 3e niveau et le second menu, et les recoud comme s’ils formaient un seul arbre. Le fil d’Ariane sur un produit 18-8 affiche Accueil > Fixations > Vis > Vis à métaux > Vis à métaux en acier inoxydable > Vis à métaux en acier inoxydable 18-8.

Chaque titre de cet arbre est globalement unique - c’est ce qui permet à la correspondance de titres de l’imbrication ancienne de fonctionner.

Considérations de performance

Les arbres profonds signifient plus d’éléments de menu, ce qui signifie des instantanés légèrement plus grands et une Actualisation des catégories légèrement plus lente. En pratique un arbre de 6 niveaux et environ 500 éléments s’actualise en quelques secondes sur une boutique typique, et le rendu par page est inchangé car l’instantané est mis en cache.

Limites

1. Les titres doivent être globalement uniques sur tous les menus. Deux éléments de menu (ou deux menus) qui partagent un titre vont embrouiller la correspondance de titres sur laquelle repose l’imbrication ancienne - l’application signalera les doublons, mais vous devez les corriger dans Boutique en ligne > Navigation.
2. Le menu déroulant principal de la plupart des thèmes n’affichera pas au-delà du niveau 3 même si vos données sont plus profondes - vous aurez besoin d’une application de méga-menu pour le menu déroulant lui-même. Les fils d’Ariane resteront corrects.
3. Les résultats de la recherche Shopify renvoient des URL courtes /products/..., qui perdent le contexte du chemin complet (voir le billet sur les multi-collections pour comprendre comment l’application gère cela).

Résumé

Si vous vous êtes déjà senti à l’étroit dans le plafond à 3 niveaux des menus Shopify, l’imbrication ancienne dans Breadcrumbs Uncomplicated, Categories Uncomplicated ou Menus Uncomplicated vous laisse construire la taxonomie profonde que vos clients attendent, sans bidouillages ni collections en doublon - à condition que chaque menu et élément de menu ait un titre unique.