Dedichi ore a organizzare collezioni e nidificare collegamenti nel pannello di controllo di Shopify. Su uno schermo desktop spazioso, le tue categorie si dispiegano chiaramente all’interno di un ampio mega menu. Ma quando impugni lo smartphone e apri il drawer laterale, la navigazione appare spesso disconnessa o incompleta.
Molti commercianti pensano che offrire una visualizzazione a colonne su computer e un menu compatto su smartphone richieda la creazione di due menu totalmente separati. In realtà, non serve gestire due strutture dati differenti. Puoi mantenere un’unica gerarchia di categorie come fonte di verità, lasciando che ciascun dispositivo presenti quella struttura nel layout visivo più idoneo.
Risposta rapida: un unico menu può gestire desktop e mobile?
Sì. In Dawn, il menu principale dell’header alimenta sia il menu desktop che il drawer mobile, per cui la struttura è già condivisa. La differenza risiede unicamente nel layout: il desktop mostra colonne affiancate, il mobile naviga livello per livello. Scegli il metodo che conserva una sola fonte di verità.
- Metodo 1 (Impostazioni native del tema senza codice): Mantieni un solo menu nell’admin di Shopify e imposta il tipo di menu desktop dell’header su Mega menu; il tema gestirà automaticamente l’adattamento per mobile.
- Metodo 2 (Menu separati nell’admin): Crea una linklist mobile dedicata e modifica il codice del drawer per puntare a essa, accettando il raddoppio delle operazioni di manutenzione.
- Metodo 3 (Personalizzazione del template del drawer): Modifica il codice Liquid del drawer affinché le sottocategorie appaiano aperte fin dall’inizio, evitando passaggi intermedi a scorrimento.
Come i temi Shopify riutilizzano un menu su desktop e mobile
In Shopify, i dati di navigazione sono indipendenti dal layout grafico. Quando crei un menu in Contenuto > Menu, Shopify memorizza la struttura come oggetto linklist. Secondo la Documentazione per sviluppatori di Shopify, “È possibile nidificare i link fino a tre livelli di profondità”: una voce di primo livello seguita da due livelli secondari. Per una guida completa sull’alberatura, consulta la nostra Shopify menu guide.
Poiché ogni linklist è pura struttura informativa, il tema attivo decide come renderizzarla (Shopify Dev Docs). Nel file sections/header.liquid di Dawn, l’impostazione menu_type_desktop consente di alternare tra menu a discesa, mega menu o drawer desktop (GitHub Shopify Dawn).
Indipendentemente dal layout desktop scelto, il drawer mobile di Dawn legge la medesima linklist. Nel file snippets/header-drawer.liquid, il template scorre il menu con for link in section.settings.menu.links e scende fino alle voci di terzo livello con for grandchildlink in childlink.links (GitHub Shopify Dawn). Liquid tiene inoltre traccia dei livelli nidificati tramite l’attributo levels di ciascun link (Shopify Liquid API).
La struttura sottostante è già unificata. Gestisci One menu tree; a cambiare tra schermi diversi è soltanto la disposizione geometrica.
Perché i due layout offrono sensazioni ancora diverse
Anche condividendo la stessa lista di link, l’esperienza utente su desktop e mobile differisce sensibilmente per via delle dinamiche d’interazione tra mouse e dita.
Figura 1: Illustrazione concettuale (Concept illustration) — Perché i due layout offrono sensazioni ancora diverse
Su desktop, il passaggio del mouse su una categoria apre un ampio Hover panel. Gli acquirenti visualizzano subito sottocategorie e link specifici disposti su più colonne, esplorando l’offerta senza dover cambiare pagina.
Sullo schermo compatto di uno smartphone, lo spazio orizzontale non consente colonne multiple. I temi adottano quindi un drawer a scomparsa con navigazione a cascata. Per raggiungere una sottocategoria, il cliente deve toccare la riga padre, attendere la transizione del pannello e toccare nuovamente. Questo requisito di Two taps è una lamentela espressa da alcuni utenti di Dawn nella community di Shopify (Shopify Community). Per comprendere meglio questa dinamica, leggi la nostra analisi su mobile drawer menu architecture.
Inoltre, il touchscreen introduce attriti d’uso specifici:
- Parent link not clickable: In molti drawer per smartphone, toccare la voce genitore serve solo ad aprire il pannello secondario, rendendo inaccessibile la pagina di collezione principale.
- Errori di tocco: Le ricerche di Nielsen Norman Group evidenziano che “le opzioni minuscole nei mega menu causano frequenti errori di selezione sui display touch” (NN/g).
- Template mobili dedicati: Alcune app di menu come Meteor mantengono modelli separati per desktop e mobile (Helium Meteor Docs), mentre gli esperti di Clean Canvas raccomandano un menu mobile a livello singolo con collegamenti diretti ai prodotti per il tema Symmetry (Clean Canvas).
Metodo 1: Mantenere un unico menu Shopify e impostare il desktop su Mega menu
La soluzione senza codice più lineare consiste nell’attivare la funzionalità di mega menu nativa del proprio tema. In questo modo si amministra un solo albero di menu, lasciando che il tema formatti automaticamente l’output per ciascun dispositivo.
Segui questi quattro passaggi:
- Costruire l’alberatura a 3 livelli nell’admin: In Contenuto > Menu, struttura il tuo Menu principale con categorie genitore, sottotitoli e collegamenti di destinazione.
- Assegnare il menu all’header: Vai su Negozio online > Temi > Personalizza > Header e seleziona la tua linklist nell’impostazione Menu.
- Impostare il tipo di menu desktop su Mega menu: Nelle impostazioni dell’header, modifica Menu type impostandolo su Mega menu (GitHub Shopify Dawn). Per una guida dettagliata su Dawn, leggi le indicazioni per add a mega menu to Dawn.
- Verificare il drawer mobile: Passa alla vista di anteprima Mobile e apri il drawer. Il menu caricherà automaticamente lo stesso identico albero di collegamenti (GitHub Shopify Dawn).
Nei temi commerciali di terze parti, il nome dell’opzione potrebbe variare; fai riferimento alla documentazione del tuo tema (Shopify Dev Docs).
Metodo 2: Usare due menu separati nel pannello di Shopify
Se il tuo menu desktop include numerosi banner e link secondari che sovraccaricano lo schermo di uno smartphone, puoi scegliere di creare due menu distinti nell’admin.
Si definisce una linklist principale per desktop e una seconda lista snella denominata “Mobile Menu” in Contenuto > Menu. Per collegarla, gli sviluppatori modificano il file snippets/header-drawer.liquid in modo che il drawer richiami la variabile del menu mobile invece di section.settings.menu (Shopify Community). Controlla la documentazione del tuo tema per vedere se offre un’impostazione dedicata al menu del drawer, che eviterebbe di toccare il codice.
Nonostante garantisca la massima libertà di semplificazione, questa soluzione implica un notevole costo gestionale:
- Ogni volta che lanci una nuova collezione o una promozione stagionale, devi aggiornare due menu distinti.
- Nel tempo i due menu possono divergere, lasciando gli utenti mobile senza link presenti su desktop. I commercianti che vogliono «replicare il menu desktop su mobile» cercano proprio di evitarlo (Shopify Community).
Riserva il Metodo 2 ai casi in cui la navigazione mobile richieda davvero un percorso del tutto divergente.
Metodo 3: Modificare il drawer per mostrare i livelli nidificati subito
Molti negozianti desiderano che il menu mobile presenti le sottocategorie aperte fin da subito, senza costringere i visitatori a scorrere tra schermate consecutive (Shopify Community).
Il template del drawer di Dawn include già i cicli per elementi secondari e terziari (GitHub Shopify Dawn). Modificando il codice Liquid e il CSS, gli sviluppatori possono eliminare i pannelli nascosti e rendere i livelli nidificati espansi come fisarmonica aperta.
Presta attenzione a queste avvertenze tecniche:
- Differenze di versione: Gli snippet di codice condivisi sui forum nel 2022 erano scritti per versioni datate di Dawn. I nomi delle classi e l’architettura dei file sono cambiati.
- Duplicare sempre il tema: Salva sempre una copia di backup del tema prima di modificare file Liquid. Non intervenire mai direttamente sul tema live.
- Eccessivo scorrimento verticale: Se il mega menu desktop contiene molti link, mostrarli tutti aperti su smartphone costringe a uno scorrimento prolungato.
Cosa viene trasferito da un mega menu desktop a mobile
Quando un mega menu desktop viene adattato per smartphone, gli elementi visivi devono necessariamente trasformarsi. Nielsen Norman Group consiglia di raggruppare le opzioni in insiemi correlati (NN/g). Per approfondire la gerarchia visiva, consulta i nostri consigli su mega menu layout and grouping best practices.
Figura 2: Illustrazione concettuale (Concept illustration) — Cosa viene trasferito da un mega menu desktop a mobile
| Elemento desktop | Comportamento su mobile | Azione consigliata |
|---|---|---|
| Griglia a più colonne | La larghezza ridotta non consente più colonne affiancate (Navi+ Docs) | Le Columns become one column impilate verticalmente in un’unica lista scorrevole |
| Titoli di colonna | I titoli che etichettano soltanto una colonna desktop occupano spazio in una lista stretta | Di solito eliminali quando le colonne si impilano; un sottile Divider between columns mantiene visibile il raggruppamento precedente |
| Immagini e banner promozionali | I grandi blocchi di Promo banner spingono i link fuori dall’area visibile | Nascondi le grafiche pesanti su mobile; usa funzioni come Exclude when embedded per mantenere il drawer pulito (Navi+ Docs) |
| Profondità del menu | Shopify limita i menu a un massimo di tre livelli totali (Shopify Dev Docs) | Mantieni la gerarchia a ≤ 3 livelli per evitare che i link vengano ignorati dai cicli Liquid nativi |
| Link di testo compatti | I testi troppo ravvicinati provocano selezioni errate su touch screen (NN/g) | Aumenta il padding affinché ogni elemento rispetti lo standard WCAG 2.2 di almeno 24 per 24 pixel CSS (W3C WCAG 2.2) |
Testare su dispositivi reali prima della pubblicazione
Gli emulatori del browser su desktop non possono simulare accuratamente la portata del pollice o la sensibilità tattile reale. Conduci verifiche su dispositivi fisici:
- Testare su smartphone iOS e Android reali: Apri l’anteprima su dispositivi reali con diverse dimensioni di schermo, sia in verticale che in orizzontale.
- Toccare ogni livello: Tocca le voci principali, le sottocategorie e i link di destinazione per verificare gli URL.
- Verificare il comportamento delle righe genitore: Controlla che il tocco sulle categorie apra la collezione oppure espanda il sottomenu senza intoppi.
- Misurare l’area tattile: Assicurati che pulsanti e link offrano uno spazio di tocco conforme allo standard di almeno 24x24 pixel di WCAG 2.2 (W3C WCAG 2.2).
- Verificare lo scorrimento del drawer: Scorri dall’alto fino ai link del profilo in basso per accertarti che nulla rimanga tagliato fuori.
- Utilizzare anteprime del tema: Esegui sempre i test in una copia duplicata del tema prima di pubblicare modifiche al pubblico.
Problemi comuni e soluzioni
Nell’allineamento tra menu desktop e mobile, emergono di frequente quattro criticità:
Il menu mobile richiede due tocchi
- Causa: La navigazione a pannelli successivi costringe a toccare una categoria, attendere l’animazione e toccare nuovamente (Shopify Community).
- Soluzione: Modifica il codice del drawer per espandere i sottomenu in linea (Metodo 3), oppure adotta un layout che salti il livello intermedio delle colonne per raggiungere i link con un tocco.
I livelli profondi non compaiono
- Causa: Shopify gestisce nativamente fino a tre livelli di gerarchia (Shopify Dev Docs). Dawn non itera oltre le voci terziarie (GitHub Shopify Dawn).
- Soluzione: Riorganizza la tassonomia affinché tutte le pagine chiave rientrino nei tre livelli previsti.
Il link genitore non è cliccabile
- Causa: Su display touch, il tocco sulla voce genitore è spesso riservato all’apertura del pannello figlio.
- Soluzione: Inserisci un link “Mostra tutto in [Categoria]” come prima voce all’interno del sottomenu.
Il menu mobile mostra voci diverse da desktop
- Causa: Il negozio sta usando il Metodo 2 tramite codice in
snippets/header-drawer.liquido un’app che punta a una linklist mobile separata (Shopify Community). - Soluzione: Ispeziona le impostazioni dell’header e il codice Liquid per verificare a quale handle di menu faccia riferimento il drawer.
Compromessi: quando una struttura unica è la scelta errata
Condividere una struttura di navigazione riduce i tempi di gestione, ma ogni approccio comporta compromessi specifici:
| Metodo | Impegno di configurazione | Codice necessario | Dove si gestisce | Principali limiti e rischi |
|---|---|---|---|---|
| Metodo 1: Mega menu nativo | Basso (minuti) | Nessuno (impostazioni tema) | Unico menu nell’admin Shopify | Vincolato alle opzioni del tema; il drawer mobile mantiene la navigazione a scorrimento |
| Metodo 2: Due menu separati | Medio | Modifica Liquid o selettore tema | Due menu nell’admin | Rischio di disallineamento; doppio carico di lavoro a ogni aggiornamento del catalogo |
| Metodo 3: Drawer personalizzato | Alto | Interventi su Liquid e CSS | Unico menu nell’admin Shopify | Possibili rotture con gli aggiornamenti del tema; elenchi lunghi affaticano lo scorrimento |
Quando conviene separare i menu
Benché una fonte unica eviti discrepanze, separare i menu può risultare utile in scenari specifici:
- Cataloghi molto estesi: I negozi con migliaia di prodotti distribuiti su molte sottocategorie possono saturare i telefoni. Un menu mobile semplificato a livello singolo con link diretti garantisce un’esperienza più immediata (Clean Canvas).
- Scorciatoie per utenti mobile: Chi acquista da telefono può trarre vantaggio da collegamenti rapidi in prima fila (Stato dell’ordine, Trova negozio).
- Indicizzazione e SEO: Se nascondi categorie su mobile, assicurati che tutte le pagine di collezione rimangano raggiungibili tramite pagine di catalogo, breadcrumb e sitemap. Leggi i nostri suggerimenti per keep your menu crawlable.
Dove si inserisce Navi+
Se il tuo tema attuale non dispone di layout mega menu o se preferisci non modificare il codice Liquid, Navi+ offre un modo strutturato per condividere la navigazione tra i dispositivi.
Secondo la documentazione di Navi+, il menu desktop e quello mobile lavorano insieme in questo modo:
- Desktop Mega Menu: Su schermi ampi, Navi+ Desktop Mega Menu visualizza pannelli a più colonne con immagini e banner. Non compare su smartphone poiché le colonne larghe non trovano posto su display stretti (Navi+ Docs).
- Integrazione in Mobile Menu: Invece di riscrivere le categorie, Navi+ Mobile Menu consente di incorporare il mega menu desktop mediante un apposito elemento posizionato al livello 1 del drawer (Navi+ Docs).
- Disposizione a colonna singola: Una volta incorporato, le Columns become one column impilate con ordine (Navi+ Docs). Il livello intermedio viene escluso per consentire l’accesso ai prodotti con un solo tocco anziché due.
- Gestione della visibilità: Attiva la funzione Exclude when embedded per nascondere i banner pesanti dal drawer mobile (Navi+ Docs).
- Modifica in un unico posto: Il drawer riutilizza le voci del mega menu: modifichi le voci una sola volta (Edit once) nel mega menu desktop e la copia incorporata nel drawer le segue. Se desideri eliminare un mega menu, rimuovi semplicemente l’elemento incorporato dal Mobile Menu (Navi+ Docs).
- Profondità a tre livelli: Navi+ Mobile Menu supporta tre livelli di navigazione (categorie, sottocategorie e link interni) (Navi+ Docs).
Per impostarlo:
- In Navi+, copia l’elemento incorporato dal tuo Desktop Mega Menu.
- Incolla l’elemento al livello 1 del tuo Mobile Menu.
- Attiva Exclude when embedded su banner o elementi riservati unicamente ai computer.
Per dettagli completi, scopri come reuse a Desktop Mega Menu on phones e come gestire la visibilità tramite Exclude when embedded.
Se usi già Navi+ per un Desktop Mega Menu, prova a copiare il suo elemento incorporato in un Mobile Menu e a guardare l’anteprima sul tuo telefono: se il risultato non ti convince, elimina l’elemento incorporato e nient’altro cambia.
Checklist operativa
Segui questa lista per allineare il mega menu desktop e la navigazione mobile:
- Definire un albero unico: Costruisci la tua tassonomia in Contenuto > Menu, restando entro il limite di tre livelli di Shopify.
- Scegliere il metodo: Seleziona tra impostazioni native del tema (Metodo 1), menu dedicati (Metodo 2) o modifiche al codice del drawer (Metodo 3).
- Duplicare il tema: Crea una copia di sicurezza del tema prima di modificare codice Liquid.
- Trasformare le colonne in un elenco singolo: Accertati che le colonne desktop si convertano in una lista a colonna singola su smartphone.
- Filtrare gli elementi pesanti: Nascondi banner promozionali voluminosi dal drawer mobile.
- Verificare i link genitore: Controlla che le categorie aprano la collezione corrispondente o contengano una voce “Mostra tutto”.
- Testare su smartphone reali: Verifica la reattività al tocco, lo scorrimento e il target minimo di 24x24 px su dispositivi fisici.
Domande frequenti (FAQ)
Posso usare un unico menu per desktop e mobile?
Sì. In temi come Dawn, il drawer mobile si genera a partire dal medesimo menu assegnato all’header. In questo modo mantieni una sola linklist mentre il tema applica il layout appropriato su ogni dispositivo.
Quanti livelli può avere un menu Shopify?
Una voce di primo livello in Shopify può contenere fino a due livelli secondari nidificati, per un totale di tre livelli di navigazione. Il template del drawer di Dawn supporta i link fino alla profondità dei nipoti.
Perché il mio menu mobile richiede due tocchi?
I drawer mobili tradizionali impiegano una struttura a cascata: toccare una voce apre un pannello secondario, e un secondo tocco seleziona il link. Questo passaggio si elimina mostrando i menu aperti inline o rimuovendo il livello delle colonne.
Le colonne e le immagini del mega menu funzionano su mobile?
Le griglie a più colonne non si adattano agli schermi degli smartphone e vengono disposte su una sola colonna. Immagini e banner occupano troppo spazio verticale e vengono solitamente nascosti su mobile tramite impostazioni di visibilità.
Devo modificare il codice del tema?
No. Se il tuo tema offre supporto nativo per i mega menu, puoi configurarlo dall’editor senza scrivere codice. L’intervento sul codice serve solo per alterare il comportamento standard del drawer o collegare un menu indipendente.
Fonti
- Shopify Developer Documentation: Navigation and Search — Specifiche tecniche su linklist e nidificazione fino a tre livelli.
- Shopify Dawn Repository: header.liquid — Implementazione dei tipi di menu desktop: a discesa, mega menu e drawer.
- Shopify Dawn Repository: header-drawer.liquid — Ciclo di scansione del drawer mobile fino al livello dei nipoti.
- Shopify Liquid API Reference: Link Object — Documentazione sulle proprietà dei link e sul conteggio dei livelli nidificati.
- Nielsen Norman Group: Mega Menus Work Well Anywhere — Ricerche UX su errori di tocco su touchscreen, raggruppamento delle opzioni e gerarchia visiva.
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Standard di accessibilità con target tattili minimi di almeno 24 per 24 pixel CSS.
- Shopify Community: Main menu nesting mobile vs desktop — Discussione sulla necessità del doppio tocco nella navigazione mobile di Dawn.
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Suggerimenti della community per indirizzare il drawer verso un menu mobile separato.
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Richieste per visualizzare contemporaneamente i livelli 2 e 3 nel menu mobile di Dawn.
- Shopify Community: How can I make my desktop menu identical on mobile — Quesiti di commercianti sulla riproduzione del menu desktop su smartphone.
- Helium Meteor Documentation: Welcome to Meteor — Panoramica sui modelli separati per desktop e mobile.
- Clean Canvas Blog: Mega Menu Your Shopify Store — Indicazioni per menu mobile a livello singolo sul tema Symmetry.
- Navi+ Documentation: Create a Desktop Mega Menu — Guida tecnica su incolonnamento, elementi incorporati e visibilità.
- Navi+ Documentation: Create a Mobile Menu — Guida alla struttura a 3 livelli per menu mobile e integrazione drawer.
- Navi+ Documentation: Item Visibility — Istruzioni per escludere elementi su specifici dispositivi con Exclude when embedded.
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.