Come creare un menu di navigazione desktop in un'app menu Shopify (passo dopo passo)

Un menu di navigazione desktop realizzato con un’app per menu è efficace solo quanto la struttura su cui poggia. Tracciando un albero a tre livelli, organizzando colonne anziché liste interminabili, scegliendo con intenzione tra hover o clic e posizionando la barra nel punto corretto sotto l’header, l’esplorazione del catalogo diventa immediata.

Per i commercianti con cataloghi in crescita, un menu orizzontale ordinato garantisce un orientamento chiaro. Gli acquirenti non dovrebbero mai tirare a indovinare dove risiedono le collezioni né districarsi tra elenchi affollati. Disponendo colonne pulite sotto l’header, offri un accesso visivo diretto alle tue collezioni su desktop.

Risposta rapida: come creare un menu di navigazione desktop in un’app menu Shopify

Per creare un menu di navigazione desktop in un’app menu Shopify, pianifica un albero di navigazione fino a tre livelli, attiva l’app embed nel tema, crea le voci di primo livello e le colonne a discesa, imposta l’apertura tramite hover o clic, quindi pubblica sotto o al posto del menu dell’header e testa ogni risoluzione schermo.

1. Pianifica l’albero del menu: Mappa fino a tre livelli su carta prima di aprire l’applicazione.
2. Attiva l’app embed: Abilita l’estensione Store Connector nell’editor del tema Shopify.
3. Aggiungi voci di livello 1: Crea un Desktop Mega Menu e definisci i link orizzontali principali.
4. Costruisci colonne a discesa: Attiva la modalità multicolonna e bilancia le larghezze della griglia.
5. Pubblica sotto l’header e testa: Seleziona Insert After o Replace e verifica la visualizzazione desktop.

Il resto di questa guida illustra ogni passaggio in Navi+, esaminando i problemi tipici e le relative soluzioni.

Cosa aggiunge un’app per menu al menu desktop di Shopify

Shopify mette a disposizione strumenti di navigazione affidabili, ma le opzioni di layout dipendono dal tema attivo. Secondo il Centro assistenza Shopify, una voce di menu di primo livello può contenere fino a due livelli di menu a discesa nidificati. Shopify evidenzia inoltre che la posizione del menu varia a seconda del tema.

Diversi temi Shopify includono opzioni native per mega menu. Se il tuo tema offre già la struttura multicolonna di cui hai bisogno, affidarsi alle impostazioni native è la soluzione più lineare. Il video seguente mostra come funziona la configurazione basata su tema:

If your theme already has a mega menu, this walkthrough shows the theme-only route.

Tuttavia, quando l’assortimento di prodotti cresce, i menu standard dei temi possono risultare restrittivi. Un’app dedicata introduce vantaggi concreti:

• Larghezze di colonna personalizzate su una griglia flessibile a 12 colonne.
• Schede visive con immagini di collezione inserite direttamente nei pannelli a discesa.
• Controllo esplicito del trigger di apertura, scegliendo tra hover e clic.
• Punti di ancoraggio precisi per collocare la barra sopra, dentro o sotto l’header.

Come dimostrato dalle ricerche di usabilità del Nielsen Norman Group, i layout bidimensionali a mega menu consentono ai visitatori di vedere tutte le opzioni insieme, senza dover memorizzare percorsi nascosti in elenchi a cascata profondi. Per verificare dove terminano le opzioni standard, consulta la nostra analisi sui limiti del menu nativo del tema Shopify.

Pianifica prima l’albero del menu: livello 1, colonne e link

Prima di configurare l’applicazione, delinea la gerarchia su carta o su un foglio di calcolo. Un mega menu desktop ordinato segue una struttura a tre livelli:

• Livello 1 (Barra principale): Le categorie orizzontali visibili sull’header. Mantieni da cinque a sette voci affinché la barra stia su una sola riga sui laptop comuni.
• Livello 2 (Colonne): Le intestazioni di colonna all’interno del pannello a discesa. Raggruppale secondo la logica d’acquisto: tipologia di prodotto, target o occasione.
• Livello 3 (Link): I singoli collegamenti a collezioni, prodotti o pagine sotto ogni intestazione di colonna.

Nell’organizzare questi livelli, applica un criterio selettivo rigoroso. Le ricerche del Nielsen Norman Group evidenziano che i menu di navigazione devono essere sfoltiti con maggior rigore rispetto alle pagine stesse. Ogni link superfluo aumenta il disordine e rallenta la lettura visiva. Scegli titoli concisi e inserisci immagini solo se fungono da opzioni di scelta effettive, come schede di collezione in evidenza.

Ecco un esempio architetturale bilanciato di albero a tre livelli:

Donna (Livello 1)
├── Abbigliamento (Colonna Livello 2 - Larghezza: 3/12)
│   ├── Abiti & Tute (Link Livello 3)
│   └── Top & T-Shirt (Link Livello 3)
├── Scarpe (Colonna Livello 2 - Larghezza: 3/12)
│   ├── Stivali & Tacchi (Link Livello 3)
│   └── Sneakers (Link Livello 3)
├── Accessori (Colonna Livello 2 - Larghezza: 3/12)
│   ├── Borse a mano (Link Livello 3)
│   └── Gioielli (Link Livello 3)
└── In Evidenza (Colonna Livello 2 - Larghezza: 3/12)
    └── [Scheda Collezione Nuova Stagione] (Livello 3)

Uomo (Livello 1)
├── Capi d'abbigliamento (Colonna Livello 2 - Larghezza: 4/12)
│   ├── Camicie & Polo (Link Livello 3)
│   └── Pantaloni & Chino (Link Livello 3)
└── Calzature (Colonna Livello 2 - Larghezza: 4/12)
    └── Scarpe casual (Link Livello 3)

Accessori (Livello 1)
├── Portafogli & Piccola Pelletteria (Colonna Livello 2 - Larghezza: 6/12)
└── Cinture & Sciarpe (Colonna Livello 2 - Larghezza: 6/12)

Saldi (Livello 1 - Link Diretto)

Per scoprire ulteriori schemi di organizzazione, consulta la nostra guida sulle migliori pratiche di layout e raggruppamento per mega menu.

Passaggio 1: Installa Navi+ e attiva l’app embed

Installa Navi+ direttamente dallo Shopify App Store.

Navi+ si carica tramite un’app embed del tema, quindi devi attivarla prima che qualunque menu creato possa essere visualizzato sullo store.

1. Nel pannello di controllo Shopify, vai su Negozio online > Temi.
2. Se il tuo negozio riceve visite reali, clicca sui tre puntini accanto al tema attivo e scegli Duplica. Operare su una copia consente di strutturare, personalizzare e testare il menu in totale sicurezza.
3. Clicca su Personalizza sul tema duplicato per accedere all’editor.
4. Nella barra laterale sinistra, fai clic sull’icona App embed, come descritto nella guida del Centro assistenza Shopify sulle estensioni tema.
5. Individua Store Connector nell’elenco e sposta l’interruttore sulla posizione Attivo.
6. Fai clic su Salva in alto a destra.

Ricorda che gli incorporamenti sono vincolati a ciascun tema specifico. Se in futuro cambi tema o effettui un aggiornamento, torna nell’editor e riattiva Store Connector sul nuovo tema.

Passaggio 2: Crea un Desktop Mega Menu e aggiungi le voci di livello 1

Con l’incorporamento attivo, accedi alla dashboard di Navi+ all’interno del pannello Shopify.

1. Crea un nuovo menu e seleziona Desktop Mega Menu come tipologia. Puoi iniziare da un modello pronto o da una configurazione vuota.
2. Se utilizzi un modello, rimuovi gli elementi predefiniti non coerenti con il tuo schema.
3. Inserisci le tue voci di livello 1 una a una secondo la pianificazione su carta.
4. Trascina gli elementi verso l’alto, il basso, a sinistra o a destra per definirne posizione e nidificazione genitore-figlio. Lo spostamento verticale modifica l’ordine; quello orizzontale crea sotto-elementi nidificati.
5. Assegna un URL di destinazione valido a ciascuna voce di livello 1. Anche se un elemento apre un pannello a più colonne, collegalo a una pagina di collezione generale per accogliere chi clicca sull’intestazione principale.

Step 3: Build dropdown columns, links, and images

Trasforma ora i lunghi elenchi di collegamenti in colonne ordinate e semplici da scorrere.

Figura 1: Illustrazione concettuale (Concept illustration) — Step 3: Build dropdown columns, links, and images {#step-3-build-dropdown-columns-links-and-images}

1. Seleziona una voce di livello 1 che richiede un pannello ampio e attiva l’opzione Is Multi-Column menu item. Questa impostazione converte le voci figlie dirette (livello 2) in intestazioni di colonna.
2. Sotto ciascuna intestazione di colonna, inserisci i tuoi link di destinazione di livello 3.
3. Imposta la larghezza di ogni colonna sfruttando la griglia a 12 dell’applicazione. Per un pannello a quattro colonne, assegna proporzioni come 3/12, 3/12, 3/12 e 3/12. Per due colonne, imposta entrambe su 6/12.
4. Se un menu a discesa racchiude pochi link, regola il parametro di larghezza del sottomenu multicolonna nelle impostazioni di layout per impedire che il pannello crei spazi vuoti inutili. Per sole tre o quattro voci, un classico menu a discesa a colonna singola risulta più sobrio.
5. Rendi il layout accattivante inserendo una scheda visiva di collezione nella colonna destra. Assicurati che l’immagine rimandi direttamente a una collezione affinché rappresenti una scelta concreta e non una decorazione fine a se stessa. La struttura bidimensionale orienta con chiarezza le scelte degli utenti.

Passaggio 4: Scegli hover o clic e personalizza lo stile della barra

Stabilisci ora con quale modalità aprire i pannelli a discesa e cura l’aspetto grafico per riflettere l’identità del negozio.

La scelta tra mostrare i menu al passaggio del cursore o al clic genera frequenti discussioni tra i commercianti. L’evidenza scientifica mostra vantaggi e svantaggi precisi:

In Navi+, la scelta del modello di interazione richiede un solo clic. Nelle impostazioni di layout, usa l’opzione Show submenu on hover per impostare il comportamento voluto. Attivandola, i sottomenu si aprono al passaggio del mouse; disattivandola, gli utenti dovranno cliccare sulla voce per mostrare il pannello.

Dopo aver scelto il trigger, definisci lo stile grafico:

• Imposta tonalità di sfondo e colore del testo perfettamente armonizzate con l’header del tema.
• Configura variazioni di colore o sottolineature delicate per offrire un riscontro visivo immediato durante la navigazione.
• Modifica le dimensioni dei caratteri e le spaziature orizzontali in modo che la barra si inserisca con naturalezza accanto al logo e alle icone superiori.

Step 5: Publish under the header and test every screen width

Il menu appena strutturato risulterà visibile sulla vetrina solo dopo averne confermato la pubblicazione all’interno dello strumento.

Figura 2: Illustrazione concettuale (Concept illustration) — Step 5: Publish under the header and test every screen width {#step-5-publish-under-the-header-and-test-every-screen-width}

Nell’editor di Navi+, clicca sul pulsante Publish to website e abilita l’interruttore Insert/Replace.

Per limitare l’applicazione di queste regole ai soli desktop, aggiungi il suffisso (D) al selettore, ad esempio header(D).

Per impostazione predefinita, qualsiasi larghezza inferiore a 768px attiva la modalità mobile.

Verifica il comportamento su molteplici risoluzioni: monitor panoramici, laptop standard e tablet in orizzontale. Controlla che la barra non si spezzi su due righe e che i pannelli restino centrati.

1. Attiva la navigazione da tastiera e premi Tab per scorrere sequenzialmente le voci.
2. Verifica che il contorno di selezione sia visibile ed evidente su ciascun elemento genitore e link a discesa.
3. Premi Escape con un pannello aperto per accertarti che si chiuda riportando il cursore sul pulsante di partenza, secondo le indicazioni W3C WAI-ARIA.

Per indicazioni specifiche su singoli template, consulta la nostra guida su come aggiungere un mega menu al tema Dawn ed esplora i menu Navi+ sui temi Shopify più diffusi. Per una procedura illustrata passo dopo passo, fai riferimento alla guida completa alla pubblicazione con schermate.

Se desideri offrire un’esperienza fluida anche su smartphone, la medesima struttura può essere estesa al mobile grazie alla sincronizzazione Smart responsive, illustrata di seguito.

Problemi comuni: menu non visibile, coperto dall’header, disposto su due righe

Durante l’installazione e la pubblicazione di un menu desktop esterno, può capitare di riscontrare comportamenti inattesi. Utilizza questa tabella per individuarne rapidamente la causa:

Per approfondimenti su configurazioni avanzate e scenari particolari, consulta la sezione FAQ su Desktop Mega Menu.

Compromessi: quando un semplice menu a discesa supera un mega menu

Un mega menu a più colonne costituisce un formidabile strumento di presentazione, ma non rappresenta la scelta idonea per qualsiasi negozio Shopify. Prima di impostare un layout articolato, considera questi importanti compromessi:

• Cataloghi essenziali: Se il negozio commercializza pochi articoli o si basa su due o tre collezioni chiave, il menu nativo del tema o un semplice sottomenu a colonna singola è più snello ed efficace. La navigazione di default di Shopify gestisce fino a due livelli a discesa nidificati, sufficienti per assortimenti contenuti.
• Oneri di manutenzione: Un mega menu richiede una cura costante nel tempo. Con l’avvicendarsi delle collezioni, la scadenza delle promozioni e i cambi di inventario, ogni colonna, titolo e immagine va aggiornato manualmente. Inserire continuamente elementi senza rigore genera pannelli caotici che disorientano chi compra.
• Criticità d’uso: I mega menu basati sull’hover possono indispettire gli acquirenti se privi di un tempo di attesa calibrato o quando utilizzati su portatili con schermi touch.
• Dipendenze dal tema: L’impiego di un’app comporta un livello di integrazione app embed che va sempre riverificato a ogni cambio o aggiornamento del tema.

L’adozione di un mega menu desktop è conveniente quando si gestiscono cataloghi articolati, occorre distribuire le categorie su più colonne o si desidera mettere in evidenza schede di collezione direttamente nel menu principale. Per individuare l’impostazione ideale per il tuo store, leggi la nostra guida su come scegliere il tipo di menu ideale per il tuo negozio.

Dove si colloca Navi+

Navi+ Tab Bar & Mega Menu nasce per unire la semplicità d’uso alla flessibilità, superando i limiti dei temi senza richiedere sviluppo su misura.

Per la navigazione desktop, Navi+ offre un costruttore dedicato di Desktop Mega Menu fondato su una chiara struttura a tre livelli. Gli esercenti possono modulare le larghezze delle colonne su una griglia flessibile, scegliere tra hover e clic con un solo parametro e posizionare la barra tramite Insert After o Replace con filtri specifici per schermi desktop.

Per mantenere ordinata la barra sui laptop più piccoli, Navi+ include un’impostazione di breakpoint e un pulsante freccia di overflow che raccoglie dietro una freccia le voci di primo livello in eccesso invece di mandarle a capo. Smart responsive incorpora un riferimento vivo del tuo albero desktop in un menu laterale per mobile, così non devi creare un secondo albero.

Se desideri provarlo sul tuo negozio, Navi+ Tab Bar & Mega Menu ti consente di impostare il Desktop Mega Menu qui illustrato, testarlo in tutta tranquillità su un tema duplicato e disattivarlo in qualsiasi momento.

Lista di controllo prima della pubblicazione

Esamina questa lista di verifica prima di rendere il tuo nuovo menu desktop visibile a tutti i visitatori:

• Albero del menu definito: Mappati al massimo tre livelli su carta (barra principale, colonne, link).
• App embed attiva: Store Connector abilitato e salvato in Editor del tema > App embed.
• Voci di livello 1 bilanciate: Le categorie principali occupano un’unica riga orizzontale sugli schermi laptop ordinari.
• Colonne strutturate e calibrate: Le voci di livello 2 fungono da intestazioni di colonna con larghezze ben dosate.
• Contenuti visivi verificati: Le schede illustrano opzioni di collezione effettive senza appesantire inutilmente la vista.
• Modalità di attivazione definita: Selezionata con consapevolezza l’apertura al passaggio con ritardo o tramite clic.
• Selettore di pubblicazione verificato: Configurato Insert After o Replace con il selettore header corretto e il suffisso desktop (D).
• Resa multischermo collaudata: Visualizzazione testata su display panoramico, laptop standard e tablet.
• Accessibilità da tastiera verificata: La pressione di Tab sposta il focus in modo sequenziale tra categorie e sottomenu, mentre Escape chiude il pannello attivo e restituisce il cursore al pulsante genitore, secondo le raccomandazioni W3C.
• Link verificati: Cliccato ogni collegamento per accertarsi che indirizzi a pagine e collezioni attive.

Se desideri provarlo sul tuo negozio, Navi+ Tab Bar & Mega Menu ti consente di impostare il Desktop Mega Menu qui illustrato, testarlo in tutta tranquillità su un tema duplicato e disattivarlo in qualsiasi momento.

FAQ

Quanti livelli può contenere un menu desktop?

I menu a discesa nativi di Shopify consentono fino a due livelli nidificati sotto una voce di primo livello. La struttura di un Desktop Mega Menu in Navi+ è concepita su tre livelli: la barra orizzontale principale, le intestazioni di colonna e i singoli collegamenti.

Un mega menu dovrebbe aprirsi al passaggio del mouse o al clic?

Entrambe le soluzioni sono valide se ben calibrate: l’hover richiede un breve ritardo (Baymard suggerisce 300–500 ms) per evitare sfarfallii, mentre il clic rappresenta l’opzione più solida e accessibile. In Navi+ puoi alternare i due comportamenti con il comando “Show submenu on hover”.

In quale posizione dell’header compare il menu?

Utilizzando la modalità Insert After con il selettore header, la barra viene inserita subito sotto l’header. Con Replace, il menu predefinito del tema viene nascosto e Navi+ ne assume la posizione esatta.

Perché il menu non viene mostrato dopo aver installato l’applicazione?

Spesso accade perché l’app embed è disattivata o il menu non è stato ancora pubblicato. Assicurati che Store Connector sia attivo nell’editor del tema, controlla la validità del selettore e incrementa lo z-index se un header fisso lo nasconde.

Perché il menu desktop passa alla visualizzazione mobile su tablet o piccoli laptop?

Per impostazione predefinita, qualsiasi schermo con larghezza inferiore a 768px attiva il layout mobile. Puoi abbassare questa soglia nei parametri di layout e attivare le frecce di scorrimento per preservare l’allineamento orizzontale.

È possibile utilizzare la medesima struttura su smartphone?

Sì, la funzionalità Smart responsive proietta direttamente la struttura del menu desktop all’interno di un Slide menu per dispositivi mobili senza costringerti a riconfigurare una seconda gerarchia.

Fonti

• Centro assistenza Shopify: Menu a discesa
• Centro assistenza Shopify: App embed nei temi
• Nielsen Norman Group: Mega Menus Work Well
• Nielsen Norman Group: Mega Menus Gone Wrong
• Baymard Institute: Dropdown Menu Flickering Issue
• Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
• Shopify Dawn Theme PR #1316
• W3C WAI-ARIA APG: Disclosure Navigation Example
• Guida Navi+: Pubblicazione su Shopify
• Guida Navi+: FAQ Desktop Mega Menu
• Guida Navi+: Come utilizzare Desktop Mega Menu
• Guida Navi+: Impostazioni di layout