Quando i commercianti cercano un’app per creare menu, trovano spesso guide per menu di ristoranti anziché per la navigazione e-commerce—questo articolo si concentra esclusivamente sulla progettazione e sul lancio di menu di navigazione per negozi online Shopify. Configurare un’applicazione dedicata per la prima volta su uno store attivo può intimorire, ma imparare a usarla non richiede alcuna competenza di programmazione.
Disegna le categorie su carta, fai pratica su un tema duplicato, concentrati su un solo tipo di menu alla volta e controlla la reattività al tocco su un vero smartphone prima di pubblicare.
- Esercitati su un tema duplicato: Una copia di backup protegge le tue vendite mentre impari a configurare il menu.
- Padroneggia un formato alla volta: Inizia con un solo tipo—come una barra inferiore o un cassetto laterale—prima di creare menu complessi.
- Attiva l'app embed: Devi attivare l'app embed nell'editor del tema affinché il menu possa essere mostrato.
Quick answer: how to get started with a Shopify menu builder app
Per iniziare a usare un’app per menu Shopify, disegna prima la struttura su carta, scegli un tipo di menu da imparare, attiva l’app embed nell’editor del tema, crea pochi elementi, controlla l’anteprima su smartphone, quindi pubblica e verifica ogni singolo link:
- Step 1: Sketch your menu structure: Definisci le collezioni su carta e organizza i link predefiniti in Content > Menus.
- Step 2: Pick one menu type to learn first: Scegli una Tab Bar, un Mobile Drawer o un Mega Menu in base alle abitudini dei clienti.
- Step 3: Install the app and turn on the app embed: Installa l’app, attiva l’interruttore app embed nell’editor del tema e salva.
- Step 4: Build your first menu: Crea 4–5 collegamenti principali con testi chiari, icone e link funzionanti.
- Step 5: Match your brand: Uniforma colori di sfondo, font e posizionamento con il tuo tema attivo.
- Step 6: Preview on a phone and a desktop: Prova i tocchi su un tema duplicato utilizzando uno smartphone reale.
- Step 7: Publish, check every link, and fix common problems: Pubblica dall’app e collauda i link nello store online.
Se hai solo un’ora a disposizione, completa i passaggi 1–3 e il passaggio 6 su un tema duplicato.
Four terms to learn before you start
Prima di aprire i pannelli di impostazione, familiarizza con questi cinque termini tecnici:
| Termine | Significato | Dove si trova |
|---|---|---|
| Menu | Una lista ordinata di collegamenti per mostrare e organizzare percorsi verso prodotti, collezioni, pagine e blog (Shopify Help Center). | Nel pannello Shopify sotto Content > Menus, oltre che nell’header, footer o drawer. |
| Elemento di menu / link | Un elemento cliccabile che reindirizza a una pagina specifica, collezione, URL esterno o ancora vuota (#). |
Pulsanti, collegamenti testuali o schede con icona. |
| Livello (Level) | La profondità gerarchica della navigazione. Nei menu nativi di Shopify, un elemento principale supporta fino a due livelli di menu a discesa annidati sotto di esso (Shopify Help Center). | Menu a tendina, colonne di mega menu e menu a soffietto su mobile. |
| App embed | Un elemento fornito dall’app che si sovrappone o galleggia nel tema senza modificare permanentemente il codice Liquid di base (Shopify Help Center). | Nella barra laterale dell’editor del tema Shopify, sotto la scheda App embeds. |
| Pubblica (Publish) | L’azione che rende visibile il nuovo menu ai visitatori. L’attivazione dell’app embed carica lo script, ma alcune app, tra cui Navi+, richiedono anche di fare clic su pubblica nel loro pannello interno. | Nella dashboard dell’app o nelle impostazioni di salvataggio del tema. |
Step 1: Sketch your menu structure before you open the app
Non aprire l’app per menu senza avere prima un piano chiaro. Disporre i rami del catalogo direttamente nel software causa disordine e indecisione. Prepara i contenuti su carta prima di tutto.
Elenca le destinazioni essenziali per i visitatori: collezioni in evidenza, linee di punta, pagine informative (Chi siamo, Spedizioni, Contatti) e il blog (Shopify Help Center). Disegna la struttura del menu (sketch your menu structure) come un diagramma ad albero a 2 o 3 livelli. Individua 4–5 categorie primarie e colloca le sottocollezioni sotto di esse.
Poi apri l’amministrazione Shopify e vai su Content > Menus (Shopify Help Center). Pulisci i menu standard, cancella i link obsoleti e verifica gli indirizzi delle collezioni. Se un elemento principale serve solo a raggruppare voci secondarie e non deve aprire una pagina specifica, inserisci # nel campo del link (Shopify Help Center).
Mantieni una struttura ordinata: secondo le regole di Shopify, una voce principale può avere fino a due livelli di menu a discesa annidati sotto di essa (Shopify Help Center). Sistemare i link su Shopify Admin velocizzerà l’importazione o il collegamento nell’app.
Shopify’s own video shows how to nest menu items:
Step 2: Pick one menu type to learn first
Le app di navigazione offrono molti formati: barre inferiori, mega menu, cassetti laterali e pulsanti galleggianti. Provare a configurare tutto insieme nella prima sessione genera confusione. Scegli un solo tipo di menu con cui iniziare (pick one menu type) in base al dispositivo più usato dai tuoi acquirenti.
Figura 1: Illustrazione concettuale (Concept illustration) — Step 2: Pick one menu type to learn first
Mobile shoppers first
Se la maggior parte dei tuoi visitatori naviga da smartphone, conta soprattutto un menu facile da trovare e da toccare su mobile (vedi la citazione del Nielsen Norman Group più sotto). Per negozi orientati al mobile, vale la pena imparare prima due formati:
- Tab Bar: Una barra di navigazione fissa ancorata sul bordo inferiore dello smartphone. Mantiene le destinazioni chiave (Home, Catalogo, Cerca, Carrello) visibili in un’unica barra permanente.
- Mobile Drawer: Un pannello laterale a scomparsa che scivola con fluidità al tocco, ospitando alberi di categorie a più livelli e i link dell’account utente.
Desktop shoppers first
Se gestisci un catalogo ampio con decine di sottocategorie e le conversioni avvengono prevalentemente su computer, punta su:
- Mega Menu: Un ampio pannello a discesa che mostra simultaneamente diverse colonne di categorie e riquadri grafici promozionali.
| Tipo di menu | Ideale quando | Imparalo per primo se |
|---|---|---|
| Tab Bar | Alto traffico da smartphone e un insieme chiaro di 4–5 azioni quotidiane (Home, Negozio, Cerca, Carrello). | Mobile shoppers first: la maggioranza degli ordini proviene da dispositivi mobili. |
| Mobile Drawer | Catalogo articolato con più sottolivelli che necessita di navigazione laterale ordinata. | Mobile shoppers first: desideri sostituire il menu laterale standard del tema. |
| Mega Menu | Ampio catalogo su desktop dove gli utenti hanno bisogno di una panoramica immediata dei reparti. | Desktop shoppers first: i computer desktop rappresentano la quota principale delle vendite. |
La reperibilità delle categorie si fonda su segnali visivi evidenti. Come evidenziato dal Nielsen Norman Group: “visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group).
Approfondisci la nostra guida su how to choose the right menu type in base alle dimensioni del catalogo, e scopri come i merchant sfruttano tab bars and hybrid mobile navigation. Concentrati su un unico formato per oggi.
Step 3: Install the app and turn on the app embed
Installa l’app scelta dal Shopify App Store. Una volta installata, l’applicazione comparirà in Shopify Admin alla voce Apps, ma non mostrerà ancora nulla nel tuo negozio online.
Le applicazioni moderne per Shopify si basano sugli app embed. Come illustrato da Shopify, gli app embed sono elementi forniti dalle app che galleggiano o si visualizzano in sovrapposizione nel tema (Shopify Help Center), senza toccare il codice Liquid dei template.
Per attivare l’app embed (turn on the app embed):
- In Shopify Admin, accedi a Online Store > Themes.
- Trova il tema su cui lavorare—preferibilmente una copia duplicata (vedi Passo 6)—e fai clic su Customize.
- Nella barra laterale sinistra, clicca sull’icona App embeds (Shopify Help Center).
- Individua la tua app per menu e sposta l’interruttore su Attivo (On).
- Fai clic su Salva (Save) in alto a destra.
- Apri l’anteprima del negozio per visualizzare l’app dal vivo (Shopify Help Center).
La documentazione Shopify conferma che gli app embed possono essere impiegati con qualsiasi versione del tema (Shopify Help Center). Ciò non assicura automaticamente che ogni app si adatti perfettamente a qualunque stile senza piccole modifiche. Tieni a mente questa regola fondamentale: se in futuro cambi il tema attivo, dovrai riattivare le app nel nuovo tema (Shopify Help Center).
Per ulteriori dettagli tecnici, leggi il nostro approfondimento su how app embeds work with your theme.
Step 4: Build your first menu: items, links, and icons
Accedi al pannello dell’app da Shopify Admin per iniziare a comporre il menu. Mantieni la struttura iniziale compatta: inserisci 4 o 5 elementi di primo livello basandoti sulla bozza del Passo 1.
Linee guida consigliate:
- Etichette chiare: Scegli nomi comprensibili come “Novità”, “Collezioni”, “I più venduti” e “Aiuto”.
- Collega destinazioni reali: Associa ogni voce a una collezione o pagina pubblicata ed esistente. Non collegare categorie vuote.
- Icone intuitive: Se crei una Tab Bar mobile, abbina ogni etichetta a un’icona riconoscibile (casa per Home, lente per Cerca, borsa per Carrello) mantenendo il testo visibile.
- Aggiungi sottolivelli con cautela: Solo quando i link principali sono corretti, inserisci voci secondarie. Ricorda la regola di Shopify: fino a due livelli di menu a discesa annidati (Shopify Help Center).
- Collega i menu Shopify esistenti: Molte app consentono di collegare i menu di Content > Menus. Se la tua app lo supporta, usalo invece di riscrivere tutto a mano.
Nota: Questo tutorial illustra la configurazione del primo menu funzionale. L’impostazione di mega menu avanzati a più colonne con immagini promozionali è trattata in guide dedicate.
Step 5: Match your brand: colors, fonts, and position
Un menu privo di personalizzazione grafica stona con il resto del negozio e riduce la fiducia dei clienti. Modifica lo stile per fondere il nuovo menu con l’identità del tuo store.
Controlla tre elementi principali:
- Colori: Apri le impostazioni del tema attivo e copia i codici esadecimali di sfondo, intestazione e testi. Applica questi valori allo sfondo del menu, ai bordi, allo stato attivo e alle icone. Assicurati che vi sia sufficiente contrasto per la lettura mobile alla luce del sole.
- Tipografia e dimensioni: Adotta lo stesso carattere del corpo del testo del tema. Su smartphone, mantieni dimensioni leggibili e facili da toccare.
- Posizione: Blocca la Tab Bar lungo il bordo inferiore; imposta il Mobile Drawer per aprirsi dal lato sinistro; allinea il Mega Menu esattamente sotto l’header principale.
Verifica che il menu non si sovrapponga a componenti nativi fondamentali, come il pulsante fisso “Aggiungi al carrello” o la chat di supporto.
Leggi la nostra guida su come make navigation feel like your store per indicazioni visive approfondite.
Step 6: Preview on a phone and a desktop before you publish
Non pubblicare mai un nuovo menu direttamente sul negozio online senza averlo verificato. Segui queste tre regole di collaudo:
Figura 2: Illustrazione concettuale (Concept illustration) — Step 6: Preview on a phone and a desktop before you publish
- Duplicate theme first: Shopify raccomanda che prima di modificare il negozio sia opportuno “make a backup copy so that you can discard your changes and start again if you need to” (Shopify Help Center). Da Online Store > Themes, seleziona Actions > Duplicate. Attiva l’app embed e crea il menu su questa copia non pubblicata, in modo che i clienti non vedano modifiche a metà.
- Tap every item: Non accontentarti del simulatore su schermo desktop. Preview on a phone: apri il link di anteprima su un vero smartphone. Tieni il dispositivo con una mano e tocca ogni collegamento, scheda e tendina per verificare la risposta tattile.
- Check the theme menu: Controlla come il nuovo menu convive con l’header del tema. Poiché la posizione dei menu varia a seconda del tema (Shopify Help Center), verifica se il menu nativo è ancora visibile ed eventualmente nascondilo per evitare duplicati.
Controlla poi l’anteprima anche su uno schermo desktop per assicurarti del corretto allineamento orizzontale.
Step 7: Publish, check every link, and fix common problems
Una volta completati i controlli, sei pronto per pubblicare. In alcune app per menu, tra cui Navi+, l’attivazione dell’app embed carica solo il codice; per mostrare il menu sul sito devi cliccare sul tasto di pubblicazione all’interno della dashboard dell’app (Navi+ Help Center).
Check every link: Dopo la pubblicazione, apri una finestra in incognito e testa ogni singolo collegamento sul tuo negozio online. Se riscontri problemi, consulta questa tabella:
| Sintomo | Causa probabile | Soluzione |
|---|---|---|
| Il menu non compare sullo store | L’app embed è spento o non è stato salvato (Shopify Help Center), oppure non è stato cliccato il tasto di pubblicazione nell’app (Navi+ Help Center). | Entra in Theme Editor > App embeds, attiva l’interruttore, premi Save e poi pubblica dalla dashboard dell’app. |
| Menu scomparso dopo aver cambiato tema | L’app embed non è stato attivato nel nuovo tema pubblicato (Shopify Help Center). | Vai su Online Store > Themes > Customize nel tema attivo, apri App embeds, riattiva l’app e salva. |
| Due menu visibili contemporaneamente | Il menu nativo dell’header del tema è rimasto attivo accanto a quello dell’app (Shopify Help Center). | Nella sezione header dell’editor del tema, nascondi il menu predefinito o posiziona l’app altrove (come una Tab Bar in basso). |
Se persistono problemi insoliti, consulta la documentazione ufficiale dell’app o contatta il supporto tecnico.
Trade-offs: when you don’t need a menu builder app yet
Un’analisi accurata richiede obiettività: un’app per menu non è indispensabile per qualunque negozio Shopify. Riconoscere quando gli strumenti nativi sono sufficienti fa risparmiare tempo ed energie.
Se gestisci un catalogo ridotto—come un brand mono-prodotto o con poche referenze—la navigazione integrata in Content > Menus è spesso sufficiente (Shopify Help Center). I menu standard di Shopify consentono fino a due livelli di menu a discesa annidati (Shopify Help Center), offrendo una soluzione snella senza app esterne.
L’installazione di un’app comporta impegni reali: un pannello di gestione in più, una curva di apprendimento e la necessità di riattivare l’app embed ogni volta che si cambia tema (Shopify Help Center).
Tuttavia, quando il catalogo cresce e avverti limiti concreti—come la necessità di una barra fissa inferiore per mobile, un cassetto laterale flessibile o un mega menu con immagini non supportato dal tema—l’adozione di un’app dedicata rappresenta un salto di qualità opportuno.
Leggi il nostro dossier su Shopify theme menu limitations per verificare se il tuo catalogo ha superato i confini del tema.
What to learn next: Icon Menu, Floating Button, and seasonal menus
Una volta che il tuo primo menu è attivo e stabile, puoi valutare formati supplementari:
- Icon Menu: Una fila di icone circolari per collezioni in homepage per facilitare la scansione visiva dei reparti.
- Floating Button (FAB): Un pulsante rotondo galleggiante nell’angolo inferiore per offrire un accesso rapido all’assistenza o al tracciamento ordini.
- Menu stagionali: Riorganizzazione temporanea delle voci durante il Black Friday o i periodi festivi, ponendo in cima le selezioni regalo.
Approfondisci when an icon menu beats a text list per la scoperta visiva, e valuta le interazioni tramite le 5 metrics worth tracking dopo la pubblicazione.
Where Navi+ fits
Se stai cercando un’applicazione per applicare tutti i passaggi di questa guida all’interno di un flusso intuitivo, valuta Navi+ Tab Bar & Mega Menu.
Navi+ è sviluppata per i merchant Shopify che vogliono creare barre inferiori fisse, mega menu, cassetti mobili laterali, menu a icone e pulsanti galleggianti con un editor drag-and-drop (Shopify App Store). Consente di collegare direttamente i menu Shopify esistenti, utilizzare layout predefiniti e accelerare la configurazione con il supporto dell’IA (Shopify App Store).
Navi+ offre un piano gratuito per consentire di costruire e testare senza costi di partenza (Shopify App Store). Il processo di pubblicazione segue un flusso lineare: attiva l’app embed “Store Connector” nell’editor del tema, imposta il menu e fai clic su “Publish to website” nella dashboard di Navi+ (Navi+ Help Center).
La documentazione di supporto di Navi+ suggerisce espressamente: “The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center). Questo ti consente di affinare i tocchi su smartphone prima che i clienti vedano le modifiche.
Action checklist: your first-session plan
Segui questa lista di controllo per la tua prima sessione:
- Sketch your menu structure: Disegna su carta 4–5 categorie e sottocollezioni chiave.
- Tidy Content > Menus: Elimina link obsoleti e bozze in Shopify Admin (Shopify Help Center).
- Duplicate theme first: Crea una copia del tema attivo per fare prove sicure (Shopify Help Center).
- Pick one menu type: Scegli un formato: Tab Bar, Mobile Drawer o Mega Menu.
- Turn on the app embed: Attiva l’app embed nell’editor del tema e salva (Shopify Help Center).
- Build 4–5 core items: Imposta etichette immediate, icone chiare e link validi.
- Match colors/fonts: Allinea colori e caratteri all’identità grafica del tema.
- Tap every item on a phone: Apri l’anteprima su uno smartphone reale e tocca ogni tasto.
- Publish and check every link: Pubblica dall’app e collauda i link sullo store live (Navi+ Help Center).
- Re-check after theme changes: Riattiva l’app embed in caso di futuri cambi di tema (Shopify Help Center).
Se vuoi esercitarti su questi passaggi in un’unica app, Navi+ Tab Bar & Mega Menu offre un piano gratuito, template già pronti e può collegare i tuoi menu Shopify esistenti: inizia su un tema duplicato e pubblica quando sei soddisfatto.
FAQ
Quale tipo di menu dovrei creare per primo?
Inizia con il formato che serve il canale principale dei tuoi acquirenti: scegli una Tab Bar o un Mobile Drawer se acquistano da smartphone, o un Mega Menu se hai molte categorie su desktop.
Devo modificare prima i menu di Shopify?
Organizzare prima le voci in Content > Menus è raccomandato per pulire i link primari (Shopify Help Center); app come Navi+ possono collegarsi direttamente a tali menu (Shopify App Store).
Come si attiva un app embed su Shopify?
Nell’editor del tema Shopify, clicca sull’icona App embeds a sinistra, sposta l’interruttore dell’app su On e clicca su Salva (Shopify Help Center).
Perché l’app per menu non compare sullo store?
Le cause tipiche sono l’app embed non attivato o non salvato nell’editor (Shopify Help Center), l’embed non riattivato dopo un cambio di tema (Shopify Help Center), o la mancata pubblicazione nella dashboard dell’app (Navi+ Help Center).
Posso fare prove senza che i clienti le vedano?
Sì. Duplica il tema attivo in Shopify, attiva l’app embed su tale copia e collauda privatamente su smartphone prima di pubblicare sul tema attivo (Shopify Help Center; Navi+ Help Center).
Quanti livelli può avere un menu a discesa Shopify?
Nei menu nativi di Shopify, un elemento principale può ospitare fino a due livelli di menu a discesa annidati sotto di esso (Shopify Help Center).
Sources
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Menus and links
- Shopify Help Center: App embeds and theme extensions
- Shopify Help Center: Duplicating themes
- Nielsen Norman Group: Mobile Navigation Discoverability
- Navi+ Help Center: Publishing on Shopify
- Shopify App Store: Navi+ Tab Bar & Mega Menu
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.