Come aggiungere un sottomenu al menu di navigazione Shopify (A discesa, livelli e mobile)

Aggiungere un sottomenu in Shopify richiede un solo trascinamento in Content > Menus — ma per garantire un’esperienza ideale agli acquirenti, la voce principale, il menu Header del tema e il cassetto mobile devono essere configurati a regola d’arte.

All’avvio di un negozio online, una barra orizzontale lineare con quattro o cinque collegamenti funziona benissimo. Man mano che il catalogo si espande, elencare ogni singola collezione su una sola riga finisce per intasare l’intestazione. Nel design e-commerce, sottomenu, menu a discesa (dropdown) ed elementi di menu annidati indicano lo stesso schema: collegamenti secondari raggruppati con ordine sotto un’intestazione principale. Puoi impostarli direttamente nel pannello di Shopify senza toccare una riga di codice.

Risposta rapida: Come aggiungere un sottomenu su Shopify

Per aggiungere un sottomenu in Shopify, vai su Content > Menus, apri il tuo menu principale, aggiungi la voce desiderata sotto una voce principale, trascinala sotto e leggermente a destra di quest’ultima e fai clic su Salva menu. Una voce di primo livello può contenere fino a due livelli di menu a discesa annidati.

Procedi con questi cinque passaggi:

1. Nel pannello di controllo Shopify, apri Content > Menus.
2. Fai clic sul titolo del menu che desideri modificare (di solito Main menu).
3. Fai clic su Aggiungi voce di menu, inserisci il Nome e il link di destinazione, quindi fai clic su Aggiungi.
4. Tieni premuta l’icona di trascinamento (⠿) accanto alla voce e trascinala sotto e leggermente a destra della voce principale per annidarla.
5. Fai clic su Salva menu.

Una voce di primo livello può contenere fino a due livelli di menu a discesa subordinati.

Cos’è un sottomenu e quando serve al tuo negozio

Un sottomenu è un elenco di collegamenti secondari raggruppati sotto un’intestazione principale. Su computer desktop, posizionare il cursore o fare clic su di essa apre un elenco a discesa. Sugli smartphone, le stesse voci si espandono nel cassetto di navigazione laterale.

Le navigazioni annidate sono una soluzione molto diffusa per organizzare con efficacia collezioni, prodotti e pagine. Anziché affollare la barra di navigazione, una gerarchia definita crea un percorso intuitivo. I clienti esaminano prima grandi aree come «Abbigliamento» prima di scegliere sottocategorie puntuali come «Giacche».

Aggiungi un sottomenu quando il tuo negozio supera una struttura a livello unico. Shopify consiglia di inserire sette o meno voci di menu di primo livello per evitare il sovraffollamento visivo. Raggruppare le collezioni sotto voci madri rende più facile da scorrere un’intestazione lunga.

Non hai bisogno di un sottomenu se il tuo negozio propone pochi prodotti o comprende appena due o tre collezioni essenziali. Forzare menu a discesa su un catalogo compatto aggiunge clic inutili.

Una gerarchia pulita agevola anche la scansione da parte dei motori di ricerca. Approfondisci come Google scansiona il tuo menu per vedere come i link del menu aiutano i motori di ricerca a trovare le tue pagine di collezione.

Come aggiungere un sottomenu su Shopify, passo dopo passo

Shopify include un pratico gestore di menu basato su trascinamento. Puoi impostare la tua gerarchia su computer o direttamente dall’app mobile.

Su computer desktop

1. Accedi a Content > Menus nel pannello di amministrazione Shopify. (Nota: le guide meno recenti chiamano questa sezione Negozio online > Navigazione; l’attuale Centro assistenza Shopify usa Content > Menus.)
2. Seleziona il menu che intendi modificare, solitamente Main menu.
3. Se non hai ancora creato la voce principale, fai clic su Aggiungi voce di menu, assegna un nome (ad esempio «Negozio»), imposta un link e fai clic su Aggiungi.
4. Fai di nuovo clic su Aggiungi voce di menu per creare la voce secondaria. Scrivi il nome, seleziona la collezione o la pagina desiderata e fai clic su Aggiungi.
5. Individua l’icona con i sei puntini (⠿) a sinistra. Fai clic e tieni premuta l’icona (⠿) accanto alla voce di menu, quindi trascinala in un’altra posizione. Spostala sotto la riga principale e sposta il cursore verso destra finché la voce non appare rientrata, quindi rilascia.
6. Ripeti il procedimento per le altre sottocategorie e riordina le righe secondo le tue esigenze.
7. Fai clic su Salva menu. Salva spesso le modifiche per non raggiungere il limite di modifiche di Shopify.

Nell’app mobile Shopify

Puoi gestire le voci di menu anche dal tuo smartphone:

1. Apri l’app Shopify, tocca l’icona Menu e apri Menus nella sezione Contents.
2. Tocca il nome del tuo menu principale, quindi tocca Aggiungi voce di menu.
3. Inserisci nome e link di destinazione, poi tocca Aggiungi.
4. Tieni premuta l’icona di trascinamento (⠿), porta l’elemento sotto la voce principale e fallo scorrere verso destra per creare il rientro.
5. Tocca Salva.

Shopify raccomanda di testare i menu sui dispositivi mobili per verificare che i menu a discesa si espandano come previsto e che i collegamenti siano comodi da toccare.

Creare una voce principale che apre solo il menu a discesa

Molti negozianti si chiedono: «Come faccio a rendere non cliccabile una voce di menu in Shopify?»

Spesso si desidera che un’etichetta come «Acquista per categoria» funzioni unicamente come attivatore del sottomenu. Se la voce principale punta a una collezione vuota o generica, il clic reindirizza il visitatore altrove, interrompendo la navigazione.

Per creare una voce principale non cliccabile:

1. In Content > Menus, fai clic su Modifica accanto alla voce principale (oppure usa Aggiungi voce di menu).
2. Digita il titolo nel campo Nome. Usa etichette descrittive, come «Acquista per categoria», per le voci di primo livello con link #, così i clienti sapranno subito cosa aspettarsi.
3. Se non vuoi che l’intestazione rimandi ad alcun link, inserisci # nel campo Cerca o incolla un link della voce principale.
4. Fai clic su Applica modifiche e quindi su Salva menu.

La maggior parte dei temi gestisce le intestazioni dei menu a discesa come pulsanti anziché come collegamenti ipertestuali. Con un link #, la voce madre non ha una pagina da caricare, quindi un tocco può aprire il menu a discesa al suo posto.

Se desideri comunque offrire l’accesso alla pagina di collezione generale, aggiungi un elemento secondario intitolato «Mostra tutto [Categoria]» posizionato come prima voce del menu a discesa.

Ricorda un’avvertenza fondamentale: quando rimuovi una voce di menu che contiene elementi annidati, vengono rimossi anche tutti gli elementi secondari. Se devi cancellare una voce principale, trascina prima tutte le voci figlie al livello superiore.

Figura 1: Illustrazione concettuale — Configurazione di una voce principale con link cancelletto (#) come pulsante di attivazione rispetto a un link diretto a una pagina.

Quanti livelli può avere un sottomenu Shopify?

Chi gestisce inventari molto ampi si domanda spesso: «Quanti livelli di menu supporta Shopify?»

Nel gestore nativo di Shopify, la voce di primo livello può avere fino a due livelli di menu a discesa annidati al di sotto. Contando la barra principale, si ottengono tre livelli complessivi:

• Livello 1 (Voce principale): Il link orizzontale visibile nella barra di intestazione (es. «Uomo»).
• Livello 2 (Primo sottomenu): L’elenco a discesa che si apre dal livello 1 (es. «Calzature»).
• Livello 3 (Secondo sottomenu / flyout): Una diramazione secondaria del livello 2 (es. «Sneakers»).

Anche se Shopify consente di creare tre livelli nel pannello, l’effettiva visualizzazione dipende dal tema attivo. Assicurati di aggiornare il tema in modo che mostri tutti e tre i livelli di menu nel tuo negozio online.

Anche la posizione conta: quasi tutti i temi mostrano gli elementi annidati come menu a discesa nel menu principale, ma solo alcuni temi visualizzano gli elementi annidati in altre posizioni, come il piè di pagina o la barra laterale.

Per testare il tema, annida una voce di livello 3 sotto il livello 2, salva e controlla l’anteprima su computer e smartphone. Se il terzo livello non compare, il tema potrebbe non supportarlo.

Ove possibile, attieniti a due livelli. I menu a comparsa di terzo livello sono più difficili da usare, soprattutto con il mouse. Per cataloghi più complessi, esamina la nostra guida sulla pianificazione di un menu multilivello su Shopify per conciliare ampiezza e praticità d’uso.

Come funzionano i sottomenu sui dispositivi mobili

Gli smartphone non hanno il mouse, quindi il tuo sottomenu deve funzionare con il tocco.

Cosa visualizzano i clienti nel cassetto mobile

Sullo schermo di uno smartphone la barra orizzontale scompare dietro l’icona ad hamburger. Toccandola si apre un cassetto laterale (drawer):

• Le voci con sottomenu mostrano spesso un’icona di espansione, come un segno più (+) o una freccia verso il basso.
• Il tocco di solito apre le voci secondarie in un elenco o mostra un pannello secondario; il comportamento esatto dipende dal tema.
• Quando una voce madre usa un link #, la maggior parte dei temi apre l’elenco invece di caricare una pagina.

Shopify ricorda che è opportuno testare i menu sui dispositivi mobili per confermare che i menu a discesa si espandano come previsto e verificare che i pulsanti siano adatti ai pollici.

Aggiungere un link Mostra tutto

Su computer, un cliente può posizionare il puntatore per esplorare le sottocategorie e fare clic per andare alla collezione principale. Sugli schermi touch, il passaggio del cursore non esiste: un tocco apre il sottomenu o carica una pagina, ma non può compiere entrambe le azioni contemporaneamente.

Offrire un’opzione «Mostra tutto» nella navigazione principale mobile rappresenta una soluzione economica per soddisfare questa esigenza degli utenti mobili, come confermato dalle ricerche del Baymard Institute.

Eppure, le indagini di Baymard dimostrano che appena il 24% dei siti gestisce correttamente questo aspetto.

Come implementarlo nel tuo store:

1. Sotto ciascuna categoria principale, aggiungi una voce figlia chiamata «Mostra tutto [Categoria]» che punta alla collezione complessiva.
2. Posiziona questo link in cima all’elenco annidato.
3. Mantieni gli elenchi sintetici per evitare che gli utenti debbano scorrere a lungo la schermata.

Per approfondire la disposizione ideale, leggi la nostra guida alle migliori pratiche per i menu a cassetto su mobile.

Sottomenu non visibile? Risoluzione dei problemi comuni

Se il sottomenu non appare dopo il salvataggio, la causa è quasi sempre riconducibile a uno di questi quattro errori di configurazione:

Il tema utilizza un menu diverso

L’errore più comune consiste nel modificare Main menu mentre l’intestazione del tema è impostata su un’altra lista. Assicurati che il menu selezionato come menu principale superiore sia lo stesso appena creato o modificato. Puoi modificare il menu predefinito per la maggior parte dei temi modificando le impostazioni nella sezione Header del tema. Vai su Negozio online > Temi > Personalizza > Header, verifica il menu selezionato, scegli quello corretto e salva.

La voce non è rientrata

Se le righe secondarie rimangono allineate al margine sinistro, Shopify le considera voci indipendenti di livello 1. In Content > Menus, trascina ogni elemento sotto la voce principale e sposta leggermente il cursore verso destra finché la voce non risulta rientrata, quindi salva.

Il tema nasconde il terzo livello

Se le voci di livello 3 non compaiono, il tema potrebbe non supportare i sottomenu a tre livelli. Assicurati di aggiornare il tema in modo che mostri tutti e tre i livelli di menu nel tuo negozio online. Ricorda anche che alcuni temi abilitano l’annidamento unicamente nell’intestazione principale e non nelle barre laterali.

Conflitti con codice personalizzato o app

Se il menu lampeggia o si chiude improvvisamente, un’app esterna o del codice CSS/JS in theme.liquid potrebbe interferire con gli eventi del tema. Crea una copia del tema e controlla se il problema si ripresenta sulla versione pulita.

Accessibilità da tastiera e screen reader

La navigazione deve risultare agevole anche per chi utilizza la tastiera o tecnologie assistive.

Le linee guida della W3C Web Accessibility Initiative (WAI) indicano che è necessario evidenziare le voci di menu con sottomenu sia visivamente che mediante markup. Una freccia verso il basso avvisa visivamente della presenza di un sottomenu, mentre gli attributi ARIA ne trasmettono lo stato agli screen reader.

Inoltre, gli standard W3C stabiliscono che i sottomenu non dovrebbero aprirsi quando si usa il tasto Tab per scorrere il menu. Il motivo: altrimenti chi usa la tastiera dovrebbe attraversare ogni voce del sottomenu per raggiungere la successiva voce di primo livello.

Consulta la nostra guida sui menu di navigazione accessibili per conoscere le specifiche tecniche complete.

Figura 2: Illustrazione concettuale — Verifica del menu associato nell’header del tema e controllo del rientro delle voci secondarie.

Compromessi: Quando non aggiungere un altro sottomenu

I sottomenu mettono ordine, ma moltiplicare i livelli non è sempre la scelta migliore per gli utenti. Ogni livello extra aggiunge un passaggio in più durante la navigazione.

Quando gli elenchi diventano troppo estesi, la fruibilità crolla. Come evidenziano le ricerche del Nielsen Norman Group: «I menu a discesa molto lunghi che richiedono lo scorrimento impediscono agli utenti di vedere tutte le loro opzioni in un colpo d’occhio». Quando un acquirente deve scorrere all’interno di un menu a discesa, le opzioni in fondo rischiano di passare inosservate.

Prima di creare un nuovo sottomenu, valuta queste alternative:

1. Unificare collezioni ridotte: Se hai collezioni con appena due o tre articoli, raggruppale in un’unica pagina di collezione più ricca.
2. Chiarire le categorie generali: Etichette precise evitano ai visitatori di doversi addentrare in sottomenu complessi.
3. Sfruttare i filtri di collezione: Permetti ai clienti di filtrare per taglia, colore o prezzo nella pagina di collezione invece di elencare ogni variante nel menu.
4. Passare a un mega menu: Se il tuo catalogo conta decine di sottocategorie, un mega menu a più colonne organizza i link in blocchi visivi con titoli dedicati, permettendo di esaminare tutto l’assortimento senza scorrere. Richiede il supporto del tema o un’app apposita.

Per un quadro approfondito sui limiti dei temi nativi, leggi la nostra analisi sui limiti dei menu dei temi Shopify.

Dove si inserisce Navi+

I menu predefiniti di Shopify sono adatti a menu a discesa essenziali. Tuttavia, con la crescita del catalogo, le liste a colonna singola mostrano presto i loro limiti. Le liste lunghe a colonna singola possono diventare faticose da scorrere, e il menu mobile predefinito di un tema può essere più semplice di quanto serva al tuo catalogo.

Quando il tuo negozio richiede qualcosa in più rispetto ai menu di base, Navi+ ti offre strumenti dedicati:

• Desktop Mega Menus: Crea mega menu con prodotti, collezioni, immagini, icone e layout flessibili. Organizza le sottocategorie in layout flessibili per consentire ai clienti di vedere le opzioni senza scorrere.
• Mobile Menus: Crea menu mobili, menu a cassetto e menu ad hamburger per navigare più facilmente il negozio da smartphone.

I menu di Navi+ si creano nell’app Navi+ con un editor drag-and-drop, senza scrivere codice. Sono separati dal menu nel tuo pannello Shopify, che non viene sostituito automaticamente.

Se il tuo sottomenu è diventato una lista troppo lunga o desideri immagini e colonne su desktop insieme a un cassetto più chiaro su mobile, puoi provare Navi+ Tab Bar & Mega Menu accanto al tuo tema, mentre il tuo menu Shopify resta al suo posto.

Checklist pre-pubblicazione per il tuo sottomenu

Prima di rendere operativo il tuo nuovo menu, verifica questi 8 punti di controllo:

• Menu Header verificato: Verificato in Negozio online > Temi > Personalizza > Header che il menu attivo corrisponda a quello modificato in Content > Menus.
• Rientro controllato: Accertato che ogni voce figlia risulti visibilmente rientrata sotto la voce genitore.
• Voce senza link descrittiva: Se hai usato #, impostata una dicitura chiara come «Acquista per categoria».
• Link «Mostra tutto» presente: Aggiunto un link «Mostra tutto [Categoria]» in cima a ogni sottogruppo per gli utenti mobile.
• Testato su smartphone reali: Verificato che il sottomenu si apra e che i link siano facili da toccare su uno smartphone reale.
• Massimo sette voci principali: Limitata la barra principale a sette o meno collegamenti per evitare disordine.
• Indicatore visivo presente: Accertato che la voce principale mostri una freccia o un’icona che segnali l’apertura.
• Modifiche salvate: Premuto Salva menu per confermare tutte le impostazioni.

Domande frequenti (FAQ)

Come si aggiunge un sottomenu a un menu di navigazione in Shopify?

Apri Content > Menus nel pannello di amministrazione Shopify, seleziona il menu principale, fai clic su Aggiungi voce di menu per creare un link figlio e trascinalo tramite l’icona (⠿) sotto e leggermente a destra della voce principale. Fai clic su Salva menu.

Quanti livelli può avere un menu Shopify?

Una voce principale può contenere fino a due livelli di menu a discesa subordinati, per un totale di tre livelli. Anche il tema deve essere aggiornato per mostrare tutti e tre i livelli nel negozio.

Come faccio a rendere non cliccabile una voce di menu principale?

Inserisci # nel campo «Cerca o incolla un link» della voce principale e assegna un titolo chiaro come «Acquista per categoria». La maggior parte dei temi la considererà un pulsante di apertura anziché un link di navigazione.

Perché il sottomenu non viene visualizzato nel mio negozio?

La causa più comune è che la sezione Header del tema è collegata a un menu diverso da quello modificato. Può dipendere anche da un rientro non corretto o dal mancato supporto di quel livello da parte del tema.

I sottomenu funzionano sui dispositivi mobili?

Sì. Su smartphone, la maggior parte dei temi mostra il menu dietro un’icona ad hamburger e apre le voci secondarie al suo interno. Verifica sempre il comportamento su un telefono reale e valuta l’inserimento di un link «Mostra tutto» su ciascun livello per agevolare la navigazione.

Fonti

• Shopify Help Center: Drop-down menus — Guida ufficiale per creare menu a discesa e verifiche per smartphone.
• Shopify Help Center: Editing menus — Indicazioni sulle icone di trascinamento, limiti di modifiche e cancellazione delle voci principali.
• Shopify Partners Blog: Building Nested Navigations with Shopify Link List — Panoramica sull’organizzazione dei cataloghi tramite navigazione annidata.
• Shopify Community: Nesting menu not showing — Soluzione della community sul controllo del menu assegnato nell’header del tema.
• W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — Requisiti di accessibilità per indicatori grafici e navigazione tramite tasto Tab.
• Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — Dati di benchmarking sull’importanza dell’opzione «Mostra tutto» su mobile.
• Nielsen Norman Group: Dropdowns: Design Guidelines — Ricerche sui limiti di usabilità dei menu a discesa lunghi con scorrimento.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Scheda dell’applicazione per mega menu e menu mobili.
• YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — Video tutorial ufficiale per creare menu a discesa.
• YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — Tutorial su riorganizzazione dei menu e gerarchie visive.