Quick answer: how to create a menu with the Navi+ app on Shopify
Per creare un menu con l’app Navi+ su Shopify, installa Navi+ dallo Shopify App Store, fai clic su Add menu, scegli un tipo di menu, parti da un modello, da un menu vuoto o dall’IA, quindi attiva Store Connector nei blocchi incorporati dell’app e pubblica.
- Installa Navi+ dallo Shopify App Store e apri il pannello dell’applicazione.
- Fai clic su Add menu e scegli il tipo di menu di navigazione preferito.
- Parti da un modello pronto, da una pagina vuota o da una struttura generata da IA.
- Aggiungi, organizza e personalizza i link a collezioni, prodotti o pagine.
- Attiva Store Connector nei blocchi incorporati dell’app del tema, salva e clicca su Publish to website.
- Controlla la navigazione in tempo reale su dispositivi mobili e browser desktop.
Non serve codice del tema. Navi+ funziona tramite un app embed del tema Shopify, quindi crei e visualizzi l’anteprima del menu nell’app invece di modificare i file del tema.
Before you start: which Navi+ menu type do you need?
Scegliere il formato di navigazione giusto prima di costruire aiuta a evitare rifacimenti. Ogni negozio ha un catalogo di dimensioni diverse, quindi scegli il tipo più adatto a come navigano i tuoi clienti.
Figura 1: Illustrazione concettuale (Concept illustration) — Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | Aggiunge una barra fissa in basso con icone ed etichette su schermi mobili | Il traffico è principalmente da smartphone e vuoi un accesso immediato alle sezioni chiave |
| Mobile Menu | Crea un cassetto laterale a comparsa o menu hamburger per l’intero catalogo | Serve una directory mobile ben ordinata che organizzi grandi categorie di articoli |
| Desktop Mega Menu | Crea menu a discesa a più colonne con prodotti, collezioni e banner promozionali | Gli utenti desktop devono visualizzare più reparti e offerte in un solo sguardo |
| Mobile Mega Menu | Crea un layout mega menu pensato per gli schermi mobile | Un catalogo a più livelli richiede percorsi di navigazione più profondi senza sovraccaricare uno schermo piccolo |
| Icon Menu e Floating Button | Aggiunge riquadri con icone o un pulsante flottante che rimandano a prodotti, collezioni o pagine | Vuoi un accesso rapido a supporto, carrello o promozioni senza occupare l’header |
I negozi con visitatori per lo più mobile possono partire con una Tab Bar o un Mobile Menu. Come osserva il Nielsen Norman Group, la navigazione nascosta è meno facile da scoprire di quella visibile. Una Tab Bar fissa mantiene le destinazioni principali visibili invece di nasconderle dietro un menu chiuso.
Anche se puoi attivare più menu contemporaneamente, la procedura consigliata è completare e verificare un singolo menu prima di aggiungerne un altro. Per un’analisi completa, consulta la nostra guida su come scegliere il giusto tipo di menu.
Step 1: Install Navi+ from the Shopify App Store
Apri la pagina di Navi+ Tab Bar & Mega Menu sullo Shopify App Store. L’installazione dall’app store ufficiale ti guida nel flusso di installazione standard di Shopify.
Clicca su Install per avviare la configurazione. Shopify mostra la sua schermata di permessi standard. Navi+ mostra i tuoi menu tramite un app embed del tema, che attiverai nel Passaggio 5.
Approva i permessi per completare l’installazione. Al termine, l’applicazione si aprirà automaticamente all’interno del pannello di controllo di Shopify. In seguito potrai accedere all’editor in ogni momento selezionando Apps nella barra laterale sinistra.
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
Nel pannello di Navi+, fai clic sul pulsante Add menu. Si aprirà la schermata Choose kind of menu con sei schede: Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu e Floating Button. Seleziona la scheda corrispondente al tuo obiettivo.
Start from a template
Seleziona Create from a template per esplorare layout grafici già pronti. Quando trovi una struttura adatta al tuo catalogo, clicca su Use this template. L’editor compilerà automaticamente collegamenti dimostrativi, icone e stili che potrai modificare subito.
Start blank
Scegli Blank se hai già pianificato la tua struttura su carta. Questo metodo offre piena libertà senza dover rimuovere elementi dimostrativi. Se non hai ancora pianificato la gerarchia, leggi la nostra guida su come tracciare la struttura del menu prima di iniziare.
Build the structure with AI
Se desideri una bozza immediata senza digitare ogni elemento a mano, sfrutta l’assistente IA integrato. Descrivi brevemente il tuo negozio e il tipo di prodotti in parole semplici. L’IA genererà una struttura iniziale direttamente nell’editor. Manterrai il controllo totale per collegare le collezioni, inserire foto e regolare i colori.
Use your existing Shopify menu
Navi+ può anche collegarsi a un menu di navigazione Shopify esistente come punto di partenza. Una volta nell’editor, controlla le posizioni annidate prima di pubblicare e ricontrollale ogni volta che modifichi il menu originale in Shopify.
Step 3: Add and arrange menu items
Aggiungere e riordinare le voci avviene con il trascinamento. Puoi aggiungere nuove voci, trascinarle per cambiarne l’ordine e annidarle sotto una voce principale.
Link to products, collections, and pages
Ogni voce del menu richiede una destinazione funzionante. In Navi+ le voci possono rimandare a prodotti, collezioni e pagine. Organizza le categorie in modo logico, mantieni brevi le etichette del primo livello, metti per prime le collezioni più vendute e consulta la nostra guida su come impostare i link del menu in Shopify.
Nest items up to three levels
Nei cataloghi articolati, l’annidamento previene l’affollamento visivo. Con il pacchetto Business di Navi+, puoi strutturare la navigazione fino a tre livelli di profondità. Per confronto, il menu nativo di Shopify consente fino a due livelli di menu a discesa secondo la documentazione ufficiale.
Step 4: Customize icons, images, colors, and layout
Quando l’albero è pronto, adatta lo stile al tuo brand. Per una Tab Bar scegli icone chiare e controlla la leggibilità delle etichette su mobile. Per i Mega Menu aggiungi immagini delle collezioni e scegli un layout adatto al tuo catalogo.
Adatta i colori di testo e sfondo al tema Shopify attivo. Controlla sempre il contrasto di testo e icone su un vero schermo di smartphone per verificare che siano leggibili.
Prima di pubblicare online, apri la scheda Publish e usa Test this menu per vedere l’anteprima del menu. Per approfondire lo stile, consulta la nostra guida su come modificare lo stile del menu.
Step 5: Turn on Store Connector in App embeds, then publish
Mostrare Navi+ nel tuo negozio non richiede di scrivere o modificare codice del tema. Funziona tramite un app embed del tema Shopify.
Figura 2: Illustrazione concettuale (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
Se il negozio ha visite e ordini costanti, la buona norma è testare le novità in un ambiente separato. Come raccomandato nelle linee guida di Shopify sulla duplicazione dei temi, creare una copia di backup permette di verificare ogni modifica senza interferire con gli acquisti dei clienti attivi.
Turn on Store Connector
In Shopify, vai su Online Store > Themes e clicca su Customize sul tema desiderato. Nella barra laterale, clicca sull’icona App embeds, individua Store Connector, attiva l’interruttore seguendo le istruzioni di Shopify e clicca su Save. Questa attivazione va eseguita una sola volta per sito web.
Click Publish to website
Torna al pannello di Navi+, apri il menu configurato e fai clic su Publish to website. L’applicazione presenterà opzioni di visualizzazione su misura per il tuo formato—come Replace your main menu, Add below your header o Use your existing menu icon. Navi+ suddivide le modalità di pubblicazione in tre gruppi guidandoti verso la scelta adatta. Conferma la selezione e attiva la pubblicazione.
Step 6: Preview on mobile and desktop and fix common problems
Dopo aver pubblicato, verifica la navigazione su computer e su un vero smartphone. I dispositivi touchscreen mostrano dettagli di ergonomia e spaziature che i simulatori per computer tendono a non rilevare.
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector è attivo su un altro tema oppure le modifiche non sono salvate | Nell’editor del tema attivo attiva Store Connector in App embeds e clicca su Save |
| Two menus show at once | Il menu predefinito del tema è ancora visibile insieme a quello dell’app | Nelle opzioni di Navi+ scegli Replace your main menu o nascondi il blocco nel tema |
| Menu disappeared after changing theme | I blocchi incorporati non si trasferiscono automaticamente su un nuovo tema | Apri l’editor del nuovo tema, riattiva Store Connector in App embeds e salva |
Menu does not appear
Se il menu non compare dopo la pubblicazione, verifica che l’interruttore Store Connector sia attivo sul tema attualmente pubblicato e non su una bozza, e controlla di aver premuto Save nell’editor del tema.
Two menus show at once
Se entrambi i menu sono visibili contemporaneamente, il blocco di navigazione nativo occupa ancora l’intestazione. Imposta l’opzione Replace your main menu nelle impostazioni di Navi+ oppure disattiva il menu standard nella sezione Header del tema.
Menu disappeared after changing theme
Quando cambi o aggiorni il tema di Shopify, i blocchi incorporati non si attivano in automatico. Apri l’editor del nuovo tema, riattiva Store Connector in App embeds e salva. Per un controllo completo, consulta la nostra checklist dettagliata per menu che non si vedono.
How to turn off a Navi+ menu or go back to your theme menu
Tornare alla navigazione predefinita non richiede di modificare il codice del tema, perché Navi+ funziona tramite un app embed.
Per disattivare un singolo menu mantenendo attiva l’app, apri la dashboard di Navi+. Ogni menu creato mostra uno stato On / Off. Impostare un menu su Off ne interrompe la visualizzazione nel negozio live, così il menu predefinito del tema può tornare visibile.
Se desideri disattivare completamente Navi+ su un tema, vai su Online Store > Themes > Customize, apri la scheda App embeds, disattiva Store Connector e clicca su Save. Se hai usato un tema duplicato, elimina la bozza senza pubblicarla.
Trade-offs: when you don’t need Navi+ yet
Sebbene le app per la navigazione offrano funzionalità evolute, installare un’app dedicata non è obbligatorio per ogni negozio Shopify:
In primo luogo, se hai un catalogo ristretto, la navigazione standard di Shopify—che supporta fino a due livelli di menu a discesa—abbinata al menu mobile del tema è spesso più che adeguata. Aggiungere un’applicazione esterna per pochi link genera una gestione superflua.
In secondo luogo, l’uso di blocchi incorporati richiede attenzione durante i cambi di tema. Quando pubblichi una nuova grafica, dovrai ricordarti di riattivare Store Connector nel nuovo tema.
In terzo luogo, sebbene l’assistente IA crei una comoda struttura iniziale, non fornisce un menu ultimato. Dovrai comunque dedicare del tempo a connettere le collezioni corrette, verificare le immagini e coordinare i colori.
Infine, attivare troppi menu contemporaneamente—come una Tab Bar, un cassetto laterale e pulsanti mobili insieme—può affollare lo schermo e disorientare i clienti se l’albero delle categorie non è stato chiarito prima.
Where Navi+ fits
Una volta che il primo menu è operativo e stabile sul tuo negozio, il passo successivo consiste solitamente nell’aggiungere un secondo tipo di menu per una funzione diversa. Ad esempio, molti commercianti combinano una Tab Bar fissa in basso per le azioni più rapide (ricerca, carrello e collezioni principali) con un Mobile Menu laterale per l’intero catalogo. Un pulsante Floating Button discreto può agevolare l’assistenza.
Tutti i menu aggiuntivi si creano dallo stesso pulsante Add menu nella dashboard. Inoltre, i menu Navi+ possono essere impiegati anche su siti esterni a Shopify senza scrivere codice. Per pianificare la navigazione su tutti i dispositivi, leggi la nostra guida su come creare un menu desktop e un menu mobile.
Se il tuo primo menu è attivo, il passo successivo è spesso un secondo menu per un altro compito — ad esempio un Mobile Menu per l’intero catalogo accanto alla Tab Bar. Puoi aggiungerlo dallo stesso pulsante Add menu. Se non l’hai ancora installata, inizia aggiungendo Navi+ Tab Bar & Mega Menu sullo Shopify App Store.
Action checklist
Segui questa sequenza pratica per impostare, pubblicare e controllare il tuo menu di navigazione su Shopify:
- Scegli il tipo di menu ideale per l’obiettivo commerciale prioritario
- Fai clic su Add menu all’interno della dashboard di Navi+
- Seleziona una modalità di avvio: modello, pagina vuota o bozza IA
- Assegna link di destinazione a prodotti, collezioni e pagine
- Limita la profondità delle categorie a un massimo di tre livelli
- Usa Test this menu nella scheda Publish per verificare lo stile
- Duplica il tema attivo per fare test sicuri se il negozio ha visite attive
- Attiva Store Connector in App embeds e clicca su Save
- Fai clic su Publish to website e seleziona il punto di inserimento
- Controlla la navigazione su veri smartphone e su schermi desktop
Installa Navi+ Tab Bar & Mega Menu sullo Shopify App Store per creare menu professionali senza toccare codice.
FAQ
Do I need to edit theme code to show a Navi+ menu?
No. Non è necessario modificare alcun codice Liquid o template del tema. Ti basta attivare il blocco incorporato Store Connector nell’editor del tema Shopify e pubblicare il menu dall’app. Come indicato nella documentazione, l’attivazione va eseguita una sola volta per sito web.
Can I use my existing Shopify menu with Navi+?
Sì. Navi+ può collegarsi ai tuoi menu Shopify esistenti. Dopo il collegamento, controlla ogni livello annidato per verificare che categorie e link appaiano come desideri.
Should I start from a template or with AI?
Partire da un modello è più rapido se apprezzi già una struttura specifica. L’IA sviluppa un’ossatura logica partendo dalla tua descrizione testuale, ma richiederà comunque l’inserimento manuale di collegamenti, foto e stili cromatici.
How many levels can a Navi+ menu have?
Con il pacchetto Business, puoi organizzare la navigazione fino a tre livelli di profondità. A confronto, il menu nativo di Shopify permette a una voce principale di avere fino a due livelli di menu a discesa.
How do I turn a Navi+ menu off?
Puoi disattivare qualsiasi menu impostando il suo stato su Off nel pannello di Navi+. Per spegnere tutti i menu su un tema, disattiva Store Connector nei blocchi incorporati dell’editor del tema e salva.
Why is my Navi+ menu not showing?
La causa più frequente è che Store Connector è stato attivato su un tema di prova non pubblicato oppure le modifiche non sono state salvate. In caso di cambio di tema, riattiva il blocco nel nuovo tema.
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.