Architettura dei Menu Multi-Livello su Shopify: Tassonomie Annidate, Navigazione Profonda e Wayfinding

Impostare la navigazione per un piccolo negozio è immediato: pochi link chiari nell’header guidano direttamente i clienti verso i prodotti. Ma quando il catalogo cresce attraverso reparti, modelli e specifiche tecniche, il menu cessa di essere una semplice scelta grafica. Diventa una vera e propria disciplina ingegneristica di wayfinding sul negozio.

Nei negozi Shopify standard, i merchant si imbattono in un vincolo strutturale di piattaforma: i menu consentono una voce radice più un massimo di due sottolivelli annidati. Questo tetto di 3 livelli non è un limite casuale, ma una protezione di usabilità. Gli store più efficaci non aggirano questo limite con alberature caotiche, ma presentano questi tre livelli tramite mega menu su desktop, percorsi graduali su mobile e delegano i dettagli ai filtri di collezione.

Risposta rapida: Fino a che profondità può spingersi un menu Shopify?

Un menu Shopify può comprendere tre livelli: una voce principale più un massimo di due livelli a tendina annidati (Centro assistenza Shopify). I temi supportano tale profondità, ma i menu profondi sono complessi da usare. Raggruppali in mega menu su desktop e in pannelli o accordion su mobile (NN/g).

Come Shopify memorizza i menu multi-livello

Shopify organizza i menu come elenchi di link gerarchici nel database. Mentre le guide del passato facevano riferimento a Online Store > Navigation, la documentazione attuale instrada la gestione dei menu attraverso Content > Menus. Comprendere i vincoli di annidamento e come i temi interpretano queste strutture evita errori visivi critici sul front-end.

Annidare le voci in Content > Menus

Per comporre un menu multi-livello in Shopify, accedi al pannello di amministrazione e vai su Content > Menus. Apri il menu principale, aggiungi i link e trascina gli elementi figli verso destra sotto la voce genitore. La documentazione ufficiale stabilisce che una voce radice può avere fino a due livelli a tendina annidati, determinando un tetto invalicabile di 3 livelli totali. Un quarto livello non è realizzabile nell’admin nativo.

Shopify Admin Native Menu Structure:
Level 1: Men (Top-level item)
  └── Level 2: Footwear (First nested drop-down)
        └── Level 3: Running Shoes (Second nested drop-down — hard ceiling)
              └── [Level 4: Trail Running] ◄── Not possible in Shopify admin

Come i temi leggono i link annidati (link.links)

I template Liquid di Shopify scansionano la navigazione annidata tramite l’oggetto link. L’attributo link.links espone i link secondari, mentre link.levels restituisce il numero di livelli annidati sottostanti. I temi eseguono tipicamente fino a tre cicli ricorsivi:

<ul class="site-nav">
  
</ul>

Perché il tuo tema nasconde il terzo livello

Molti commercianti riscontrano con sorpresa che le voci di terzo livello configurate nell’admin non compaiono sul negozio. Il Centro assistenza Shopify spiega che la maggior parte dei temi supporta fino a due livelli nei menu a tendina standard. Alcuni temi riservano il terzo livello ai layout mega menu a più colonne; consulta la documentazione del tema prima di pensare che i dati del menu siano sbagliati.

Su mobile si verifica un altro problema frequente: toccare una categoria genitore reindirizza subito alla collezione anziché mostrare i sottomenu. Shopify raccomanda di verificare in Content > Menus che il campo link dell’elemento genitore sia impostato su #. Inoltre, Shopify evidenzia che alcuni temi potrebbero richiedere modifiche CSS per perfezionare l’ergonomia mobile.

Perché la profondità eccessiva crea problemi: Legge di Steering e Information Scent

I menu multi-livello profondi introducono attriti motori e cognitivi. Su desktop, i menu flyout a cascata costringono gli utenti a guidare il puntatore attraverso stretti corridoi orizzontali. Se il puntatore si muove in diagonale verso il terzo livello, esce dall’area di attivazione e il sottomenu si chiude all’istante.

The "Mouse Tunnel" Steering Trap in Cascading Flyouts:
┌──────────────┐
│ Category A   │
├──────────────┤
│ Category B   │──────┐
├──────────────┤      │  Shopper moves pointer diagonally
│ Category C   │      ▼  toward desired item...
└──────────────┘   ┌──────────────┐
                   │ Sub-item 1   │
                   ├──────────────┤ ◄── Pointer exits the narrow tunnel!
                   │ Sub-item 2   │     Submenu collapses instantly.
                   └──────────────┘

La legge di Accot-Zhai (Steering Law) formalizza questa difficoltà: navigare all’interno di tunnel angusti richiede più tempo ed è facile sbagliare. Gli studi di Nielsen Norman Group sulla legge di Steering evidenziano che i menu gerarchici sono un’interfaccia intrinsecamente difficile da progettare. NN/g raccomanda esplicitamente di evitare menu gerarchici, in particolare quelli con più di due livelli.

Inoltre, una profondità esagerata disperde l’information scent (la scia informativa). I clienti procedono valutando indizi testuali che confermano se si stanno avvicinando al prodotto desiderato. Se i termini sono nascosti o ambigui, i clienti possono perdere l’orientamento.

Desktop: Flyout a cascata vs Mega Menu

Per risolvere la trappola del tunnel del mouse, Nielsen Norman Group consiglia: per i menu di navigazione, prendi in considerazione i mega menu come alternativa ai menu a tendina. Anziché imporre percorsi millimetrici al mouse, un mega menu dispone le opzioni di secondo e terzo livello su una superficie bidimensionale stabile.

L’interazione hover del mega menu richiede tempistiche precise. Nielsen Norman Group prescrive: il puntatore deve restare fermo per 0.5 secondi prima dell’apertura, il menu deve apparire entro 0.1 secondi e rimanere visibile finché il puntatore non rimane all’esterno dell’elemento e del menu per 0.5 secondi. Questi ritardi impediscono aperture involontarie al semplice passaggio del cursore sull’header.

NN/g raccomanda inoltre di raggruppare le opzioni in insiemi logici correlati. In un menu a 3 livelli su Shopify, ciò significa utilizzare le voci di Livello 2 come intestazioni di colonna in evidenza e disporre le voci di Livello 3 sotto di esse. Per approfondire l’architettura delle colonne, consulta la nostra guida su mega menu best practices.

Tuttavia, un mega menu desktop non deve essere trapiantato tal quale sui telefoni. NN/g avverte che le opzioni minuscole nei mega menu causano errori di selezione sui touch screen. La vista desktop deve trasformarsi in un’interfaccia a misura di tocco sui dispositivi mobili.

Mobile: Accordion vs Pannelli Drill-Down

Progettare la navigazione mobile impone di rispettare la biomeccanica del tocco. La ricerca sul campo di Steven Hoober pubblicata su UXmatters — basata su 1,333 osservazioni di utenti mobili — ha rilevato che il 49% utilizza lo smartphone con una sola mano. Prova il tuo menu con una sola mano su uno smartphone reale.

Figura 1: Illustrazione concettuale (Concept illustration) — Mobile: Accordion vs Pannelli Drill-Down

I punti di forza degli accordion

Gli accordion verticali espandono le sottocategorie direttamente sotto la voce selezionata. Un articolo di Smashing Magazine (Friedman 2022) indica che gli accordion funzionano molto bene per navigazioni a più livelli e sono solitamente migliori dei menu a scorrimento. Poiché le categorie parallele restano visibili, gli acquirenti possono passare rapidamente da un livello all’altro senza perdere il contesto della pagina.

La criticità primaria è il fenomeno di Accordion sprawl. Quando l’utente apre più sezioni in sequenza, il menu si allunga su diverse altezze dello schermo, spingendo le categorie principali fuori vista. Per rimediare, configura il menu affinché chiuda automaticamente i rami paralleli quando se ne attiva uno nuovo.

I punti di forza dei pannelli Drill-Down

I pannelli drill-down sostituiscono l’intera visuale del cassetto di navigazione in orizzontale a ogni passaggio, mostrando One tier at a time. Questo preserva l’altezza costante del menu e ordina i link in chiari Intent groups, ideale per cataloghi con molte suddivisioni.

Il limite evidenziato da Smashing Magazine riguarda l’incertezza sul tasto Indietro. Smashing raccomanda di sostituire una dicitura generica con un Contextual back label (ad esempio ‹ Men). Suggeriamo inoltre di mantenere un Persistent back button in cima a ogni pannello. Per l’implementazione pratica, leggi la nostra guida su mobile drawer menu design.

Tassonomia vs Filtri: Dove deve fermarsi il menu

Figura 2: Illustrazione concettuale (Concept illustration) — Tassonomia vs Filtri: Dove deve fermarsi il menu

Quando i commercianti si sentono limitati dal tetto di 3 livelli, il problema nasce solitamente da una sovrapposizione tra tassonomia e filtri. Il menu deve contenere Structural categories che rispecchiano intenti di acquisto ben distinti (come Scarpe da corsa rispetto a Sneaker casual). Di contro, le caratteristiche dei prodotti appartengono a Faceted filters e Filter chips nelle collezioni.

Inserire caratteristiche come Rosso, Taglia L o una fascia di prezzo nei link del menu appesantisce la gerarchia. Fermandosi al terzo livello e lasciando le varianti ai filtri, la navigazione resta agile e comprensibile.

Prestazioni e accessibilità dei menu profondi

I menu molto ramificati comportano carichi tecnici. Nei temi Shopify tradizionali, i cicli Liquid pre-renderizzano ogni link lato server nel file HTML iniziale. I mega menu ricchi di immagini, badge e descrizioni generano un numero elevato di nodi DOM prima che il cliente compia qualsiasi azione.

La documentazione Google Chrome Lighthouse segnala un avviso se l’elemento body supera ~800 nodi e riporta un errore sopra ~1,400 nodi. Un DOM grande dà più lavoro al browser: misura invece di tirare a indovinare. Puoi verificare i nodi del tuo header nella console Chrome: document.querySelector(‘header’).querySelectorAll(‘*’).length. Approfondisci nella nostra analisi su how navigation affects page speed.

Sotto il profilo dell’accessibilità, i menu devono seguire la guida W3C WAI-ARIA APG. Il pattern disclosure precisa che la navigazione del sito non adotta il ruolo menu, riservato alle applicazioni desktop. I pulsanti devono alternare aria-expanded tra false e true, nascondere i pannelli inattivi agli screen reader e gestire il tasto Escape: alla pressione di Escape il menu a tendina si chiude e il focus torna sul pulsante di apertura.

Compromessi di progetto: Quando evitare i menu profondi

Non tutti i negozi hanno bisogno di tre livelli di navigazione. Le boutique con cataloghi ristretti creano inutili barriere con menu a più livelli. Se un piccolo catalogo può essere consultato su un’unica pagina di collezione, inserire ulteriori livelli impone passaggi superflui.

Anche i brand direct-to-consumer (DTC) che indirizzano traffico a pagamento direttamente su landing page mirate traggono vantaggio da strutture lineari. Offrire un menu essenziale e chip di filtro orizzontali può adattarsi meglio di un articolato mega menu desktop; provalo con il tuo traffico.

Inoltre, i marchi di lusso prediligono spazi bianchi ed eleganza visiva rispetto a fitti elenchi di link. Ricorda l’indicazione cardine di Nielsen Norman Group: evita i menu gerarchici, in particolare quelli che superano i due livelli di profondità.

Matrice decisionale per formato catalogo

Per identificare la gerarchia di navigazione ottimale per il tuo store Shopify, confronta le dimensioni del catalogo e le abitudini dei clienti con lo schema sottostante:

Multi-Level Navigation Decision Architecture:
┌─────────────────────────────────────────────────────────────────┐
│ Catalog Scale & Taxonomy Audit                                  │
└────────────────────────────────┬────────────────────────────────┘
                                 │
         ┌───────────────────────┴───────────────────────┐
         ▼                                               ▼
  [ Small, focused catalog ]                    [ Broad, multi-category ]
         │                                               │
         ▼                                               ▼
┌─────────────────────────────┐                 ┌─────────────────────────────┐
│ 1–2 Tier Flat Navigation    │                 │ Multi-Tier Structure Needed │
│ Single-line bar on desktop  │                 └──────────────┬──────────────┘
│ Clean 1-level mobile drawer │                                │
└─────────────────────────────┘         ┌──────────────────────┴──────────────────────┐
                                        ▼                                             ▼
                                [ Desktop Viewport ]                          [ Mobile Viewport ]
                                        │                                             │
                                        ▼                                             ▼
                         ┌─────────────────────────────┐               ┌─────────────────────────────┐
                         │ 2D Scannable Mega Menu      │               │ Drill-Down Panels / Drawer  │
                         │ Columns, intent groups      │               │ Step-by-step navigation     │
                         │ High scannability           │               │ Contextual "< Back" crumb   │
                         └─────────────────────────────┘               └─────────────────────────────┘

Le etichette di scala del catalogo sono linee guida qualitative, non soglie numeriche rigide.

Il ruolo di Navi+

Per i commercianti Shopify che desiderano organizzare cataloghi strutturati senza modificare il codice Liquid del tema, Navi+ mette a disposizione un costruttore visivo di navigazione per negozi Shopify.

Theme Menu vs. Navi+ Menu Delivery:

Traditional Theme Liquid:
[Shopify Server] ──► [Loops every menu link in Liquid] ──► [All links in initial HTML] ──► Browser

Navi+:
[Shopify Server] ──► [Theme HTML without Navi+ menu links] ──► Browser
                               ▲
                               │ Menu config loaded by a script
                             [CDN]
                   (Menu stored as a JSON file)

In piena sintonia con la struttura nativa di Shopify, i menu Navi+ operano entro un limite massimo di 3 livelli. Il punto di forza consiste nella differenziazione per dispositivo: consente di progettare un Desktop Mega Menu dotato di colonne, gruppi e banner promozionali, configurando al tempo stesso un Mobile Menu specifico (o una Tab Bar inferiore) per l’uso con una sola mano. Un Mobile Menu può anche incorporare l’albero di menu Shopify esistente, aggiornato con il tasto Sync now.

Sotto l’aspetto architetturale, Navi+ archivia le configurazioni come file JSON su CDN che vengono generati nel browser da uno script, mantenendo i link fuori dal template Liquid iniziale del server. Suggeriamo di misurare le prestazioni reali con PageSpeed Insights e Chrome DevTools.

Se il menu integrato del tuo tema non permette a chi acquista da desktop e da mobile di vedere presentazioni diverse della stessa struttura a tre livelli, Navi+ ti consente di creare visualmente un Desktop Mega Menu e un Mobile Menu separato — poi esegui la checklist qui sotto sul tuo negozio.

Per analizzare altri modelli di navigazione per smartphone, leggi il nostro articolo su mobile navigation beyond the hamburger e consulta le Navi+ setup guides for Shopify themes.

Checklist d’azione: Audit del tuo menu multi-livello

Segui questa procedura in cinque fasi per revisionare l’alberatura del tuo negozio Shopify:

• Fase 1: Separare tassonomia e attributi: Esamina i link in un foglio di calcolo. Mantieni le categorie strutturali (es. Calzature, Giacche) nel menu e sposta le caratteristiche (Colore, Taglia, Prezzo) nei filtri di collezione.
• Fase 2: Consolidare l’information scent: Rimuovi formule promozionali vaghe e impiega termini chiari e naturali ricercati realmente dai tuoi clienti.
• Fase 3: Eseguire test su smartphone reale: Naviga sul telefono fino al Livello 3. Accertati che il link genitore contenga # per evitare ricaricamenti anomali e verifica la chiarezza dei pulsanti Indietro.
• Fase 4: Controllare i nodi DOM dell’header: Esegui document.querySelector(‘header’).querySelectorAll(‘*’).length nella console DevTools. Confronta il conteggio con il totale della pagina e la soglia di ~800 nodi di Lighthouse.
• Fase 5: Verificare la navigazione da tastiera: Percorri l’intero menu usando unicamente Tab, Invio ed Escape. Assicurati che Escape richiuda i menu aperti restituendo il focus al controllo di attivazione.

Domande Frequenti (FAQ)

Quesiti ricorrenti su architettura dei menu multi-livello Shopify, limiti di piattaforma ed ergonomia mobile:

Quanti livelli può avere un menu su Shopify?

Un menu su Shopify può comprendere tre livelli: una voce principale più un massimo di due livelli a tendina annidati, come documentato dal Centro assistenza Shopify.

Come si annida una voce di menu in Shopify?

Nel pannello di controllo Shopify, apri Content > Menus, seleziona il menu, trascina un elemento verso destra sotto la voce genitore e salva le modifiche.

Perché il mio tema non mostra i link del terzo livello?

Secondo il Centro assistenza Shopify, la maggior parte dei temi supporta fino a due livelli a tendina negli header standard. Alcuni temi riservano il terzo livello ai layout mega menu a più colonne; consulta la documentazione del tema.

Perché il link genitore apre una pagina su mobile invece del sottomenu?

Shopify consiglia di verificare in Content > Menus che il campo link dell’elemento genitore sia impostato su # in modo che il tocco espanda il sottomenu senza ricaricare la pagina.

Un mega menu è preferibile a un menu a tendina per un catalogo ampio?

Nielsen Norman Group raccomanda di valutare i mega menu rispetto ai menu a tendina a cascata ed evidenzia di evitare menu gerarchici più profondi di due livelli.

Accordion o pannelli drill-down su dispositivi mobili?

Entrambi hanno punti di forza: Smashing Magazine evidenzia che gli accordion funzionano molto bene per più livelli, mentre i pannelli drill-down evitano uno scorrimento eccessivo se dotati di chiari pulsanti Indietro contestuali.

Fonti e Riferimenti

• Centro assistenza Shopify: Set up drop-down menus in your online store. Documentazione su gerarchie dei menu e funzionalità dei temi. help.shopify.com
• Shopify.dev: Riferimento oggetto Liquid link. Specifiche degli array di link figli link.links e delle proprietà link.levels. shopify.dev
• Nielsen Norman Group: Laubheimer, P. (2019). Accot-Zhai Steering Law: Implications for UI Design. Ricerca sui tunnel del mouse e menu annidati. nngroup.com
• Nielsen Norman Group: Nielsen, J. & Li, A. (2017). Mega Menus Work Well for Site Navigation. Linee guida su suddivisione 2D e tempi di hover (0.5 s / 0.1 s). nngroup.com
• Smashing Magazine: Friedman, V. (2022). Designing Navigation for Mobile: Design Patterns and Best Practices. Analisi di accordion mobili, menu scorrevoli ed etichette di ritorno contestuali. smashingmagazine.com
• Steven Hoober (UXmatters): How Do Users Really Hold Mobile Devices? (2013). Studio sul campo con 1,333 osservazioni; 49% con una sola mano. uxmatters.com
• Chrome for Developers: Avoid an excessive DOM size (Lighthouse). Indicazioni sugli avvisi di nodi DOM (~800 nodi) ed errori (~1,400 nodi). developer.chrome.com
• W3C Web Accessibility Initiative (WAI): WAI-ARIA APG - Disclosure Navigation Pattern. Standard di accessibilità per interazione da tastiera e gestione stati. w3.org
• Letture correlate: Mega Menu Best Practices, Mobile Drawer Menu Design, Navigation and Page Speed, Mobile Navigation Beyond the Hamburger e Navi+ Setup Guides for Shopify Themes.