Architettura dell’Header Navigation su Shopify: Modelli di Layout, Spazio Visivo e Breakpoint

L’header desktop opera all’interno di un budget orizzontale fisso, bilanciando identità di marca, categorie di prodotto, strumenti di utilità e percorsi di checkout.

Trattare l’header come un contenitore flexbox non gestito causa collisioni con la ricerca, a capo imprevisti o il collasso in menu a scomparsa. Una navigazione affidabile richiede una scelta di layout deliberata, gestione dello spazio e verifica responsive.

Risposta rapida: Quale layout dell’header Shopify si adatta al tuo negozio?

Non esiste un unico layout di header Shopify migliore in assoluto. I negozi con catalogo di solito funzionano meglio con il logo a sinistra e link di categoria in linea, le piccole boutique possono usare un logo centrale con link divisi, e i grandi store multireparto hanno bisogno di un header a due livelli con una barra utility separata. Evita di nascondere la navigazione desktop dietro un hamburger.

La scelta dell’architettura giusta per l’header desktop dipende da quattro modelli di layout principali:

• Logo a sinistra + Navigazione in linea: Ancora il logo a sinistra con i link di categoria che scorrono verso destra. Offre il massimo spazio orizzontale per le categorie del catalogo, raggruppando le utility sulla destra.
• Logo centrale + Navigazione divisa (Split): Centra il logo, affiancato dai link di categoria su entrambi i lati. Si adatta ai cataloghi piccoli, ma divide lo spazio orizzontale in due tratti più corti.
• Navigazione a due livelli sovrapposti (Two-Tier): Divide la navigazione su due barre orizzontali. Una sottile fascia superiore ospita le utility, riservando la barra inferiore alle categorie di prodotto.
• Drawer nascosto su desktop: Nasconde i link dietro un’icona hamburger. Pur essendo visivamente minimale, Nielsen Norman Group sconsiglia la navigazione nascosta nelle interfacce desktop.

Perché lo spazio dell’header si esaurisce sugli schermi dei portatili

I designer spesso esaminano un template su un monitor largo. Alcuni clienti navigano su portatili dove la scala dello schermo del sistema operativo riduce il numero di pixel CSS disponibili per la pagina.

A titolo illustrativo (un calcolo, non una statistica): uno schermo largo 1920px con scala Windows al 150% offre una larghezza CSS effettiva di 1280px (1920 / 1.5 = 1280). Controlla le analytics del tuo store per conoscere le dimensioni di viewport che i tuoi clienti usano davvero.

Quando gli elementi dell’header superano la larghezza orizzontale, la navigazione può rompersi in tre modi distinti:

+-------------------------------------------------------------------------------+
|  Wide Viewport - Illustration                                                 |
|  [Brand Logo]   Women   Men   Accessories   Footwear   Sale   [Search] [Cart] |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
|  Laptop-Width Viewport - Unplanned Wrapping Illustration                      |
|  [Brand Logo]   Women   Men   Accessories   Footwear                          |
|  Sale   [Search] [Cart]  <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+

1. A capo involontario in flexbox: I contenitori flex spingono le categorie finali o i campi di ricerca su una seconda riga, aumentando l’altezza dell’header e spostando il merchandising dell’hero.
2. Overflow orizzontale e utility troncate: I contenitori flex con nowrap spingono le utility oltre il bordo del viewport, nascondendo il carrello fuori schermo o causando barre di scorrimento orizzontali.
3. Collasso prematuro nel drawer desktop: Le media query del tema possono passare al menu hamburger mobile su un viewport desktop largo quanto un portatile quando lo spazio orizzontale non è gestito.

Secondo le linee guida Cumulative Layout Shift (CLS) di web.dev, “un layout shift si verifica ogni volta che un elemento visibile cambia posizione da un frame renderizzato al successivo”. Un header che va già a capo al primo rendering è un problema di layout, ma di per sé non è un layout shift. Gli shift avvengono quando l’header cambia dopo essere stato mostrato, ad esempio quando un font o uno script caricato in ritardo ne altera l’altezza. I layout shift che avvengono entro 500 millisecondi da un input dell’utente sono esclusi dal CLS.

Cosa dicono le ricerche su scansione visiva, ricerca e link di utility

La ricerca pubblicata sull’usabilità ci dà alcune aspettative di base per il design dell’header e-commerce. Non risolve ogni questione di layout, perciò segnaliamo dove un punto è una nostra inferenza.

Navigazione visibile contro nascosta su desktop

Nello studio di Nielsen Norman Group di Pernice & Budiu (2016), “su desktop, le persone hanno usato i menu nascosti solo nel 27% dei casi”, mentre la navigazione visibile e quella combinata sono state usate rispettivamente nel 48% e nel 50% dei casi. L’indicazione di NN/g è diretta: “Non usare la navigazione nascosta (come le icone hamburger) nelle interfacce utente desktop.”

Scansione in alto a sinistra e ipotesi di navigazione divisa

L’articolo di NN/g sullo schema di lettura a F (Pernice, 2017) descrive “molte fissazioni concentrate in alto e sul lato sinistro della pagina”. Un logo allineato a sinistra con i link di categoria si trova proprio in quest’area.

La navigazione divisa con logo centrale è un’ipotesi. Non abbiamo trovato alcuno studio pubblicato che la verifichi. Se l’attenzione parte dall’alto a sinistra, chi scansiona il lato sinistro deve saltare il logo centrale per raggiungere le categorie sul lato destro, quindi quei link potrebbero ricevere meno attenzione. I merchant che usano header divisi dovrebbero verificare il coinvolgimento con click map o heat map.

Posizionamento e dimensioni della casella di ricerca

L’indicazione di NN/g sulla ricerca (Nielsen, 2001) è che “nelle homepage, la ricerca dovrebbe essere un campo di testo e non un link”, posizionata nella parte alta della pagina, di solito nell’angolo destro, e “abbastanza larga da contenere la query tipica”. Una piccola boutique può comunque preferire un’icona di ricerca espandibile per risparmiare spazio; consideralo un compromesso da testare, non una best practice dimostrata dalla ricerca.

Le categorie di prodotto come elementi di primo livello

Baymard Institute (2023) ha rilevato che “il 33% dei siti mobile non rende le categorie di prodotto le voci di primo livello”, e osserva che “avere le categorie di prodotto come voci di primo livello sui siti desktop corrisponde all’implementazione mobile ideale”. La nostra inferenza: se “Chi siamo”, “FAQ” o “Traccia ordine” stanno nella stessa riga delle categorie, competono con le categorie per spazio e attenzione limitati. È una valutazione di design, non un risultato misurato.

Quattro modelli di layout dell’header a confronto

Per scegliere la giusta architettura dell’header, i merchant devono valutare ogni modello in base all’ampiezza del catalogo, alle esigenze di ricerca e al carico operativo delle utility.

Nota: Questo confronto è un riepilogo di schemi architetturali, non un audit misurato di store specifici.

La navigazione in linea allineata a sinistra è un punto di partenza comune per l’e-commerce. Ancorare il logo a sinistra e far scorrere i link verso destra offre alle categorie di prodotto un tratto orizzontale ininterrotto.

La navigazione divisa con logo centrale offre una simmetria editoriale ai brand con pochi link. Tuttavia, dividendo lo spazio, l’aggiunta di categorie o di selettori di localizzazione può causare rapidamente collisioni.

La navigazione a due livelli risolve i conflitti di spazio separando le funzioni in verticale. I merchant con grandi volumi possono collocare identità del brand, ricerca aperta e utility sulla barra superiore e riservare la barra inferiore alle categorie. La profondità delle categorie può poi spostarsi in un mega menu: Baymard riporta che “i menu a discesa basati sull’hover (detti anche ‘mega menu’) sono attualmente usati come navigazione principale nell’88% dei principali siti e-commerce statunitensi” nel suo benchmark sulla navigazione principale, i cui esempi provengono da un benchmark UX su 344 siti e-commerce. Per il design del pannello vero e proprio, consulta la nostra guida alle migliori pratiche per mega menu Shopify.

Dal punto di vista dell’accessibilità, la W3C WAI ARIA Authoring Practices Guide osserva che “un menu visivamente persistente è una menubar”.

Separare i menu di utility dalla navigazione del catalogo

Nell’architettura di un sito, la navigazione di utility comprende gli strumenti che assistono le attività del cliente senza appartenere al catalogo prodotti, come login all’account, tracciamento ordini, selettori di valuta, store locator e assistenza clienti. NN/g la definisce così: “La navigazione di utility consiste in azioni e strumenti secondari”.

Figura 1: Concept illustration (illustrazione concettuale) — header con i link utility mescolati nel menu principale a confronto con un header che li sposta in una barra utility.

Secondo Nielsen Norman Group (Farrell, 2015), i link utility possono avere “una collocazione visiva secondaria (meno prominente)” rispetto alla navigazione primaria.

Nelle vetrine Shopify, i merchant di solito hanno tre modi per spostare i link utility fuori dalla riga principale. Quali siano disponibili dipende dal tuo tema:

1. Un menu secondario o un’area utility nella sezione Header del tema: Alcuni temi offrono un’impostazione per un secondo menu o una sottile fascia sopra la barra principale. Controlla le impostazioni Header del tuo tema per vedere cosa offre.
2. Una barra utility superiore: Se il tuo tema supporta una fascia sopra l’header principale, può ospitare elementi come il selettore di valuta, l’account cliente e il tracciamento ordini, lasciando la barra principale ai link del catalogo.
3. Spostamento nel footer: Collocare nel footer i link istituzionali come “Chi siamo”, “Press” e “FAQ” alleggerisce l’header mantenendoli accessibili.

Per indicazioni specifiche su come semplificare la navigazione nel flusso di checkout, leggi la nostra analisi sull’header navigation nel checkout.

Ingegneria dei breakpoint: Testare l’header sulle larghezze dei portatili

Anziché affidarti all’ispezione visiva su un monitor widescreen, pianifica l’header rispetto a un budget esplicito di pixel orizzontali.

Figura 2: Concept illustration (illustrazione concettuale) — un header Shopify testato alla larghezza di un monitor ampio e a quella di un portatile più stretta, dove il menu richiede un piano.

La formula dello spazio utile orizzontale

Stima il budget di pixel orizzontali disponibile per i link di categoria principali con questa formula pratica:

Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links

Una struttura ipotetica (nessuna misurazione reale): misura logo, blocco utility e margini del tuo store, sottraili dalla larghezza del viewport per ottenere l’Available Width, poi dividi per il numero di link di categoria per ottenere un budget per link. Confronta quel budget con l’etichetta più larga che misuri sul tuo store.

Misurare le larghezze reali delle etichette nei DevTools

Per verificare se la navigazione entra senza andare a capo, controlla le larghezze delle etichette direttamente negli strumenti per sviluppatori del browser:

1. Apri Chrome DevTools (Cmd+Option+I o F12) e attiva la Device Mode.
2. Imposta la larghezza del viewport responsive sulla larghezza effettiva da portatile dell’esempio di scaling qui sopra, oppure su una larghezza ricavata dalle tue analytics.
3. Ispeziona l’etichetta di navigazione più lunga nella scheda Computed per annotare la sua larghezza in pixel renderizzata, inclusi padding e margini.
4. Moltiplica la larghezza dell’etichetta più lunga per il numero di link per una verifica prudente. Se il totale supera l’Available Width, è probabile che il menu vada a capo o venga troncato.

Regole pratiche di architettura

Sono valutazioni di design, non soglie misurate. Conferma sempre con la verifica di larghezza qui sopra.

• Negozio con catalogo piccolo: Con poche categorie principali, il logo a sinistra in linea o il logo centrale diviso di solito entrano più facilmente nei viewport dei portatili.
• Negozio con catalogo medio: Il logo a sinistra in linea può funzionare se i link utility sono icone compatte e le etichette sono brevi.
• Grande negozio multireparto: Con molte categorie principali, è probabile che la navigazione in linea vada in collisione sugli schermi dei portatili. Valuta un layout a due livelli sovrapposti, oppure un mega menu che sposti la profondità fuori dalla barra.
• Store internazionale o multivaluta: I selettori di localizzazione consumano spazio orizzontale delle utility. Valuta di spostare i selettori in una barra utility superiore o nel footer.

Quando la navigazione supera lo spazio disponibile, hai tre strade di rimedio: ridurre i link principali, accorciare il testo delle etichette o passare a un layout a due livelli. Evita di far collassare prematuramente la navigazione desktop in un drawer off-canvas.

Insidie specifiche di Shopify: Selettori Markets, dimensioni del DOM e maiuscole

Costruire la navigazione dentro Shopify introduce sfide specifiche della piattaforma.

Selettori di valuta e lingua di Shopify Markets

Gli store che vendono in più paesi spesso aggiungono all’header selettori di valuta, paese o lingua. A seconda del tema, possono apparire come pulsanti piuttosto larghi con un codice valuta o una bandiera. In un header in linea a riga singola, un selettore largo toglie spazio alle categorie e può causare l’andata a capo sui portatili. Valuta di collocare i selettori Markets in una fascia utility superiore o nel footer.

Dimensioni del DOM dell’header e overhead di Liquid

Generare un esteso menu a discesa multilivello direttamente in Liquid aggiunge il suo markup a ogni risposta di pagina, e quel markup conta ai fini della dimensione del DOM della pagina. Secondo le linee guida Google Chrome Lighthouse sulla dimensione del DOM, Lighthouse “segnala un avviso quando l’elemento body ha più di ~800 nodi” e “segnala un errore quando l’elemento body ha più di ~1.400 nodi”. Un header pesante consuma una parte di quel budget prima ancora che il contenuto della pagina venga renderizzato. Per approfondire, leggi la nostra guida su navigazione e Core Web Vitals.

Tipografia in maiuscolo e spaziatura tra lettere

I brand book spesso richiedono testi in maiuscolo con spaziatura espansa per i link di navigazione. Impostare il testo in maiuscolo (text-transform: uppercase) in genere lo allarga rispetto alle maiuscole e minuscole normali, e letter-spacing aggiunge spazio dopo ogni carattere. Misura di nuovo le larghezze delle etichette renderizzate ogni volta che cambi la tipografia della vetrina.

Limiti nativi di annidamento dei menu in Shopify

Secondo la documentazione del Centro assistenza Shopify sui menu a discesa, “la voce di primo livello può avere fino a due livelli di menu a discesa annidati”, il che fissa un limite di piattaforma di tre livelli di navigazione. Configuri questi menu nell’admin di Shopify e li colleghi a temi come Horizon o ad altri trattati nel nostro hub di temi Shopify.

Compromessi: Quando non usare ciascun modello di header

Ogni layout di header è un compromesso tra estetica, efficienza dello spazio e reperibilità del catalogo.

Gli store monoprodotto con header in linea possono ritrovarsi con un vuoto antiestetico tra il marchio e l’icona del carrello. Al contrario, un layout centrale diviso può esaurire lo spazio su ciascun lato quando un brand aggiunge collezioni stagionali o selettori di valuta internazionali.

Gli header a due livelli sovrapposti aggiungono altezza verticale e spingono verso il basso i contenuti hero, quindi misura l’altezza combinata di barra annunci, barra utility e navigazione principale. Per gli store in cui gli acquirenti da mobile sono la schiacciante maggioranza, quell’altezza extra su desktop potrebbe non valere la pena.

Infine, i drawer desktop nascosti vanno contro l’indicazione di NN/g e la sua conclusione che gli utenti desktop usano i menu nascosti molto meno di quelli visibili (27% contro 48% dei casi). I drawer off-canvas sono lo standard sugli schermi mobile, ma i viewport desktop di solito hanno spazio per link visibili. Per l’architettura del drawer mobile, leggi la nostra guida al design del drawer menu mobile.

Checklist operativa: Controlla l’header del tuo negozio Shopify

Esamina l’header della tua vetrina Shopify con questa checklist in sei passaggi:

• Passo 1: Esegui l’audit dei viewport da portatile — Apri Chrome DevTools e testa la tua vetrina alla larghezza effettiva da portatile dell’esempio di scaling e alle larghezze presenti nelle tue analytics. Verifica che i link di categoria non vadano a capo, che non compaiano barre di scorrimento orizzontali e che il tema non collassi in un menu hamburger.
• Passo 2: Sposta i link utility non commerciali fuori dalla riga del catalogo — Rimuovi “Traccia ordine”, “Chi siamo” e “FAQ” dal menu delle categorie principali. Spostali in una barra utility superiore, in un menu a discesa dell’account o nel menu del footer.
• Passo 3: Fissa un budget di altezza dell’header — Misura l’altezza combinata di barra annunci, barra utility e navigazione principale. Controlla quanta parte della prima schermata occupano su un portatile.
• Passo 4: Verifica la tipografia e la formulazione delle etichette — Ispeziona l’etichetta di categoria più lunga. Accorcia le formulazioni prolisse (ad esempio, “Giacche e capispalla da uomo” in “Giacche uomo”). Controlla se le maiuscole o la spaziatura tra le lettere stanno gonfiando la larghezza delle etichette.
• Passo 5: Verifica le dimensioni dei target di click e tocco — Assicurati che icone e link dell’header rispettino il Criterio di successo W3C WCAG 2.2 2.5.8 Target Size (Minimum): un target del puntatore di almeno 24 per 24 pixel CSS, oppure una spaziatura sufficiente attorno ai target più piccoli.
• Passo 6: Convalida la navigazione da tastiera e la gestione del focus — Verifica che gli acquirenti possano muoversi nell’header con Tab e Shift+Tab. Controlla che Esc chiuda un menu a discesa aperto e riporti il focus sull’elemento che lo ha aperto, come nel W3C WAI ARIA Menubar Pattern.

Come si integra Navi+

Quando un catalogo in crescita supera ciò che l’header del tema può contenere, una possibilità è un intervento personalizzato in Liquid. Navi+ è un’app Shopify che costruisce menu separati senza richiedere di modificare il codice dell’header del tema.

• Menu desktop e mobile separati: Costruisci un Desktop Mega Menu per gli acquirenti da computer e configura un Mobile Menu (drawer), una Tab Bar (vedi la nostra analisi sull’architettura della tab bar mobile), un Icon Menu o un Floating Button per dispositivi mobili.
• Fino a 3 livelli: Come i menu nativi di Shopify, i menu Navi+ arrivano fino a tre livelli. Un Desktop Mega Menu può contenere la profondità delle categorie in un pannello invece che nella barra dell’header.
• Theme App Embed: Navi+ si attiva tramite un theme app embed standard di Shopify. I menu vengono salvati come configurazione e disegnati nel browser dagli script dell’app, senza toccare i file Liquid del tema.

Qui non dichiariamo alcuna velocità. Misura l’effetto sulla tua vetrina con Google PageSpeed Insights.

Quando non usare Navi+: I brand monoprodotto o gli store con un catalogo molto piccolo raramente hanno bisogno di un’app di navigazione di terze parti. Per questi store, le impostazioni dell’header del tema possono bastare. Le nostre guide di configurazione di Navi+ per i temi Shopify trattano i temi più diffusi, se vuoi confrontarli.

Se l’header del tuo tema ha esaurito lo spazio, puoi provare Navi+ per costruire un Desktop Mega Menu e un Mobile Menu separati senza modificare il codice del tema, e poi ripetere la verifica sulle larghezze da portatile dalla checklist qui sopra.

Domande frequenti (FAQ)

Come si modifica il menu dell’header in Shopify?

Apri il tuo tema nell’editor dei temi e seleziona la sezione Header. Secondo il Centro assistenza Shopify, per la maggior parte dei temi puoi cambiare il menu principale predefinito modificando le impostazioni nella sezione Header del tema.

Quanti livelli può contenere un menu a discesa Shopify?

Secondo la documentazione ufficiale di Shopify, una voce di primo livello può avere fino a due livelli di menu a discesa annidati, il che dà un massimo di tre livelli di navigazione.

È consigliabile usare un menu hamburger su desktop?

Nielsen Norman Group lo sconsiglia: “Non usare la navigazione nascosta (come le icone hamburger) nelle interfacce utente desktop.” Nel suo test, gli utenti desktop hanno usato i menu nascosti nel 27% dei casi contro il 48% della navigazione visibile.

Dove va posizionata la casella di ricerca nell’header?

NN/g consiglia un campo di testo anziché un link, posizionato nella parte alta della pagina (di solito nell’angolo destro) e abbastanza largo da contenere la query tipica.

Dove vanno collocati link account, tracking e valuta?

Fanno parte della navigazione di utility: azioni e strumenti secondari. NN/g osserva che possono avere una collocazione secondaria e meno prominente, quindi vanno bene una barra utility superiore o il lato destro dell’header, separati dalle categorie del catalogo.

Quanto devono essere grandi icone e link nell’header?

Secondo W3C WCAG 2.2 SC 2.5.8, la dimensione del target per gli input con puntatore è di almeno 24 per 24 pixel CSS, a meno che non si applichi un’eccezione, come una spaziatura sufficiente attorno al target.

Fonti

1. Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
2. Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
3. Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
4. Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
5. Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
6. Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
7. Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
8. W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
9. W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
10. Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
11. Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
12. Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes