Come creare un menu desktop e un menu mobile su Shopify (Passo dopo passo)

Quando si progetta una boutique su Shopify, l’intestazione desktop viene spesso concepita per mostrare l’intero catalogo: collezioni, pagine istituzionali e menu a tendina multilivello. Tuttavia, visualizzata su uno smartphone, quella complessa alberatura si traduce in un cassetto laterale sovraffollato che costringe gli utenti a uno scorrimento estenuante.

I commercianti cercano spesso un’impostazione nel pannello di controllo di Shopify per assegnare un menu ai computer e uno più compatto ai telefoni. Purtroppo, molti temi non offrono una gestione separata nativa. Sebbene Shopify permetta di creare più di un menu in Contenuto > Menu, è il tema a stabilire dove compaiono — e la maggior parte dei temi assegna esattamente lo stesso menu a computer e smartphone.

Per separarli, puoi scegliere tra mantenere un unico menu ottimizzato, modificare il codice del drawer del tema o installare un’app di navigazione. Questa guida illustra ciascun metodo passo dopo passo.

Risposta rapida: Shopify può mostrare un menu diverso su mobile?

Non con la maggior parte dei temi così come sono. Crei i menu in Contenuto > Menu, ma è il tema a decidere dove vengono mostrati, e temi come Dawn usano lo stesso menu per l’header desktop e per il drawer mobile. Per separarli, modifica il codice del drawer o usa un’app di menu.

Esistono tre soluzioni principali:

• Opzione 1: Mantenere un solo menu e affidarsi al drawer del tema. Gestisci un’unica lista ordinata in Contenuto > Menu senza modificare codice.
• Opzione 2: Assegnare un menu mobile separato modificando il codice. Duplica il tema e adatta snippets/header-drawer.liquid (in Dawn) per puntare all’handle del menu mobile.
• Opzione 3: Utilizzare un’app di navigazione. Configura un mega menu per computer e un drawer o barra inferiore per smartphone, gestendo la visibilità con interruttori dedicati.

Consulta la tabella comparativa nella sezione Compromessi per determinare la scelta più adatta alla tua attività.

Come funzionano i menu Shopify su desktop e mobile

Concept illustration: un unico menu principale Shopify alimenta sia l’header desktop che il drawer mobile.

In Shopify, le voci di navigazione sono gestite in Contenuto > Menu. Tuttavia, come specificato nella documentazione del Centro assistenza Shopify sui menu a discesa, la collocazione visiva dipende interamente dal tema in uso.

Nel tema predefinito Dawn, la sezione Header include un’unica impostazione di menu di tipo link_list (predefinita su main-menu). Su schermi desktop, questo menu si sviluppa orizzontalmente, aprendo le sottocategorie in un Header dropdown.

Su schermi smartphone, un pulsante hamburger apre il Mobile drawer. Nel codice sorgente di Dawn, il file che genera questo cassetto è snippets/header-drawer.liquid. Il ciclo Liquid principale recita:

{%- for link in section.settings.menu.links -%}

Poiché il cassetto legge proprio section.settings.menu.links — la stessa opzione usata per l’header desktop —, ogni modifica al tuo Main menu nel pannello di controllo aggiorna contemporaneamente entrambi i dispositivi.

Alcuni temi potrebbero mettere a disposizione una casella per il menu mobile nelle impostazioni dell’header. Controlla prima il tuo editor del tema; se tale opzione manca, procedi con uno dei metodi seguenti.

Passo 1: Creare i menu desktop e mobile in Contenuto > Menu

Sia che tu decida di modificare il codice, sia che scelga un’app, il primo passaggio consiste nel costruire entrambe le liste in Shopify.

Lavora sempre all’interno di Contenuto > Menu.

Creare il menu desktop (menu principale con dropdown)

1. Nel pannello di amministrazione Shopify, accedi a Contenuto > Menu.
2. Clicca su Menu principale (Main menu) oppure premi Aggiungi menu.
3. Clicca su Aggiungi voce di menu per inserire le sezioni primarie (Prodotti, Collezioni, Chi siamo).
4. Trascina le voci secondarie sotto una voce principale per nidificarle. Secondo la guida ufficiale Shopify sui menu a discesa, una voce principale può avere fino a due livelli di menu a discesa nidificati (tre livelli totali).

Creare un menu mobile più sintetico

1. In Contenuto > Menu, clicca nuovamente su Aggiungi menu.
2. Assegna un nome chiaro, ad esempio Mobile menu.
3. Prendi nota dell’identificatore (handle, ad esempio mobile-menu). L’opzione 2 richiede esattamente questo testo.
4. Inserisci solo le destinazioni indispensabili: collezioni principali, barra di ricerca, tracciamento ordini e assistenza. Riduci i livelli di nidificazione.
5. Clicca su Salva menu.

[!NOTE] La creazione di un Separate mobile menu in Contenuto > Menu salva solo i dati nel database. Non apparirà sul sito finché il tema, il codice Liquid o una Menu app non lo richiameranno.

Opzione 1: Usare un solo menu e lasciare che il drawer gestisca la vista mobile

Per i negozi con cataloghi essenziali, la via più lineare è mantenere un unico Main menu e lasciare che il Mobile drawer nativo del tema si occupi di compattarlo su mobile.

In questo caso, progetti la struttura principale con rigore. Su smartphone, il tema raggruppa in automatico le voci nel cassetto scorrevole.

• Vantaggi: Nessuna riga di codice, nessun costo per app aggiuntive e manutenzione agevole. Aggiornare un menu modifica contemporaneamente tutti i dispositivi.
• Svantaggi: Desktop e mobile restano speculari. Un mega menu ricco per computer si traduce in un cassetto mobile lunghissimo che richiede troppo scrolling.

Verifica nell’editor del tema se esistono parametri per regolare il drawer. Per ulteriori suggerimenti, consulta la nostra guida sulle mobile drawer menu best practices.

Opzione 2: Assegnare un menu mobile separato modificando il codice del tema

Se vuoi un menu mobile dedicato senza ricorrere ad app esterne, puoi intervenire sui file Liquid del tema affinché il drawer richiami direttamente il secondo menu.

Duplica sempre il tema prima di iniziare

Come raccomanda il Centro assistenza Shopify per la gestione dei temi, crea sempre una copia di backup per poter ripristinare la versione iniziale in caso di necessità.

1. Vai su Negozio online > Temi.
2. Clicca sui tre puntini (...) accanto al tema pubblicato e scegli Duplica.
3. Lavora esclusivamente sulla copia duplicata non pubblicata.

Indirizza il drawer verso il tuo menu mobile

1. Sulla copia del tema, clicca sui tre puntini (...) e seleziona Modifica codice.
2. Nel tema Dawn, apri snippets/header-drawer.liquid.
3. Individua il ciclo principale:

{%- for link in section.settings.menu.links -%}

1. Come spiegato nella documentazione Liquid Shopify per l’oggetto linklists, puoi accedere a qualsiasi menu tramite il relativo handle nell’oggetto linklists. Sostituisci quella riga con:

{%- for link in linklists['mobile-menu'].links -%}

(Sostituisci 'mobile-menu' con l’handle esatto creato al Passo 1).

Una soluzione analoga è stata illustrata nella community Shopify per il tema Ride.

[!WARNING] Il nome del file sopra è un esempio per Dawn; altri temi usano un file diverso, cerca un ciclo simile che legga section.settings.menu. Modifica solo il ciclo più esterno; i cicli interni devono restare invariati per preservare i sottomenu. Il codice Liquid personalizzato potrebbe dover essere riapplicato dopo un aggiornamento del tema.

Testa con cura la copia del tema su desktop e mobile prima di pubblicarla.

Opzione 3: Usare un’app di menu per separare desktop e mobile

Se preferisci un controllo grafico senza toccare file di codice, una Menu app specializzata rappresenta una soluzione ideale.

Le app di navigazione consentono di comporre layout differenti per ciascun formato: un mega menu a più colonne per computer e un cassetto scorrevole o una barra inferiore fissa per smartphone.

Nella scelta di un’app, prendi in esame questi fattori:

• Selettori di visibilità per dispositivo: Opzioni per attivare i menu esclusivamente su Mobile, Desktop o entrambi.
• Anteprima mobile integrata: Simulatore per testare la risposta touch direttamente nell’editor.
• Modalità di installazione: Verifica se l’app si aggiunge tramite un Theme App Embed o se ti chiede di modificare i file del tema.
• Compatibilità con il tema: Perfetta integrazione visiva con l’header già presente.

Per comprendere quale modello si adatti meglio ai tuoi articoli, leggi la nostra guida su come choose the right menu type for each screen.

Regole di design per un menu mobile

Concept illustration: alberature eccessivamente nidificate a confronto con un menu mobile compatto e aree touch generose.

Nel definire i collegamenti per smartphone, applica questi criteri di ergonomia:

• Fewer items (Meno voci): Lo spazio verticale su telefono è limitato. Dai precedenza a collezioni principali, novità, ricerca e supporto. Sposta le pagine accessorie (lavora con noi, stampa) nel footer.
• Larger tap targets (Aree touch più grandi): Le dita non hanno la mira del cursore del mouse. In base allo standard WCAG 2.2 Criterio 2.5.8 (Dimensioni minime del target), i bersagli touch devono misurare almeno 24×24 pixel CSS (con alcune eccezioni). Spaziature adeguate scongiurano tocchi involontari.
• Shallow nesting (Nidificazione superficiale): Le fisarmoniche molto nidificate sono più difficili da usare su uno schermo piccolo. Scegli un Shallow nesting: elenchi lineari o al massimo un livello di sottomenu.
• Oltre l’icona hamburger: Le ricerche di Nielsen Norman Group dimostrano che il pulsante hamburger non viene notato tempestivamente da tutti gli utenti. Integrare il drawer con elementi visibili, come una barra inferiore, garantisce l’accesso immediato alle sezioni chiave.

Approfondisci i modelli ibridi nel nostro articolo sulla mobile navigation beyond the hamburger menu.

Testare prima di pubblicare

Come consiglia il Centro assistenza Shopify, prova sempre i menu sui telefoni reali per assicurarti che le tendine si espandano nel modo previsto.

Checklist di verifica consigliata:

1. Anteprima nell’editor del tema: Alterna le modalità Desktop e Mobile per verificare la corretta resa di base.
2. Test su smartphone effettivo: Apri il link di anteprima su Safari e Chrome dal tuo telefono.
3. Meccanismo del drawer: Verifica che il cassetto si apra e si chiuda fluidamente.
4. Apertura delle sottovoci: Tocca ogni tendina per accertarti che il testo non venga tagliato.
5. Controllo dei link: Controlla che nessun collegamento rimandi a pagine vuote o errori 404.
6. Orientamento orizzontale: Ruota lo smartphone in orizzontale per verificare che il tasto di chiusura non venga nascosto.
7. Navigazione multi-template: Prova il menu dalla homepage, da una collezione e da una scheda prodotto.

Problemi comuni e soluzioni

• Sul telefono compare ancora il vecchio menu: Potresti visualizzare il tema attivo mentre le modifiche sono state apportate a una copia non pubblicata. Verifica anche che l’handle inserito in linklists['mobile-menu'].links coincida alla perfezione con quello in Contenuto > Menu.
• Il nuovo menu non viene visualizzato: Creare un menu in Contenuto > Menu salva soltanto la configurazione. Diventa visibile solo dopo essere stato agganciato all’header, richiamato nel codice o abilitato in un’app.
• Eliminare una voce genitore ha cancellato tutte le sottovoci: Nelle regole di modifica menu di Shopify, rimuovendo una voce con elementi nidificati si cancellano anche questi ultimi. Trascina le voci figlie fuori prima di eliminare la voce superiore.
• I menu a tendina non si aprono su mobile: Verifica la profondità dell’alberatura. Shopify ammette al massimo due livelli nidificati sotto la voce principale; mantieni il menu mobile entro questo limite e provalo nel drawer del tuo tema.
• I sottomenu del cassetto sono spariti dopo la modifica: Assicurati di aver sostituito esclusivamente il ciclo più esterno for link in section.settings.menu.links. Modificare i cicli interni (for childlink in link.links) impedisce la generazione delle sottocategorie.

Compromessi: quando non separare i menu

Quando non separare i menu

Separare la navigazione non è sempre la scelta opportuna:

• Cataloghi ridotti: Un catalogo piccolo e semplice funziona egregiamente con un unico menu ben congegnato.
• Risorse di manutenzione limitate: Gestire due menu raddoppia le incombenze: ogni novità va inserita sia nel menu desktop che in quello mobile. Le dimenticanze lasciano gli utenti mobile disinformati.
• Aggiornamenti frequenti del tema senza supporto tecnico: Le modifiche Liquid potrebbero dover essere riapplicate dopo un aggiornamento del tema.

Se una struttura unitaria risponde con efficacia a tutte le esigenze, mantenere un solo menu garantisce stabilità e azzera gli oneri gestionali.

Il ruolo di Navi+

Se preferisci non modificare il codice del tema, Navi+ ti permette di creare un mega menu desktop e un menu mobile o una tab bar separati, scegliendo su quale dispositivo compare ciascuno. Puoi provarlo con il piano gratuito lasciando il tema intatto.

Navi+ ti permette di costruire barre inferiori fisse, mega menu desktop a più colonne, drawer mobile e pulsanti fluttuanti tramite un editor drag-and-drop senza programmare.

Nella scheda Publish di ciascun menu, Navi+ include selettori di visibilità dedicati:

• Interruttore Mobile: Attiva il menu sui dispositivi smartphone.
• Interruttore Desktop: Attiva il menu sugli schermi computer.

In fase di creazione di un menu mobile, l’opzione Mobile è l’unica attiva per impostazione predefinita. Puoi mantenere questo assetto per il tuo cassetto touch e configurare un secondo menu abilitando solo l’opzione Desktop per i computer. Entrambi operano in modo autonomo e supportano fino a tre livelli di nidificazione.

Per massimizzare la comodità su schermi touch, puoi abbinare il cassetto laterale a una bottom tab bar for Shopify, lasciando ricerca, carrello e sezioni primarie a portata diretta di pollice.

Checklist operativa

• Valuta il catalogo: Stabilisci se occorrono due menu separati o se basta snellire la struttura attuale.
• Crea il menu desktop: In Contenuto > Menu, imposta il menu principale con categorie e dropdown.
• Crea il menu mobile: In Contenuto > Menu, crea un elenco più breve e annota il relativo handle.
• Ispeziona l’header del tema: Controlla se il tema offre già un selettore nativo per il menu mobile.
• Seleziona la strategia: Scegli tra l’Opzione 1 (menu unico), l’Opzione 2 (codice) o l’Opzione 3 (app).
• Duplica il tema prima di intervenire: Per l’Opzione 2, duplica il tema e modifica snippets/header-drawer.liquid sulla copia.
• Configura la visibilità nell’app: Con un’app, assegna il mega menu al Desktop e il cassetto al Mobile.
• Verifica su un telefono vero: Testa l’apertura del drawer, le sottovoci, i pulsanti e la vista orizzontale.
• Mantieni allineate le liste: Aggiorna entrambi i menu in Contenuto > Menu ogni volta che il catalogo si arricchisce.

Domande frequenti (FAQ)

Posso mostrare un menu diverso su mobile rispetto a desktop?

Sì, ma gran parte dei temi Shopify mostra lo stesso menu per impostazione predefinita. Per diversificare i link, occorre modificare il codice del drawer o affidarsi a un’app di navigazione.

Perché il mio menu mobile mostra gli stessi link del menu desktop?

Nei temi come Dawn, il template del cassetto mobile ripete la medesima voce di menu selezionata nell’header (section.settings.menu.links). Qualsiasi modifica nel pannello si riflette su entrambi i dispositivi.

Devo modificare il codice del tema per usare due menu?

No, puoi avvalerti di un’app di menu per impostare menu differenti senza toccare il codice. Se scegli di programmare, crea sempre prima una copia del tema.

Dove creo i menu in Shopify?

Tutti i menu della boutique online si creano e si amministrano in Contenuto > Menu nel pannello Shopify.

Quanti livelli può avere un menu a discesa di Shopify?

Una voce di livello principale può includere fino a due livelli di menu a tendina nidificati, consentendo un massimo di tre livelli di navigazione complessivi.

Cosa succede se elimino una voce di menu principale?

Quando elimini una voce principale che include elementi nidificati sottostanti, anche questi ultimi vengono cancellati. Trascina le voci secondarie fuori prima di cancellare la voce superiore.

Fonti

• Shopify Help Center: Editing Menus — Gestione della navigazione in Contenuto > Menu e regole di cancellazione delle voci nidificate.
• Shopify Help Center: Drop-down Menus — Linee guida sul limite di due livelli di nidificazione e collaudi mobile.
• Shopify Help Center: Duplicating Themes — Procedure raccomandate per la duplicazione cautelativa dei temi prima delle modifiche.
• Shopify Developer Documentation: Liquid linklists Object — Riferimento dell’API Liquid per puntare a specifici menu tramite handle.
• Shopify Dawn Repository: sections/header.liquid — Codice sorgente Dawn che documenta l’impostazione link_list nell’header.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Codice Dawn che illustra il ciclo del drawer su section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Guida della community per riprogrammare header-drawer.liquid nel tema Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Discussione nella community sull’esigenza diffusa di menu distinti.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Analisi sui menu condivisi di default e sulle modalità di personalizzazione mobile.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Requisito 2.5.8 che impone target touch di almeno 24×24 pixel CSS.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Studio sull’intuitività dell’icona hamburger e sui menu ibridi.
• Navi+ Help Center: Display Rules Settings — Istruzioni per la configurazione delle regole di visualizzazione Mobile e Desktop.
• Shopify App Store: Navi+ Navigation & Menu Bar — Informazioni sull’app per creare mega menu, drawer e barre inferiori.