Navigazione principale

Link in evidenza

1. Documentazione di Company XYZ sul blocco del menu hamburger
2. Documentazione di Company XYZ sul blocco del logo
3. Documentazione di Company XYZ sul blocco del menu principale
4. Documentazione di Company XYZ sul blocco del mega menu
5. Documentazione di Company XYZ sul blocco di ricerca
6. Documentazione di Company XYZ sul blocco dell’icona dell’account
7. Documentazione di Company XYZ sul blocco del carrello
8. Documentazione di Company XYZ sul blocco del pulsante
9. Documentazione di Company XYZ sul blocco dei selettori di localizzazione
10. Documentazione di Company XYZ sul blocco dell’icona con testo
11. Documentazione di Company XYZ sul blocco Rich text
12. Documentazione di Company XYZ sul blocco delle icone dei social media
13. Documentazione di Company XYZ sulle impostazioni degli sfondi della sezione
14. Documentazione di Company XYZ sulle impostazioni del padding della sezione
15. Documentazione di Company XYZ sulle impostazioni dei separatori
16. Documentazione di Company XYZ sulle impostazioni di visibilità
17. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout
18. Documentazione di Shopify su sezioni e blocchi
19. Documentazione di Shopify sulla personalizzazione delle sezioni
20. Documentazione di Shopify sull’editor del tema

Video utili

Video di Learn With Shopify: best practice per il menu di navigazione di Shopify

Video di Learn With Shopify: best practice per il menu di navigazione di Shopify

Video di Learn With Shopify: il menu di navigazione di Shopify spiegato in 50 secondi

Video di Learn With Shopify: il menu di navigazione di Shopify spiegato in 50 secondi

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Costruisci la navigazione principale combinando i blocchi di menu, branding, ricerca e utilità nell’ordine in cui vuoi che appaiano. L’ordine dei blocchi definisce il layout complessivo, mentre i singoli blocchi possono comunque essere posizionati in modo diverso su desktop e mobile per un controllo più preciso. Per una panoramica più ampia su come funzionano le sezioni e i blocchi del tema, consulta la documentazione Shopify su sezioni e blocchi

Impostazioni di base

Queste impostazioni influenzano il modo in cui i visitatori interagiscono con la navigazione nell’intera sezione.

Interazione del menu

Scegli se i sottomenu si aprono con un clic o al passaggio del mouse. Il clic è in genere l’opzione più sicura quando vuoi un’interazione più intenzionale, mentre il passaggio del mouse può sembrare più rapido sui dispositivi con puntatore.

Se la navigazione include strutture di menu più profonde o contenuti promozionali nel menu a discesa, l’apertura con clic è in genere più facile da controllare e meno soggetta a cambiamenti accidentali del menu.

Stato predefinito del menu mobile

Puoi mostrare aperta per impostazione predefinita la prima voce del menu mobile. Questa opzione funziona bene quando la prima voce di primo livello rimanda a una categoria o a una collezione ad alta priorità, ma può sembrare affollata se quella prima voce contiene troppi link.

Impostazioni di colore

Queste impostazioni sostituiscono le scelte di colore del tema più ampie per il testo e le icone della navigazione all’interno di questa sezione. Sono particolarmente utili quando la navigazione si trova su uno sfondo personalizzato o necessita di un contrasto più forte rispetto a quello fornito dallo stile predefinito.

Consiglio

Dopo aver modificato i colori della navigazione, controlla sia lo stato desktop sia quello mobile per assicurarti che link, icone e trigger dei menu a discesa rimangano facili da leggere.

Tipi di blocco supportati

1. Icona account
2. Pulsante
3. Carrello
4. Menu hamburger
5. Icona con testo
6. Selettori di localizzazione
7. Logo
8. Menu principale
9. Mega menu
10. Ricerca
11. Rich text
12. Icone social media

Layout dei blocchi e comportamento condiviso dei blocchi

La maggior parte dei blocchi di questa sezione usa la stessa logica di posizionamento. La loro impostazione di layout decide se si trovano nel gruppo sinistro, centrale o destro della riga principale, e l’ordine dei blocchi controlla l’ordine all’interno di ciascun gruppo. Alcuni blocchi possono anche spostarsi in una riga separata a tutta larghezza.

Le impostazioni di allineamento sono in genere secondarie. Sono più importanti quando un blocco occupa tutto lo spazio disponibile o si trova in una riga a tutta larghezza.

Layout desktop e mobile

Molti blocchi consentono di scegliere posizioni diverse per desktop e mobile. Questa opzione è utile quando desideri un header desktop più completo ma un layout mobile più essenziale che dia priorità al menu hamburger, al logo, alla ricerca e al carrello.

Riempire lo spazio disponibile

Alcuni blocchi possono estendersi per occupare lo spazio residuo nella riga desktop. Questa soluzione funziona meglio per blocchi come il logo, i menu o la ricerca quando vuoi che ancorino il layout e spingano verso l’esterno le altre azioni.

Visibilità del blocco

Molti blocchi includono i propri controlli di visibilità. Usali quando vuoi che un elemento di utilità appaia in modo diverso in base al dispositivo senza duplicare l’intera sezione.

Tipi di blocco principali

Menu hamburger

Il blocco Menu hamburger è il trigger mobile per la navigazione. È necessario affinché la navigazione principale funzioni su mobile, quindi va considerato essenziale e non opzionale.

Mantienilo in una posizione chiara e prevedibile su mobile, in genere sul lato sinistro o accanto al logo. Evita di nasconderlo su mobile a meno che non ci sia un altro modo chiaro per consentire ai visitatori di aprire la navigazione.

Rimuovere o nascondere il blocco Menu hamburger su mobile può lasciare i visitatori senza un modo pratico per aprire la navigazione principale.

Logo

Il blocco Logo mostra il marchio e, se non è impostata alcuna immagine del logo, usa in fallback il nome del negozio. I controlli separati della larghezza per desktop e mobile ti aiutano a mantenere visibile il brand senza affollare gli schermi più piccoli.

In genere, un logo mobile compatto offre il risultato più pulito. Se lasci che il logo si estenda troppo, può spingere fuori visualizzazione le azioni più importanti.

Menu principale e mega menu

Usa il blocco Menu principale per la navigazione standard a discesa e il blocco Mega menu quando ti serve un flyout più ampio e più editoriale. Su mobile, tutti i blocchi Menu principale e Mega menu vengono combinati in un’unica interfaccia di navigazione.

Entrambi i tipi di blocco possono includere un banner e una barra delle caratteristiche, il che li rende utili sia per il merchandising sia per la navigazione. Il Mega menu aggiunge inoltre un controllo più forte per la navigazione strutturata, compresi i link facoltativi “vedi tutto” a livello padre all’interno dei sottomenu.

Banner e contenuto promozionale

I blocchi menu e mega menu possono includere media di sfondo, contenuto in primo piano, pulsante e immagine di supporto propri. Usali per campagne stagionali, collezioni in evidenza o percorsi cliente chiave che meritano maggiore enfasi.

Attenzione

Il contenuto promozionale può migliorare la scoperta, ma se è troppo all’interno della navigazione può rendere la consultazione più lenta e meno chiara.

Comportamento su mobile

Poiché più blocchi basati sul menu si uniscono in un’unica interfaccia mobile, considera desktop e mobile come esperienze correlate ma diverse. Mantieni chiare le etichette delle categorie e verifica il risultato mobile combinato se suddividi la navigazione desktop su più blocchi menu.

Ricerca

Il blocco Ricerca aggiunge la ricerca sull’intero store alla navigazione. Puoi mostrarlo come trigger solo icona o come piccolo campo, con un comportamento mobile separato per risparmiare spazio.

Se i risultati predittivi sono abilitati, puoi anche definire menu di risultati predefiniti e secondari oltre a contenuti promozionali facoltativi. Questo rende la ricerca più utile per la scoperta, non solo per le query dirette.

Nota

I risultati predittivi si applicano solo quando la ricerca predittiva è attiva, e la nota del blocco indica che per i risultati in tempo reale è necessaria una configurazione aggiuntiva.

Blocchi di utilità e azione

Questi blocchi aggiungono azioni di supporto comuni attorno alla navigazione principale.

1. Icona account per l’accesso all’account e l’accesso all’account
2. Carrello per accedere al carrello, con sostituzioni di colore facoltative
3. Pulsante per un’azione evidenziata, come una promozione o un punto di ingresso speciale
4. Selettori di localizzazione per cambiare paese, valuta e lingua

Per gli header compatti, in genere funzionano meglio controlli più piccoli o solo icona. Quando questi blocchi competono per lo spazio con menu e logo, usa layout specifici per mobile o la visibilità dei blocchi per semplificare l’esperienza sugli schermi più piccoli.

Blocchi informativi e social

Questi blocchi sono utili quando la navigazione funge anche da barra di utilità o di messaggistica.

1. Icona con testo per brevi punti di vendita o segnali di fiducia
2. Testo ricco per contenuti brevi e formattati
3. Icone social media per i link social degli account configurati

Usali con parsimonia nella navigazione principale. Funzionano meglio in una riga secondaria o in un layout a tutta larghezza, dove supportano l’header senza competere con i percorsi di navigazione principali.

Impostazioni standard della sezione

Impostazioni dello sfondo sezione

Usa le Impostazioni dello sfondo sezione per aggiungere un colore, un gradiente, un’immagine o un video dietro la navigazione. Queste impostazioni possono creare un header più in linea con il brand, ma possono anche modificare la spaziatura percepita e il peso visivo della parte superiore della pagina.

I controlli di overlay aiutano a mantenere leggibile il testo sopra gli sfondi multimediali. Se usi media di sfondo diversi su mobile, controlla con attenzione entrambe le interruzioni di layout perché la navigazione è un’area molto usata. Se stai modificando queste impostazioni nell’editor, la documentazione Shopify sulla personalizzazione delle sezioni spiega come vengono modificate le impostazioni della sezione nell’editor del tema.

Impostazioni di padding

Usa le Impostazioni di padding per controllare lo spazio sopra e sotto il contenuto della navigazione. Piccole modifiche qui possono rendere l’header più compatto o più spazioso.

Poiché questa sezione appare in tutto il sito, in genere un padding moderato è più facile da mantenere in modo coerente. Il padding predefinito è leggero, il che rappresenta un punto di partenza pratico a meno che il logo o la combinazione di blocchi non richiedano più spazio.

Impostazioni dei separatori

Usa le Impostazioni dei separatori per aggiungere una linea superiore o inferiore alla navigazione. Questa opzione è utile quando vuoi un confine più pulito tra l’header e il contenuto circostante senza usare un trattamento di sfondo completo.

Se il colore del separatore viene lasciato trasparente, la sezione usa l’impostazione del colore del bordo più ampia. Imposta un colore del separatore personalizzato solo quando il colore del bordo predefinito non offre abbastanza contrasto.

Impostazioni di visibilità

Usa le Impostazioni di visibilità per mostrare o nascondere l’intera sezione in base al tipo di dispositivo. Questa opzione è particolarmente utile quando vuoi pattern di header separati per desktop e mobile.

Usa la visibilità a livello di blocco quando devono cambiare solo alcuni elementi. Usa la visibilità a livello di sezione quando l’intera struttura di navigazione deve essere sostituita in un determinato intervallo di dispositivi.

Impostazioni di larghezza

Usa le Impostazioni di larghezza per controllare sia la larghezza del contenuto sia la larghezza complessiva del contenitore della sezione. Questo è particolarmente importante quando la navigazione include sfondi, layout di menu ampi o righe a tutta larghezza.

La larghezza del contenuto è il controllo principale per quanto possono estendersi gli elementi di navigazione, mentre la larghezza della sezione è più importante quando la sezione ha un proprio trattamento di sfondo. L’editor può rappresentare in modo impreciso le modifiche di larghezza, quindi controlla la vetrina live prima di finalizzare. Per una rapida panoramica dei controlli disponibili nell’editor, consulta la documentazione Shopify sull’editor del tema

Note sull’uso

1. Dai priorità all’accesso da mobile. Mantieni visibile e facilmente raggiungibile il blocco Menu hamburger, così i visitatori possono sempre aprire la navigazione sugli schermi più piccoli.
2. Progetta in base ai gruppi di layout. Usa prima il posizionamento dei blocchi a sinistra, al centro e a destra, poi perfeziona con l’ordine dei blocchi e le impostazioni di riempimento dello spazio invece di affidarti solo all’allineamento.
3. Mantieni i menu facili da scansionare. Se usi più blocchi basati sul menu, controlla il menu mobile combinato per assicurarti che le categorie restino chiare e non troppo frammentate.
4. Usa il contenuto promozionale con selettività. Aggiungi banner, pulsanti e messaggi con funzionalità solo quando supportano la navigazione invece di distrarla.
5. Controlla il risultato live. Verifica contrasto, spaziatura e larghezza nella vetrina dopo aver aggiunto sfondi, colori personalizzati o modifiche alla larghezza.
6. Rivedi entrambi gli stati della ricerca. Confronta lo stato vuoto della ricerca e l’esperienza con una query digitata, così risultati predittivi, contenuti predefiniti e elementi promozionali supportano tutti lo stesso percorso cliente.
7. Prova layout separati per dispositivo. Controlla desktop e mobile dopo aver modificato posizioni dei blocchi, visibilità o allineamento, poiché le due viste possono comportarsi in modo diverso.
8. Fai attenzione alle sostituzioni dei media. Quando aggiungi immagini di sfondo, video o media separati per desktop e mobile, verifica che ritaglio, aspetto di fallback e leggibilità funzionino ancora bene.