Add a mega menu to Shopify's Dawn theme — Navi+ setup
Nel negozio demo live: Slide Menu si collega all'hamburger esistente (#Details-menu-drawer-container) e nasconde il drawer nativo (.menu-drawer) — nessun cambiamento visibile per gli acquirenti; Mega Menu si inserisce correttamente sotto l'intestazione — questo tema non ha problemi di overflow orizzontale (headerInsertSafe = true). La tabella dei selettori e le guide di configurazione di seguito sono specifiche per questo tema.
1 Analisi del tema
dawn corrisponde al previsto2 Anatomia della navigazione — mappa dei selettori
Selettori confermati univoci (matchCount = 1) nel negozio demo live. Ruolo presente solo se trovato.
| Ruolo | Selettore CSS | Piattaforma | Utilizzato per |
|---|---|---|---|
| Target di montaggio Navi+ | |||
| Trigger hamburger | #Details-menu-drawer-container |
Mobile | Navi+ si collega qui per attivare Slide Menu |
| Header | .section-header |
Mobile + Desktop | Inserisci Mega Menu sotto l'intestazione di Dawn |
| Menu principale | .header__inline-menu |
Desktop | Navi+ Mega Menu sostituisce i contenuti della navigazione desktop |
| Logo | .header__heading-link |
Mobile + Desktop | Fallback — inserisci icona trigger prima del logo quando non c'è hamburger |
| Trigger dei pannelli | |||
| Trigger hamburger | #Details-menu-drawer-container |
Mobile | Tocca per aprire il drawer mobile nativo |
| Icona ricerca | .header__icon--search |
Mobile + Desktop | Tocca per aprire il pannello di ricerca / overlay |
| Icona carrello | #cart-icon-bubble |
Mobile + Desktop | Tocca per aprire il drawer / pannello del carrello |
Aggiungi una Tab Bar Navi+ al tema Shopify Dawn
Una Tab Bar fissa una barra di navigazione al fondo dello schermo su mobile — proprio dove si appoggia il pollice. I tuoi clienti Dawn raggiungono il tuo menu, ricerca e carrello da qualsiasi pagina senza scorrere fino all'header.
- Navigazione in stile app — un aspetto nativo per il web mobile
- Accesso al carrello con un tocco per aumentare il tasso di checkout mobile
- Si posiziona sotto l'header di Dawn — non compete mai con la navigazione propria del tema
Il campo Link di ogni tab accetta un URL normale, open:NaviMenu(EMBED_ID) per aprire un altro menu Navi+, o un'azione di apertura integrata che attiva i pannelli di Dawn. Navi+ mantiene il drawer, la ricerca e il carrello del tema — la tab semplicemente li apre.
#Details-menu-drawer-container.header__icon--search#cart-icon-bubble- In Navi+, crea un nuovo menu e scegli Tab Bar.
- Aggiungi le tue tab — nome, icona, badge di conteggio carrello e collega ognuna (ad es. Home, Negozio, Ricerca, Carrello, Menu).
- Per aprire il cassetto nativo di Dawn, ricerca o carrello, imposta il collegamento della scheda sull'azione di apertura corrispondente. Per aprire invece un menu Navi+ Slide o Mega, utilizza
open:NaviMenu(EMBED_ID). - Apri Publish, abilita la modalità sticky e imposta il filtro dispositivo su Mobile.
Sostituisci il drawer mobile di Dawn con un Slide Menu Navi+
Uno Slide Menu sostituisce il drawer mobile predefinito di Dawn con un pannello multi-livello più ricco — icone, immagini e raggruppamento personalizzato — aperto dallo stesso hamburger che i tuoi clienti già usano.
- Navigazione multi-livello illimitata con icone e immagini
- Stesso pulsante, stessa posizione — i clienti non notano mai il cambio
- Ideale per cataloghi con molte collezioni da organizzare su mobile
Il trigger hamburger #Details-menu-drawer-container è stato confermato univoco nel demo live di Dawn, quindi Navi+ apre lo Slide Menu dal pulsante esatto che i clienti già toccano.
- In Navi+, crea un nuovo menu e scegli Slide Menu.
- Aggiungi le tue categorie con icone, colori, immagini e tutti i livelli di cui hai bisogno.
- Apri Publish, abilita il menu, quindi imposta il trigger su
#Details-menu-drawer-container— il selettore hamburger di Dawn. - Salva. Lo Slide Menu si apre ora da quel pulsante. Aggiungi
(M)per mantenerlo solo mobile.
Aggiungi un Grid Menu Navi+ al tema Dawn
Un Grid Menu mostra le tue collezioni come una griglia di immagini — un launcher in stile app che permette ai clienti di saltare direttamente a qualsiasi collezione in un tocco.
- Visuale, incentrato sulle immagini — i clienti vedono la collezione prima di leggere il suo nome
- Nessun selettore Dawn richiesto per il montaggio
- Ottimo per negozi con molte collezioni da sfogliare rapidamente
Un Grid Menu può essere inserito in un punto fisso in qualsiasi pagina Dawn (puntalo a un selettore CSS), o aperto su richiesta da un FAB o da una tab della Tab Bar — la tua scelta.
- In Navi+, crea un nuovo menu e scegli Grid Menu.
- Aggiungi collezioni: immagine di anteprima, nome visualizzato e link, ordinati come desideri sulla griglia.
- In Publish, abilita il metodo Insert/Replace, inserisci il selettore CSS di destinazione e scegli Insert After o Replace.
- Preferisci un pop-up? Salta il selettore e aprilo da un FAB o una tab con
open:NaviMenu(EMBED_ID).
Aggiungi un pulsante fluttuante Navi+ (FAB) al tema Dawn
Un FAB (Floating Action Button) è un pulsante fluttuante che rimane visibile durante lo scorrimento — una scorciatoia veloce a qualsiasi pagina o azione. Nessun selettore tema, distribuito in pochi minuti.
- Non entra mai in conflitto con nessuna parte di Dawn
- Flessibile: collega al carrello, una pagina di contatto, una promo, qualsiasi URL
- Funziona sia su desktop che su mobile
Un FAB si monta completamente autonomamente — nessun selettore CSS dal tema Dawn necessario. Configuralo e pubblicalo senza testare alcun selettore.
- In Navi+, crea un nuovo menu e scegli FAB.
- Scegli l'icona, il colore di sfondo e la dimensione — usa un'icona integrata o carica la tua.
- Scegli una posizione: basso a destra (più comune), basso a sinistra, o qualsiasi angolo fisso.
- Imposta l'azione: collega a una collezione, carrello, contatto o pagina promo, oppure apri un altro menu (Grid, Slide…) con
open:NaviMenu(EMBED_ID). - Apri Publish e abilita la modalità sticky. Il FAB funziona su tutti i dispositivi.
Aggiungi un Mega Menu mobile Navi+ al tema Dawn
Su mobile, un Mega Menu viene mostrato come un pannello multi-livello — permettendo ai clienti di sfogliare l'intero catalogo su un telefono con gerarchia chiara, immagini e banner.
- Menu multi-livello con icone e immagini su schermi piccoli
- Aprilo sotto l'header o da una tab della Tab Bar
- Ottimo quando un negozio ha molte categorie da visualizzare su mobile
Un Mega Menu mobile è un menu sezione. Inseriscilo direttamente sotto l'header di Dawn, o aprilo da una tab della Tab Bar — entrambi funzionano senza legarsi al menu proprio del tema.
- In Navi+, crea un nuovo menu, scegli Mega Menu, e progetta le colonne multi-livello (categorie, immagini in primo piano, banner).
- In Publish, abilita il metodo Insert/Replace, inserisci
header(M)e scegli Insert After — cade sotto l'intestazione mobile. - Preferisci aprirlo da una tab? Lascialo non pubblicato qui e punta una tab "Menu" della Tab Bar ad esso con
open:NaviMenu(EMBED_ID). - Mantieni il filtro dispositivo su Mobile.
Inserisci un Mega Menu Navi+ sotto l'header di Dawn
Inserisci un Mega Menu sotto l'header — una barra a discesa multi-colonna che appare proprio sotto l'header di Dawn al passaggio del mouse, senza alcuna modifica al Liquid del tema.
- Dropdown multi-colonna con immagini e link in primo piano
- Lascia il menu proprio del tema intatto — entrambi i menu coesistono
- Il modo più pulito per montare quando il tema supporta l'inserimento
Dawn è headerInsertSafe = true — un Mega Menu si inserisce sotto l'header senza overflow orizzontale, e il menu nativo rimane al suo posto.
- In Navi+, crea un nuovo menu, scegli Mega Menu, e progetta le colonne dropdown (categorie, immagini in primo piano, prodotti, banner).
- In Publish, abilita il metodo Insert/Replace.
- Inserisci il selettore
.section-header(D)e scegli Insert After — la barra mega appare direttamente sotto l'header di Dawn. - Il suffisso dispositivo
(D)la mantiene solo desktop.
Sostituisci il menu desktop di Dawn con un Mega Menu Navi+
La modalità replace scambia il menu nativo all'interno dell'header interamente — Navi+ esegue il rendering direttamente in quel contenitore, mantenendo intatto il layout dell'header di Dawn.
- Mantiene il posto del menu nell'header — nessuna barra extra aggiunta
- Migliore quando non vuoi due righe di navigazione
- Funziona su qualsiasi tema, anche senza
headerInsertSafe
Il selettore del menu principale .header__inline-menu è stato confermato — Navi+ esegue il rendering del Mega Menu esattamente dove il menu nativo si trova nell'header di Dawn.
- In Navi+, crea un nuovo menu, scegli Mega Menu, e progetta le colonne dropdown.
- In Publish, abilita il metodo Insert/Replace.
- Inserisci il selettore nav desktop
.header__inline-menu(D)e scegli Replace — Navi+ esegue il rendering al posto del menu Dawn nativo. - Dopo aver scelto Replace, ottimizza per un caricamento senza flash — vedi la guida alla pubblicazione.
Inserisci un'icona trigger prima del logo di Dawn
Aggiungi un'icona trigger prima del logo — un hamburger personalizzato proprio accanto al logo di Dawn per i temi senza hamburger mobile predefinito, o come secondo punto di ingresso nel tuo menu Slide / Mega.
- Crea un nuovo punto di trigger senza modificare Liquid
- Posizionamento naturale — proprio accanto al logo, familiare ai clienti
- Ottimo per i temi desktop-first senza hamburger mobile
Il selettore del logo .header__heading-link è stato confermato su Dawn, quindi Navi+ può inserire un'icona trigger proprio prima ad esso.
- Un pattern avanzato — per i temi senza hamburger mobile, o per aggiungere un secondo punto di ingresso.
- Costruisci un piccolo menu single-item (un Mega/Slide a un solo elemento) il cui elemento apre il tuo menu Slide principale con
open:NaviMenu(EMBED_ID). - In Publish, abilita il metodo Insert/Replace, inserisci
.header__heading-link(M)e scegli Insert Before — l'icona appare prima del logo di Dawn. - Un po' di CSS personalizzato l'allinea; contatta il supporto se hai bisogno di una mano.
11 Come aggiungere un menu Navi+ a Dawn
Ogni tipo di menu su questa pagina segue gli stessi tre passaggi. Abilita l'app una volta — quindi ogni nuovo menu è solo design e pubblica. Nessuna modifica di Liquid richiesta.
- Abilita Navi+ una volta. In Shopify admin vai a Online Store → Themes → Customize → App embeds e attiva Navi+. Questo carica l'app sulla vetrina Dawn e copre ogni menu che crei. Guida all'installazione →
- Progetta il menu nell'editor Navi+ — elementi, icone, immagini, colonne e colori.
- Pubblicalo. Apri il pannello Publish del menu. I menu fluttuanti (Tab Bar, FAB) hanno solo bisogno dell'interruttore di pubblicazione; i menu slide e section puntano a un selettore CSS dalla tabella sopra.
Aggiungi (M) o (D) a qualsiasi selettore per target mobile-only o desktop-only — ad es. header(D). Non sei sicuro di un selettore? Apri yourstore.com/#navidebug-on, passa il mouse su un elemento e premi Ctrl/Cmd + C per copiarlo.
Test di interazione live
Playwright fa clic automaticamente nel negozio demo live di Dawn e acquisisce il risultato.
Domande frequenti — Navi+ sul tema Shopify Dawn
Come aggiungo un menu Navi+ al tema Shopify Dawn?
Come aggiungo una barra di tab al tema Shopify Dawn?
#cart-icon-bubble).Come aggiungo un mega menu al tema Shopify Dawn?
.section-header(D) con Insert After — nessuna modifica del codice tema.Come sostituisco il menu mobile di Dawn con un menu scorrevole?
#Details-menu-drawer-container. Lo slide menu si apre allora dal pulsante che i clienti già toccano, sostituendo il drawer nativo.Devo modificare il codice tema di Dawn per aggiungere un menu?
Navi+ funziona con il tema Shopify Dawn?
Altri temi della famiglia dawn
Aggiungi menu Navi+ ad altri temi Shopify
Riferimento selettori
Contenitori di pannelli e selettori supplementari — utilizzati per il rilevamento dello stato o per nascondere gli elementi nativi.
| Ruolo | Selettore CSS | Piattaforma | Utilizzato per |
|---|---|---|---|
| Slide drawer | .menu-drawer |
Mobile | Drawer nativo — nascosto quando Navi+ Slide Menu è attivo |
| Modale ricerca | .search-modal |
Mobile + Desktop | Contenitore del pannello di ricerca — rileva lo stato aperto/chiuso |
| Carrello drawer | — | Mobile + Desktop | Contenitore del carrello drawer — rileva lo stato aperto/chiuso |
| Mega menu | — | Desktop | Nessun mega menu nativo — Navi+ ne inserisce uno al suo posto |