Come personalizzare il layout del menu dell'intestazione in Shopify (Impostazioni del tema, menu a discesa e mega menu)

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

Per personalizzare il layout del menu dell’intestazione passo dopo passo:

1. Apri le impostazioni del tema: Nel pannello di amministrazione Shopify, vai su Negozio online > Temi > Personalizza e seleziona la sezione Intestazione (Header) nella barra laterale sinistra.
2. Imposta la posizione del logo e il layout: Modifica l’opzione Logo position per collocare il logo a sinistra sulla stessa riga oppure centrato sopra il menu. (Nota: le etichette variano in base al tema; in Dawn il controllo è denominato Logo position).
3. Collega e annida il tuo menu: Accedi a Contenuto > Menu per strutturare i link fino a 2 livelli di annidamento, quindi assegna la lista sotto Intestazione > Menu.
4. Scegli il tipo di menu e verifica il mobile: In Menu type, seleziona Dropdown, Mega menu o Drawer, quindi verifica la visualizzazione mobile tramite Mobile logo position.

What “Header Menu Layout” Means in Shopify

Quando i commercianti desiderano personalizzare il layout del menu dell’intestazione, raramente si limitano a modificare una singola impostazione isolata. In Shopify, la struttura dell’intestazione è il risultato dell’interazione di quattro livelli fondamentali:

1. Identità del brand e allineamento (Logo position): Controlla dove compare il logo aziendale rispetto ai link di navigazione, alla barra di ricerca e all’icona del carrello.
2. Elenco di navigazione assegnato (Quale menu appare): Lo specifico menu creato nel pannello di controllo e collegato alla sezione dell’intestazione.
3. Gerarchia strutturale e tipo di menu (Profondità & presentazione): Come si aprono le sottocategorie su schermi desktop: elenchi verticali compatti, ampi pannelli a più colonne o cassetti nascosti.
4. Regole di visualizzazione mobile (Layout mobile & comportamento del cassetto): Il modo in cui la barra si adatta agli smartphone touch, inclusa la posizione delle icone e del pannello laterale scorrevole.

In base alla documentazione ufficiale di Shopify, è possibile modificare il menu principale predefinito per la maggior parte dei temi modificando le impostazioni nella sezione Intestazione. Tuttavia, i link effettivi, le etichette e le relazioni gerarchiche tra elementi genitori e figli si gestiscono in Contenuto > Menu. In questa schermata, l’elemento di primo livello supporta fino a due livelli di menu a discesa annidati (per una profondità massima di tre livelli complessivi).

Poiché ogni tema gestisce questi parametri a modo suo, questa guida utilizza come riferimento il tema Dawn di Shopify. In Dawn, questi controlli corrispondono a impostazioni modulari dello schema, ma le diciture e le opzioni differiscono in altri temi. Per approfondire i modelli di visualizzazione per laptop e i punti di interruzione flex, consulta la nostra analisi su modelli di layout dell’intestazione e breakpoint.

Step 1: Change the Logo and Menu Position in the Theme Editor

Il primo livello visibile dell’intestazione riguarda l’allineamento tra il logo aziendale e i link di navigazione. Ecco come regolarlo in Shopify:

1. Accedi al pannello di amministrazione di Shopify.
2. Vai su Negozio online > Temi.
3. Sul tema attivo o su una copia di test, fai clic su Personalizza.
4. Nella barra laterale sinistra, clicca sulla sezione Intestazione (Header).

In Dawn troverai l’impostazione denominata Logo position, che offre quattro disposizioni principali:

• Middle left: Posiziona il logo a sinistra, sulla stessa riga orizzontale dei link del menu principale. Questo formato compatto risparmia spazio verticale.
• Top left: Colloca il logo nell’angolo in alto a sinistra e sposta i link di navigazione su una riga dedicata subito sotto.
• Top center: Posiziona il logo al centro in alto e allinea il menu orizzontale centrato subito sotto. Se desideri il logo al centro con il menu posizionato sotto, questa è l’opzione nativa corretta.
• Middle center: Centra il logo, con il menu a sinistra e le icone dell’intestazione a destra.

Tieni presente che questi nomi appartengono a Dawn; le etichette e le opzioni di layout possono essere diverse in altri temi. Alcuni temi di terze parti separano l’allineamento del logo da quello del menu in campi distinti o offrono griglie fisse. Se il tuo tema non prevede la disposizione desiderata, consulta il quadro decisionale nella sezione dedicata a quando il tema esaurisce le opzioni.

Step 2: Choose the Header Menu and Build Nested Links

Spostare la posizione del menu non servirà a nulla se l’intestazione punta all’elenco sbagliato o se le sottocategorie non si aprono. In Shopify, i menu vengono creati nell’amministrazione centrale e poi collegati all’editor visivo.

Procedura per creare e collegare il menu:

1. Nel pannello Shopify, vai su Contenuto > Menu (come illustrato nella Guida di Shopify).
2. Fai clic su Menu principale (oppure clicca su Crea menu per crearne uno nuovo).
3. Inserisci le categorie primarie come elementi di primo livello.
4. Per creare sottomenu, trascina gli elementi secondari verso destra sotto l’elemento genitore fino a visualizzare un rientro.
5. Fai clic su Salva menu.

In conformità con le specifiche di navigazione di Shopify, la voce di primo livello può contenere fino a due livelli di menu a discesa annidati (tre livelli in tutto). Tutti i temi Shopify sono progettati per visualizzare gli elementi annidati come menu a discesa che si diramano dal menu principale.

Dopo aver salvato la struttura, torna su Negozio online > Temi > Personalizza, apri la sezione Intestazione, individua la scheda Menu, clicca su Modifica, seleziona la lista desiderata e clicca su Salva. Per una guida passo dopo passo sull’organizzazione delle sottocategorie senza errori di trascinamento, consulta il nostro articolo su come aggiungere un sottomenu al menu di navigazione.

Step 3: Pick Dropdown, Mega Menu, or Drawer

Dopo aver collegato i link all’intestazione, devi decidere come si apriranno le sottocategorie su schermi desktop. In Dawn, nella sezione Intestazione, troverai l’impostazione Menu type con tre opzioni (le etichette cambiano da tema a tema):

Figura 1: Illustrazione concettuale (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer

Secondo le ricerche del Nielsen Norman Group, i mega menu rappresentano «un’eccellente scelta di design per accogliere un elevato numero di opzioni». Il NN/g sottolinea che i mega menu mostrano tutto a colpo d’occhio, permettendo ai visitatori di esplorare visivamente i prodotti invece di tentare di ricordare cosa contenga ciascun titolo generico.

Al contrario, scegliere Drawer in Dawn (controllato dalla condizione section.settings.menu_type_desktop == 'drawer' nel header.liquid di Dawn) nasconde i link orizzontali dietro un pulsante menu su desktop. È pulito, ma con un compromesso reale: la ricerca NN/g del 2016 ha rilevato che la scopribilità si riduce quasi della metà nascondendo la navigazione principale di un sito. Se il tuo negozio ha un catalogo ampio, riserva il drawer al mobile e usa un menu aperto su desktop. Per progettare colonne di link, titoli e riquadri visivi equilibrati, consulta la nostra guida su migliori pratiche per i mega menu.

Show Menu Links Directly in the Header Instead of a Dropdown

Una domanda frequente, anche in una discussione della Shopify Community sul tema Sense, è come mostrare i link di primo livello direttamente nell’intestazione, senza menu a discesa.

Nell’architettura di Shopify, i menu a discesa non vengono attivati da un’opzione di visualizzazione del tema, bensì dalla gerarchia dei link. Come chiarisce la Guida di Shopify, tutti i temi mostrano gli elementi annidati come menu a discesa. Se un elemento ha link secondari rientrati sotto di sé in Contenuto > Menu, il tema genererà automaticamente un menu a comparsa.

Per visualizzare i link orizzontalmente lungo la barra dell’intestazione:

1. Apri il pannello di controllo Shopify e vai su Contenuto > Menu.
2. Seleziona il menu collegato all’intestazione.
3. Ispeziona la lista. Se ci sono elementi annidati sotto altri, trascinali verso sinistra fino ad allinearli con il livello superiore.
4. Assicurati che ogni singolo link si trovi al livello principale.
5. Fai clic su Salva menu.

Visualizzando l’anteprima del negozio, il tema mostrerà questi link affiancati sulla riga di navigazione orizzontale senza aprire alcun contenitore a discesa.

Tieni presenti i limiti di larghezza. NN/g consiglia di mostrare i link come link visibili quando un sito ha 4 o meno link di navigazione di primo livello. Con molti link di primo livello, la riga può andare a capo su due righe o invadere il logo sugli schermi di laptop più stretti, quindi controlla l’anteprima a più larghezze. Se il catalogo richiede molte destinazioni, raggruppale sotto titoli genitore, ad esempio con un mega menu, invece di affollare la barra principale.

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Un layout del menu dell’intestazione che appare equilibrato su un monitor desktop può rompersi facilmente su uno smartphone. Poiché lo spazio mobile è limitato, i temi gestiscono la navigazione mobile con layout responsive dedicati.

Figura 2: Illustrazione concettuale (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Nelle impostazioni di Intestazione di Dawn, i commercianti possono utilizzare il controllo Mobile logo position:

• Center: Centra il logo nella barra dell’intestazione mobile.
• Left: Allinea il logo a sinistra nella barra dell’intestazione mobile.

Le etichette cambiano da tema a tema. Ad esempio, nei temi di terze parti come Stiletto, il menu mobile usa le impostazioni della sezione Header. In molti temi, i link di navigazione mobile si raccolgono in un drawer laterale che si apre toccando l’icona hamburger.

Affidarsi del tutto a un drawer hamburger nascosto ha però un costo. La ricerca del Nielsen Norman Group del 2016 ha rilevato che la scopribilità si riduce quasi della metà nascondendo la navigazione principale di un sito.

I drawer nascosti restano utili per i cataloghi ampi, ma puoi anche tenere visibili alcune pagine chiave con una barra di tab fissa in basso (ad esempio Home, Shop, Search e Cart), a portata di pollice, lasciando le categorie più profonde al drawer. Per configurare strutture di link indipendenti per dispositivo, consulta il nostro tutorial su creare menu distinti per desktop e mobile.

When Your Theme Runs Out of Options: Code Edits vs a Menu App

Prima o poi, ogni commerciante incontra i limiti del personalizzatore del tema: desiderare cinque colonne invece di quattro nel mega menu, un menu diviso ai lati di un logo centrale o banner promozionali all’interno del cassetto mobile. Di fronte a questo scenario si pongono due strade: modificare il codice Liquid o installare un’applicazione specializzata.

Before you edit code: duplicate the theme

Se decidi di intervenire direttamente sui file del tema (come sections/header.liquid o i fogli di stile CSS), non lavorare mai sul tema pubblicato online. La documentazione di Shopify raccomanda vivamente di creare una copia di backup, in modo da poter annullare le modifiche e ripartire da capo in caso di errori.

Come duplicare il tema in sicurezza:

1. Nel pannello Shopify, vai su Negozio online > Temi.
2. Individua il tema attuale, apri il suo menu azioni e seleziona Duplicate.
3. Rinomina la copia specificando che si tratta di una versione di test per modifiche al codice.
4. Esegui e verifica tutte le modifiche esclusivamente su tale copia prima di pubblicarla.

The hidden cost of custom theme edits

Modificare direttamente il codice comporta manutenzione continua. La documentazione Shopify avverte che, quando aggiorni un tema, le tue modifiche al codice possono essere rimosse nella copia aggiornata. Se riscrivi header.liquid per cambiare allineamento, media query CSS o animazioni del drawer, prevedi di verificare e riapplicare quelle modifiche dopo ogni aggiornamento del tema.

Se le tue esigenze di layout vanno oltre le impostazioni native, puoi valutare un tema pensato per una navigazione più complessa, oppure un’app che lavori insieme al tuo tema.

Common Header Menu Problems and Fixes

Durante la regolazione dell’intestazione, piccoli disallineamenti di configurazione possono rendere invisibili i link. Usa questa tabella di diagnosi per risolvere gli intoppi più comuni:

Trade-offs: When Not to Change Your Header Layout

Riorganizzare l’intestazione non è sempre la scelta strategica migliore. Prima di modificare menu o impostare pannelli a più colonne, considera questi compromessi pratici:

• Un catalogo piccolo non richiede un mega menu: se il tuo negozio ha poche categorie semplici, un ampio pannello mega menu può lasciare più spazio del necessario. Spesso bastano un menu a discesa a colonna singola o una riga piatta di link.
• Un drawer su desktop riduce la visibilità della navigazione: scegliere Drawer su desktop dà un aspetto pulito, ma la ricerca NN/g del 2016 ha rilevato che nascondere la navigazione principale riduce quasi della metà la scopribilità. Riservalo ai negozi in cui la scoperta passa dallo storytelling sulla pagina.
• Le modifiche Liquid personalizzate generano lavoro a ogni aggiornamento: secondo la documentazione Shopify, le modifiche a header.liquid o al CSS personalizzato possono andare perse quando aggiorni il tema. Se nessuno può mantenerle tra le versioni, preferisci le impostazioni standard del tema o un’app.
• Ogni app aggiunta richiede manutenzione: Introdurre un’app esterna aggiunge un ulteriore pannello di configurazione da monitorare. Utilizza strumenti aggiuntivi solo se le funzioni native del tema non riescono a supportare il tuo catalogo.

Where Navi+ Fits

Quando le opzioni di intestazione del tuo tema raggiungono il limite, Navi+ è un modo per aggiungere funzioni di navigazione accanto al tema.

Crei il menu nell’app Navi+ e lo attivi come app embed nell’editor del tema. Il menu viene disegnato nel browser accanto all’intestazione del tuo tema, quindi non devi modificare header.liquid:

• Desktop Mega Menu: mostra un menu a discesa ricco con colonne, immagini e link in evidenza.
• Mobile Menu: un menu mobile a scorrimento che mostra tutta la navigazione senza lasciare la pagina.
• Tab Bar: una barra di tab fissa in basso per mobile che tiene alcune destinazioni chiave a portata di pollice.

Anche i menu Navi+ arrivano fino a tre livelli. Per decidere quale tipo di menu si adatta al tuo catalogo, consulta la nostra guida: come scegliere il giusto tipo di menu in Shopify.

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

Utilizza questa lista di controllo in 8 punti operativi per pianificare, configurare e verificare il layout del menu dell’intestazione:

• Duplicare il tema: Crea una copia di sicurezza in Negozio online > Temi prima di modificare la disposizione dell’intestazione.
• Configurare l’allineamento del logo: In Personalizza > Intestazione, imposta la Logo position desiderata (es. Top center o Middle left in Dawn; le etichette variano in base al tema).
• Costruire la gerarchia dei link: In Contenuto > Menu, organizza i percorsi tramite trascinamento rientrato (massimo 2 livelli annidati sotto un elemento di primo livello).
• Assegnare il menu all’intestazione: Verifica sotto Intestazione > Menu che la sezione sia collegata alla lista desiderata.
• Selezionare il tipo di menu desktop: Scegli Dropdown, Mega menu o Drawer in base alla vastità del catalogo.
• Verificare l’allineamento su mobile: Controlla l’aspetto su smartphone e regola Mobile logo position (Center o Left).
• Valutare l’ergonomia al tocco: Testa il cassetto mobile su un telefono reale e valuta se una barra fissa inferiore può migliorare l’accesso alle pagine chiave.
• Controllare i breakpoint di visualizzazione: Verifica su desktop, laptop e tablet per accertarti che i link non vadano a capo in modo disordinato né coprano il logo.

FAQ

How many levels can a Shopify header menu have?

Un elemento di primo livello in un menu Shopify può contenere fino a due livelli di menu a discesa annidati al di sotto, per una gerarchia complessiva massima di tre livelli.

How do I make a dropdown in the Shopify header?

Nel pannello di amministrazione Shopify, vai su Contenuto > Menu, seleziona la lista, trascina gli elementi secondari verso destra sotto un elemento genitore per creare il rientro e salva.

How do I put the logo in the center with the menu below?

Nel tema Dawn, apri la sezione Intestazione e imposta Logo position su Top center. Questa opzione centra il logo e dispone il menu orizzontale subito sotto. (Le etichette differiscono negli altri temi).

Can I show menu links in the header instead of a dropdown?

Sì. I temi Shopify mostrano automaticamente come menu a discesa qualsiasi voce con link annidati. Per mostrare i link direttamente sulla barra orizzontale, sposta tutte le voci al livello principale in Contenuto > Menu.

Can I change the menu layout only on mobile?

Sì. Dawn offre l’impostazione specifica Mobile logo position (Center o Left) nella sezione Intestazione. Il menu mobile condivide solitamente la lista desktop all’interno di un cassetto laterale, ma alcuni temi offrono controlli mobile dedicati nell’Intestazione.

Should I edit header.liquid?

Modifica header.liquid solo dopo aver creato una copia di backup del tema. Tieni presente che le tue modifiche al codice possono essere rimosse quando aggiorni a una versione più recente del tema.

Sources

• Shopify Help Center: Drop-down menus — Documentazione ufficiale sui limiti di annidamento, assegnazione dell’intestazione e gestione in Contenuto > Menu.
• Shopify Help Center: Duplicating themes — Linee guida ufficiali che consigliano di effettuare copie di backup prima di modificare i file del tema.
• Shopify Help Center: Editing theme code — Avviso ufficiale sulla rimozione delle modifiche personalizzate durante gli aggiornamenti del tema.
• Shopify Dawn GitHub Repository: en.default.schema.json — Schema dei controlli nativi del tema comprendente Logo position, Menu type e Mobile logo position.
• Shopify Dawn GitHub Repository: sections/header.liquid — File di codice sorgente che implementa i tipi di menu per computer e le condizioni dei cassetti laterali.
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Ricerca di usabilità sui benefici dei mega menu per organizzare ampie selezioni di categorie.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Studio che dimostra come nascondere la navigazione principale dimezzi quasi la reperibilità delle categorie.
• Fluorescent Theme Documentation: Stiletto Header — Documentazione di riferimento che mostra la configurazione dell’intestazione desktop e mobile in temi terzi.
• Shopify Community: How to change header-menu layout Sense theme — Discussione tra commercianti sulla visualizzazione orizzontale diretta di link senza menu a discesa.