Guida ai menu Shopify: architettura, pattern di navigazione, ergonomia mobile e UX storefront

La navigazione guida gli acquirenti verso i prodotti. Percorsi chiari mantengono il movimento degli utenti, mentre collegamenti nascosti e target tattili scomodi bloccano la scoperta.

L’e-commerce moderno abbraccia due contesti distinti: monitor desktop ampi con spazio di scansione orizzontale e smartphone azionati con un solo pollice. Soddisfare entrambi richiede scelte strutturali mirate.

Questa guida offre un modello operativo pratico: come Shopify gestisce i menu, come si confrontano i quattro pattern principali, cosa raccomanda la ricerca e una checklist per testare il tuo negozio su dispositivi reali.

Risposta rapida: come funzionano i menu Shopify

I menu Shopify si creano in Contenuto > Menu e sono mostrati dal tema; una voce di primo livello può contenere fino a due livelli nidificati (tre in totale). Usa un menu a discesa semplice per cataloghi piccoli, un mega menu per cataloghi desktop estesi e su smartphone mantieni visibili i link chiave invece di nascondere tutto dietro un hamburger.

Punti chiave da ricordare

• Gerarchia della piattaforma: Shopify applica un limite di nidificazione a tre livelli (una voce principale più un massimo di due livelli a discesa nidificati) gestiti in Contenuto > Menu (Centro assistenza Shopify).
• Visibilità desktop: Le ricerche del Nielsen Norman Group dimostrano che i mega menu consentono agli utenti di vedere le opzioni a colpo d’occhio anziché dover ricordare elenchi di categorie (NN/g).
• Coinvolgimento mobile: I test di usabilità NN/g hanno rilevato che i menu nascosti raggiungono solo il 57% di utilizzo su mobile, mentre la navigazione combinata con percorsi chiave visibili raggiunge l’86% (NN/g).

Come sono costruiti i menu Shopify: Contenuto > Menu, temi e il limite a tre livelli

Configurare una navigazione efficace inizia comprendendo come Shopify separi i dati del menu dalla presentazione visiva del tema. I menu esistono come record permanenti dello store, mentre i temi gestiscono lo stile.

Figura 1: Illustrazione concettuale (Concept illustration) — Come sono costruiti i menu Shopify: Contenuto > Menu, temi e il limite a tre livelli

Dove risiedono i menu nell’admin

Nel pannello di controllo Shopify, le strutture di navigazione si gestiscono in Contenuto > Menu (Centro assistenza Shopify). Da qui i merchant creano i menu, aggiungono link e organizzano i percorsi dello store.

Poiché i menu esistono come record della piattaforma anziché codice del tema, le gerarchie rimangono intatte quando cambi tema. Trascinando le voci sotto i link principali si creano livelli nidificati.

Come il tema seleziona un menu

I temi determinano il rendering visivo dei menu. I temi Shopify si collegano ai menu dell’admin tramite l’impostazione link_list (Documentazione per sviluppatori Shopify), consentendo ai merchant di scegliere quale menu popola l’header, il drawer o il footer.

Quando cambi tema, i collegamenti restano intatti. Nell’editor del nuovo tema seleziona il tuo menu nell’impostazione link_list dell’Header. Blocchi promozionali o banner configurati nel tema precedente non si trasferiscono automaticamente.

Il limite a tre livelli

La navigazione Shopify impone un limite chiaro: una voce di primo livello può contenere fino a due livelli a discesa nidificati (tre livelli in totale), come documentato dal Centro assistenza Shopify e dalla Documentazione sviluppatori Shopify.

Pianifica la tassonomia entro questi tre livelli. Il Centro assistenza Shopify segnala inoltre che la maggior parte dei temi supporta fino a due livelli nidificati di menu a discesa.

Quando una voce di primo livello controlla un sottomenu nidificato, funziona come pulsante per espandere il menu anziché come collegamento ipertestuale diretto (Centro assistenza Shopify). Inserisci sempre un link esplicito “Vedi tutto [Categoria]” all’interno del pannello per consentire agli acquirenti di raggiungere l’intera collezione.

I quattro pattern di navigazione principali: menu a discesa, mega menu, drawer e barra a schede

Gli storefront Shopify si affidano a quattro pattern principali, ciascuno con uno specifico equilibrio tra spazio su schermo e reperibilità.

1. Menu a discesa semplice

Un menu a discesa semplice mostra un elenco verticale di link. Si adatta bene a cataloghi ristretti, ma su cataloghi più ampi i normali menu a discesa nascondono in genere la maggior parte delle opzioni dell’utente (NN/g).

2. Mega menu multicolonna

Un mega menu organizza i collegamenti in un pannello a più colonne. Raggruppare i link correlati sotto intestazioni chiare rende un ampio catalogo più facile da scansionare su schermi desktop.

Per le tecniche di layout strutturato, consulta la nostra guida sulle best practice per mega menu Shopify.

3. Drawer laterale a comparsa

Un drawer laterale cela i collegamenti dietro un pulsante menu fino alla sua apertura. Il Nielsen Norman Group avverte che nascondere la navigazione rende le opzioni meno individuabili (NN/g).

Per suggerimenti sull’implementazione, vedi le nostre best practice per menu drawer mobile.

4. Barra a schede inferiore

Una barra a schede inferiore fissa le destinazioni principali lungo il bordo inferiore dello schermo, posizionando gli hub chiave alla portata del pollice. È ideale per poche destinazioni primarie.

Per schemi di layout, leggi la nostra guida sulla barra a schede inferiore per Shopify.

Architettura di navigazione ibrida

I negozi spesso combinano più pattern: un mega menu su desktop affiancato da una barra a schede inferiore e un drawer laterale su mobile per bilanciare scansionabilità e profondità del catalogo.

Navigazione desktop: quando un mega menu supera un menu a discesa

Sui monitor desktop lo spazio orizzontale consente maggiore visibilità. La ricerca del Nielsen Norman Group sottolinea che i mega menu mostrano tutto a colpo d’occhio, così gli utenti possono vedere anziché tentare di ricordare (NN/g). I normali menu a discesa nascondono in genere la maggior parte delle opzioni dell’utente.

Tempi di hover che evitano sfarfallii

Un trigger hover mal calibrato genera frustrazione. Quando un mega menu si apre all’istante al minimo passaggio del cursore su una voce dell’header, può aprirsi accidentalmente durante il normale spostamento del mouse.

Il Nielsen Norman Group consiglia che il mouse rimanga fermo per 0,5 secondi prima di visualizzare contenuti dipendenti da hover (NN/g), e poi mostri il mega menu entro 0,1 secondi (NN/g). Questo evita aperture accidentali mantenendo l’interazione reattiva.

Raggruppare i link all’interno del pannello

All’interno del pannello organizza i collegamenti in gruppi tematici sotto intestazioni concise. Ogni categoria deve comparire in un unico gruppo logico. Le immagini in evidenza possono supportare la navigazione, ma non devono mai sostituire etichette di testo chiare.

Evita di nascondere la navigazione desktop dietro un’icona quando lo spazio orizzontale è disponibile. NN/g ha rilevato che gli utenti desktop hanno utilizzato i menu nascosti solo nel 27% dei casi (NN/g). Per maggiori dettagli, consulta le nostre best practice per mega menu Shopify.

Ergonomia mobile: portata del pollice, menu nascosti e barre a schede

La navigazione mobile è fondamentalmente una sfida di ergonomia fisica. Quando gli acquirenti navigano da smartphone, la portata naturale del pollice determina la facilità di navigazione.

Figura 2: Illustrazione concettuale (Concept illustration) — Ergonomia mobile: portata del pollice, menu nascosti e barre a schede

Come le persone impugnano realmente lo smartphone

In uno studio empirico, Steven Hoober ha raccolto 1.333 osservazioni sull’uso di dispositivi mobili in spazi pubblici (UXmatters), con 780 persone intente a toccare attivamente lo schermo per scorrere, digitare o toccare.

La distribuzione delle impugnature tra i 780 utenti con interazione touch è risultata la seguente:

• Uso con una sola mano: 49% reggeva e utilizzava il dispositivo esclusivamente con una mano.
• Uso a culla (cradled): 36% sosteneva il telefono con una mano interagendo con le dita dell’altra.
• Uso a due mani: 15% reggeva il dispositivo con entrambe le mani, digitando con i pollici.

Lo studio di Hoober ha documentato l’uso dei dispositivi in luoghi pubblici nel 2013, registrando abitudini fisiche e non tassi di conversione e-commerce. Considera questi dati come un’istantanea delle abitudini di impugnatura e non come un profilo esatto dei tuoi acquirenti.

Nel campione di Hoober, circa la metà delle persone che toccavano lo schermo usava una sola mano. Quando i menu si trovano esclusivamente negli angoli superiori, gli utenti a una mano possono dover modificare l’impugnatura. Per valutare la dinamica della portata, esplora la nostra ricerca sull’ergonomia della thumb zone.

Il costo di nascondere il menu

Nascondere la navigazione mobile comporta costi misurabili di reperibilità. Il Nielsen Norman Group ha misurato il coinvolgimento degli utenti con diversi layout di navigazione (NN/g):

NN/g ha rilevato che gli utenti mobile hanno utilizzato la navigazione nascosta nel 57% dei casi, mentre la navigazione combinata ha raggiunto l’86% (NN/g). Va notato che NN/g non ha testato su smartphone siti con sola navigazione visibile, quindi il confronto è tra navigazione nascosta e combinata. In quel test, mantenere visibili i percorsi chiave ha prodotto un uso nettamente superiore della navigazione.

Quando conviene usare una barra a schede

Per migliorare la reperibilità su smartphone, molti store mantengono visibili i link principali. Il Nielsen Norman Group raccomanda di mostrare 4 o meno link di primo livello come opzioni visibili (NN/g).

Una barra a schede inferiore posiziona le destinazioni chiave permanentemente a portata di pollice. Tuttavia, NN/g avverte che quando si cerca di inserire più di 5 opzioni in una barra a schede o di navigazione, diventa difficile ospitarle mantenendo una dimensione ottimale del target tattile (NN/g).

Ammassare troppe icone in una barra inferiore riduce lo spazio dei target e genera tocchi accidentali. Mantieni la barra focalizzata su poche destinazioni chiave.

Per pattern dettagliati, consulta le nostre guide su come implementare una barra a schede inferiore per Shopify ed esplorare la navigazione mobile oltre l’hamburger menu.

Accessibilità e prestazioni: menu facili da usare per tutti gli acquirenti

Lo stile grafico conta poco se i menu risultano difficili da azionare o rallentano il caricamento della pagina. I menu Shopify devono rispettare le regole chiave di accessibilità e mantenere un markup leggero.

Trigger interattivi vs collegamenti diretti

I controlli accessibili devono comunicare una funzione chiara. Secondo il Centro assistenza Shopify, una voce di primo livello con sottomenu funge da pulsante per espandere il menu anziché da link a una nuova pagina.

Assegnare a un unico controllo sia la navigazione verso una collezione sia l’apertura del sottomenu genera comportamenti contrastanti per utenti touch e screen reader. Mantieni la voce principale dedicata all’espansione, inserendo i link di navigazione all’interno.

Indicatori di posizione e spaziatura dei target tattili

Il Nielsen Norman Group osserva che non indicare la posizione corrente è probabilmente il singolo errore più comune sui menu dei siti web (NN/g). I link attivi devono essere evidenziati chiaramente con grassetto, contrasto elevato o sottolineature.

Anche i target tattili richiedono cura. NN/g sottolinea che i link troppo piccoli o troppo ravvicinati sono un’enorme fonte di frustrazione per gli utenti mobile (NN/g). Mantieni ampie aree di tocco e spaziatura adeguata.

Per i passaggi operativi, consulta la nostra guida all’accessibilità della navigazione.

Conteggio nodi DOM e impatto sul rendering

Ogni collegamento, colonna e immagine arricchisce il Document Object Model (DOM). Nei suoi audit di prestazioni, Google Chrome Lighthouse avvisa quando l’elemento body supera circa 800 nodi e segnala errore oltre circa 1.400 nodi (Google Chrome Lighthouse).

Se il tuo tema genera contenitori separati per desktop e mobile, l’albero delle categorie può comparire due volte nel codice della pagina. Verifica il tuo tema: i link duplicati incrementano direttamente il conteggio totale dei nodi DOM.

Interaction to Next Paint (INP) su mobile

Nel framework Core Web Vitals di Google, l’Interaction to Next Paint (INP) misura la reattività della pagina. Secondo Google Chrome Web.dev, un valore INP pari o inferiore a 200 millisecondi indica una buona reattività.

Google precisa che l’INP non tiene conto dello scorrimento (Google Chrome Web.dev). Misura invece la latenza di tocchi e clic, come l’apertura di un drawer o l’espansione di sottomenu. Script pesanti sui trigger rallentano la risposta visiva peggiorando l’INP.

Per le linee guida di ottimizzazione, vedi la nostra guida su come la navigazione influisce sulla velocità della pagina.

Scegliere il pattern di menu per il tuo negozio

La scelta del pattern di navigazione è una decisione strutturale legata all’ampiezza del catalogo e alla quota di visitatori da smartphone.

Matrice dei profili di negozio

Framework di selezione della navigazione

Valuta tre domande strutturali per guidare la tua scelta:

1. Numero di destinazioni primarie: Con 4 o meno link di primo livello, mostrali come opzioni visibili anziché nasconderli dietro un’icona (NN/g).
2. Profondità delle sottocategorie: Se il catalogo comprende collezioni diversificate, un pannello multicolonna consente la scansione visiva diretta anziché menu annidati.
3. Quota di traffico mobile: Esamina i dati analitici del tuo negozio. Un traffico prevalente da smartphone impone di privilegiare la portata del pollice per mantenere visibili i percorsi chiave.

Albero decisionale per la navigazione del negozio Shopify:
+-- Destinazioni di primo livello <= 4?
|   +-- Sì: Mostrale come link visibili (raccomandazione NN/g)
|   +-- No: Raggruppale in hub di categoria logici
|
+-- Il catalogo comprende molteplici sottocategorie distinte?
|   +-- No: Usa menu a discesa semplici per evitare spazi vuoti nel pannello
|   +-- Sì: Implementa un mega menu multicolonna su desktop per la scansionabilità
|
+-- Analisi del traffico mobile:
    +-- Acquirenti prevalentemente da smartphone?
        +-- Evita la navigazione esclusivamente con hamburger nascosto (57% di utilizzo)
        +-- Preferisci la navigazione combinata: link chiave visibili + drawer per catalogo esteso (86% vs 57% nel test NN/g)

Compromessi: quando non usare menu complessi

I mega menu multicolonna e le barre a schede inferiori migliorano la scansionabilità, ma non sono adatti a ogni contesto. Introdurre pattern complessi nel negozio sbagliato aggiunge attrito non necessario.

1. Negozi monoprodotto o con catalogo ristretto

Per negozi con pochi articoli, i mega menu risultano controproducenti. Distribuire pochi link su pannelli sovradimensionati genera spazi vuoti. Un header orizzontale pulito garantisce accesso diretto al prodotto senza passaggi intermedi.

2. Sovrapposizione di elementi visivi su mobile

Le barre a schede inferiori occupano spazio verticale. Se un negozio utilizza già widget di chat, banner cookie o barre fisse, aggiungere una barra a schede può provocare sovrapposizioni. Se un fumetto copre un’icona della barra o il pulsante d’acquisto, l’utente non può premerlo. Verifica sempre i widget fluttuanti prima di attivare barre fisse.

3. Impatto sul rendering e immagini ad alta risoluzione

Affollare i mega menu di immagini ad alta risoluzione appesantisce il documento. Elementi grafici extra aggiungono nodi DOM avvicinandosi alla soglia di avviso di circa 800 nodi di Lighthouse (Google Chrome Lighthouse). Inoltre, i pannelli che si aprono solo con l’hover sono difficili da usare sui touchscreen, dove l’hover non esiste.

4. Quando i temi Shopify nativi sono del tutto sufficienti

Se il catalogo rientra nel limite dei tre livelli di Shopify e il tema offre un drawer mobile rapido, potresti non aver bisogno di un’app di terze parti. Verifica prima cosa offre già il tuo tema. Valuta le capacità native tramite la nostra guida sulle limitazioni dei menu dei temi Shopify.

Dove si colloca Navi+

Per i merchant i cui cataloghi o requisiti mobile superano le funzionalità del tema, Navi+ offre una suite di navigazione modulare progettata specificamente per Shopify.

Navigazione modulare creata per Shopify

Navi+ consente di attivare una barra a schede inferiore per mobile, un drawer laterale, mega menu desktop e mobile, griglie di icone visive e pulsanti mobili senza modificare codice. La barra a schede mobile ancora le destinazioni chiave vicino al pollice, con opzione di scomparsa automatica allo scorrimento.

Codice del tema intatto e supporto nativo a 3 livelli

Navi+ si installa tramite le Shopify App Embed native senza toccare i template Liquid. I file del tema restano intatti. I menu supportano fino a tre livelli di nidificazione, replicando la struttura della piattaforma. Il Mobile Menu può incorporare un menu Shopify esistente e aggiornarlo con un clic tramite il pulsante “Sync now”.

Riutilizzabile al cambio di tema

Poiché i menu sono archiviati in Navi+, cambiare tema non azzera la configurazione. Basta abilitare l’app embed sul nuovo tema e verificare il posizionamento. Navi+ è stato testato su 331 temi, elencati nella directory di compatibilità dei temi Navi+.

Se il menu del tuo tema attuale soddisfa già il catalogo, mantienilo. Se desideri una barra a schede inferiore o un mega menu senza toccare il codice, puoi provare Navi+ sul tuo tema attuale e valutarlo con la checklist qui sotto.

Checklist operativa: controlla il menu del tuo negozio Shopify

Usa questa checklist per verificare la navigazione del tuo storefront su dispositivi reali per usabilità, ergonomia e prestazioni.

• Verifica la profondità del menu nell’admin: In Contenuto > Menu, accertati che le gerarchie non superino i tre livelli e che ogni voce genitore contenga un link diretto alla collezione completa.
• Esegui il test della portata a una mano: Su uno smartphone reale, prova ad aprire le tue tre collezioni principali usando solo il pollice senza cambiare impugnatura. Se il movimento risulta scomodo, inserisci link visibili o una barra inferiore.
• Misura i nodi DOM dello storefront: Nella console di Chrome, esegui document.querySelectorAll('body *').length e confronta il risultato con la soglia di avviso di circa 800 nodi e la soglia di errore di circa 1.400 nodi di Lighthouse.
• Controlla indicatori di posizione e target tattili: Assicurati che le categorie attive mostrino evidenziazioni chiare (grassetto o sottolineature) e che i target tattili abbiano spaziatura sufficiente per prevenire tocchi accidentali.
• Confronta i dati di navigazione e ricerca: In Shopify Analytics, valuta i tassi di conversione dei visitatori che esplorano i menu rispetto a chi usa la ricerca interna per individuare percorsi di catalogo poco visibili.

FAQ

Quanti livelli di menu supporta nativamente Shopify?

Shopify supporta nativamente fino a tre livelli di navigazione: una voce di primo livello con un massimo di due livelli a discesa nidificati (Centro assistenza Shopify). La maggior parte dei temi rispetta questo limite.

Dove posso modificare i menu di navigazione nel pannello Shopify?

Gestisci la navigazione del negozio nel pannello Shopify in Contenuto > Menu (Centro assistenza Shopify), dove puoi creare menu, aggiungere link e organizzare i livelli. Le impostazioni del tema scelgono poi quale menu mostrare.

I menu di navigazione andranno persi se cambio tema Shopify?

No. I menu sono memorizzati come dati della piattaforma in Contenuto > Menu e non nel codice del tema. Quando cambi tema, devi solo riselezionare il menu nelle impostazioni dell’Header del nuovo tema (Documentazione per sviluppatori Shopify).

Quando conviene usare un mega menu anziché un menu a discesa su Shopify?

Usa un mega menu quando il catalogo comprende molteplici sottocategorie che richiedono una scansione visiva immediata (NN/g). Per cataloghi ristretti, un menu a discesa semplice evita spazi vuoti non necessari.

Perché nascondere tutta la navigazione dietro il menu hamburger è problematico su mobile?

I test di usabilità NN/g mostrano che gli acquirenti utilizzano la navigazione mobile nascosta solo nel 57% dei casi, contro l’86% registrato quando la navigazione combinata mantiene visibili i collegamenti chiave (NN/g).

Qual è il numero massimo raccomandato di voci per una barra a schede mobile?

Limita la barra a schede mobile a poche destinazioni chiave. NN/g segnala che con più di 5 opzioni diventa difficile inserirle in una barra a schede o di navigazione mantenendo una dimensione ottimale del target tattile (NN/g).

Fonti e riferimenti di ricerca

• Centro assistenza Shopify: Menu e collegamenti — Gestione dei menu di navigazione nell’admin Shopify.
• Centro assistenza Shopify: Menu a discesa — Linee guida sul limite a tre livelli e comportamento dei selettori genitore.
• Documentazione per sviluppatori Shopify: Architettura di navigazione — Riferimento tecnico per le impostazioni link_list del tema.
• Nielsen Norman Group: Mega Menus Work Well (Angie Li & Jakob Nielsen, 2017) — Ricerca su scansionabilità e tempo di hover di 0,5 secondi.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Kara Pernice & Raluca Budiu, 2016) — Test di usabilità su navigazione visibile, nascosta e combinata.
• Nielsen Norman Group: Mobile Navigation Patterns (Raluca Budiu, 2015) — Analisi di menu drawer e barre di navigazione.
• Nielsen Norman Group: Menu Design Best Practices (Page Laubheimer, 2024) — Principi sull’indicazione della posizione e spaziatura dei target tattili.
• UXmatters: How Do Users Really Hold Mobile Devices? (Steven Hoober, 2013) — Osservazione di 1.333 persone che usano dispositivi mobili con documentazione delle impugnature.
• Google Chrome Lighthouse: Soglie per la dimensione del DOM — Linee guida con soglia di avviso a 800 nodi ed errore a 1.400 nodi.
• Google Chrome Web.dev: Interaction to Next Paint (INP) — Standard che stabilisce la soglia di reattività ottimale a 200 millisecondi.
• Directory di compatibilità dei temi Navi+ — Pagina hub che elenca i 331 temi Shopify su cui Navi+ è stato testato.