Mega menu

Link in evidenza

1. Documentazione di Shopify sulle sezioni e i blocchi
2. Documentazione di Company XYZ sul blocco mega menu
3. Documentazione di Company XYZ sull’uso dei video
4. Documentazione di Company XYZ sulle icone
5. Documentazione di Company XYZ sulle impostazioni dei colori del banner
6. Documentazione di Shopify sull’editor del tema
7. Documentazione di Company XYZ sulle impostazioni di visibilità

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate questo blocco per trasformare una voce di navigazione di primo livello in un ampio menu a discesa con link raggruppati e contenuti promozionali opzionali. È adatto quando il vostro header deve mostrare molte destinazioni senza sembrare affollato, e potete aggiungere più blocchi Mega menu per creare un sistema di navigazione più ampio. Per una panoramica più completa della struttura del tema, consultate la documentazione Shopify su sezioni e blocchi. Consultate il riferimento Mega menu per ulteriori indicazioni di configurazione.

Nota

Su mobile, i blocchi Menu e Mega menu vengono combinati in un’unica interfaccia di navigazione. Rivedete la navigazione mobile completa dopo aver aggiunto o rinominato i blocchi, in modo che il risultato combinato resti chiaro.

Impostazioni principali

Le impostazioni principali definiscono l’etichetta di primo livello, il menu che apre e se vengono visualizzati elementi di navigazione aggiuntivi o contenuti promozionali.

Impostate il Title sull’etichetta che i clienti devono vedere nell’header, quindi scegliete il Menu che deve aprirsi da quella voce. Potete anche attivare un banner, una barra delle funzionalità e pulsanti “view all” per i sottomenu quando volete che il menu a discesa indirizzi gli acquirenti verso pagine di categoria più ampie anziché solo verso link più profondi.

Consiglio

I pulsanti “view all” funzionano meglio quando i sottomenu rappresentano categorie principali o campagne. Offrono ai clienti un percorso chiaro verso la destinazione padre senza imporre prima una scelta troppo specifica.

Impostazioni di allineamento

Queste impostazioni regolano con precisione come il contenuto si posiziona nello spazio disponibile su desktop. Sono più importanti quando il blocco è esteso su una larghezza maggiore o usa un layout più ampio.

Se le modifiche all’allineamento sembrano minime, controllate prima le impostazioni di layout. Le scelte di layout determinano quanto spazio ottiene il blocco, mentre l’allineamento in genere agisce come regolazione secondaria all’interno di quello spazio.

Impostazioni di layout

Le impostazioni di layout controllano quanto spazio orizzontale occupa il blocco nell’header e dove si trova su desktop.

Usate Fill available space quando volete che questo blocco si espanda e aiuti a bilanciare la riga dell’header. Scegliete il layout desktop che meglio corrisponde alla struttura complessiva del vostro header, soprattutto se volete che questa voce di navigazione sembri più centrata o occupi più larghezza.

Rivedete insieme layout e allineamento. Un layout a tutta larghezza o esteso può modificare l’equilibrio visivo dell’intero header, non solo di questo blocco.

Sfondo del banner

Se attivate il banner, questo gruppo controlla il media visualizzato dietro di esso. Potete usare un’immagine o un video, oltre a media separati per mobile quando l’asset desktop non si ritaglia o non si adatta bene su schermi più piccoli.

Usate Cover per immagini immersive e Contain quando l’immagine completa deve rimanere visibile. Mantenete gli sfondi del banner abbastanza semplici da rendere comunque la navigazione facile da consultare.

Per indicazioni sulla configurazione video, consultate using video.

Attenzione

Media di sfondo pesanti o troppo ricchi di elementi possono rendere la navigazione più difficile da usare. Se il banner compete con i link, semplificate il media o rafforzate l’overlay.

Primo piano del banner

Questo gruppo controlla il contenuto sovrapposto allo sfondo del banner, inclusi testo, icone e il pulsante principale. Eventuali campi lasciati vuoti semplicemente non vengono mostrati, quindi è facile mantenere il banner minimale.

Usate i controlli di allineamento per posizionare il contenuto nel punto in cui si legge meglio sopra il media scelto. Titoli brevi e testo di supporto conciso di solito funzionano meglio qui rispetto a testi promozionali lunghi.

Potete aggiungere un’emoji o un nome di icona supportato per i campi icona e icona del pulsante. Per aiuto sulla denominazione, consultate la guida alle icone.

Scegliete uno stile e un layout del pulsante che supportino il banner senza dominarlo. Se usate uno stile di link a tutto blocco, i link all’interno del sottotitolo vengono rimossi, quindi questa opzione è ideale quando l’intero banner deve funzionare come un’unica destinazione chiara.

Considerate il banner come un rapido supporto promozionale, non come un secondo sistema di navigazione. Se aggiungete un messaggio forte e un pulsante, mantenete particolarmente pulita la struttura del menu circostante.

Media del primo piano del banner

Questo gruppo aggiunge un’immagine sopra l’area del contenuto del banner, separata dallo sfondo. È utile per loghi, sagome di prodotto o piccole illustrazioni di supporto.

Regolate lo stile dell’immagine e la larghezza massima in modo che il media supporti il messaggio senza sovrastarlo. Il media del primo piano a tutta larghezza può funzionare, ma richiede maggiore attenzione in un contesto di navigazione perché può dominare rapidamente il menu a discesa.

Se aggiungete un link al media, assicuratevi che non entri in competizione con il pulsante principale o con il comportamento di link a tutto blocco del banner.

Colori del banner

Queste impostazioni sostituiscono solo per questo blocco le scelte di colore del banner più ampie. Usatele quando questo mega menu necessita del proprio stile promozionale o quando il media selezionato richiede un supporto di contrasto più forte.

Le impostazioni dell’overlay sono spesso il punto di partenza più utile, poiché un overlay migliore può migliorare la leggibilità senza costringervi a ricolorare ogni elemento di testo. Per ulteriori indicazioni, consultate Impostazioni colore banner.

Impostazioni standard del blocco

Impostazioni di visibilità

Usate i controlli di visibilità per mostrare questo blocco su desktop, mobile o entrambi. Questo è particolarmente utile quando create diversi modelli di navigazione per diverse dimensioni dello schermo.

Poiché su mobile gli stili di menu vengono combinati in un’unica interfaccia, assicuratevi che eventuali scelte di visibilità specifiche per dispositivo lascino comunque ai clienti un insieme completo e comprensibile di percorsi di navigazione. Per i dettagli di configurazione specifici dell’editor, consultate la documentazione Shopify sull’editor del tema. Ulteriori dettagli sono disponibili in Impostazioni di visibilità.

Note sull’uso

1. Mantenete le etichette familiari. Usate titoli brevi e chiari di primo livello, così i clienti possono prevedere che tipo di link contiene ogni menu a discesa.
2. Controllate entrambe le visualizzazioni. Rivedete i risultati su desktop e mobile dopo aver modificato layout, allineamento, visibilità o media, perché ciascuno può comportarsi in modo diverso.
3. Usate intenzionalmente lo stile di fallback. I colori vuoti o predefiniti in genere preservano il design circostante, mentre colori espliciti, sfumature o media rendono il blocco più indipendente.
4. Proteggete la leggibilità. Quando usate sfondi con immagini o video, regolate overlay, colori e lunghezza del testo in modo che link e inviti all’azione restino facili da leggere.
5. Limitate i clic in competizione. Se il banner include un pulsante, media linkati o collegamenti a tutto blocco, assicuratevi che resti comunque un’unica azione principale evidente.