Barra annunci

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Company XYZ sul blocco Button
3. Documentazione Company XYZ sul blocco Icon with text
4. Documentazione Company XYZ sul blocco Localization selectors
5. Documentazione Company XYZ sul blocco Main menu
6. Documentazione Company XYZ sul blocco Social media icons
7. Documentazione Company XYZ sulle impostazioni dello sfondo della sezione
8. Documentazione Company XYZ sulle impostazioni di padding della sezione
9. Documentazione Company XYZ sulle impostazioni dei separatori
10. Documentazione Company XYZ sulle impostazioni di visibilità
11. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video della Shopify Academy: come modificare una barra degli annunci in Shopify Online Store 2.0 || Shopify Help Center

Video della Shopify Academy: come modificare una barra degli annunci in Shopify Online Store 2.0 || Shopify Help Center

Usa Announcement bar per inserire un messaggio compatto e un’area di utilità sopra l’header principale. Può mostrare un semplice annuncio con un link e un menu, oppure una combinazione più flessibile di blocchi come pulsanti, menu, selettori di localizzazione, rich text e icone social. Per una panoramica più ampia dei layout del tema, vedi documentazione Shopify sulle sezioni e i blocchi

Per impostazione predefinita, la sezione usa il testo dell’annuncio, il link e il menu nelle impostazioni principali della sezione. Se aggiungi blocchi, il layout dei blocchi prende il sopravvento, così puoi organizzare la barra in modo più preciso.

L’aggiunta di blocchi sostituisce il testo dell’annuncio predefinito e l’output del menu dalle impostazioni della sezione. Usa un approccio o l’altro per evitare confusione durante la configurazione della barra.

Impostazioni principali

Usa le impostazioni principali per una barra superiore semplice senza creare un layout personalizzato. È l’opzione più rapida quando ti serve solo un breve messaggio promozionale, un link facoltativo e un semplice menu di utilità.

Mantieni breve il testo dell’annuncio in modo che resti leggibile su tutti i dispositivi. Se ti servono più tipi di contenuto, zone di allineamento diverse o layout specifici per dispositivo, passa ai blocchi invece di cercare di far rientrare tutto nella configurazione predefinita.

Impostazioni colore

Usa questi controlli colore della sezione per sostituire i colori più ampi del tema per il testo e le icone della barra annunci. È utile quando la barra deve risaltare per una promozione, un avviso o una campagna stagionale.

Se usi anche uno sfondo personalizzato, controlla attentamente il contrasto. La leggibilità è più importante dell’aspetto decorativo, perché questa barra deve essere letta rapidamente.

Tipi di blocco supportati

1. Button
2. Icon with text
3. Localization selectors
4. Main menu
5. Rich text
6. Social media icons

La maggior parte dei blocchi in questa sezione include anche controlli propri di layout, allineamento e visibilità. Usa queste impostazioni per posizionare gli elementi a sinistra, al centro, a destra o su una riga propria, e per semplificare la barra su schermi più piccoli.

Pulsante

Usa il blocco Button per un’azione chiara come una pagina di vendita, un link di registrazione o una pagina di supporto. Vedi Pulsante.

Gli stili di pulsante più piccoli di solito si adattano meglio a questa sezione. Se la barra contiene già più elementi, evita stili di pulsante sovradimensionati che possono far sembrare l’area dell’header troppo affollata.

Icona con testo

Usa questo blocco per brevi messaggi come spedizione gratuita, resi semplici o offerte a tempo limitato. Vedi Icona con testo.

Mantieni il messaggio breve e diretto. Questo blocco è più efficace quando rafforza a colpo d’occhio un vantaggio chiave.

Selettori di localizzazione

Usa questo blocco per mostrare i selettori di paese, valuta e lingua nella barra superiore. Vedi Selettori di localizzazione.

Questo blocco richiede una configurazione di localizzazione di supporto prima di diventare utile. Su mobile, lo stile con campo piccolo può far andare i selettori su una nuova riga, quindi visualizza sempre l’anteprima della barra su schermi più piccoli dopo aver modificato gli stili dei selettori.

Menu principale

Usa il blocco Main menu per aggiungere navigazione secondaria come Contatti, FAQ, Tracciamento ordine o link alle policy. Vedi Menu principale.

Puoi aggiungere fino a due blocchi menu se desideri gruppi di link separati. Questa soluzione funziona bene quando ti serve una navigazione di utilità su un lato e link promozionali o relativi all’account sull’altro.

Testo ricco

Usa il blocco Rich text quando ti serve più formattazione di quella consentita dal testo dell’annuncio predefinito. Supporta testo formattato e link inline per messaggi più espressivi.

Usalo con moderazione in questa sezione. Testi lunghi o contenuti molto formattati possono far sembrare la barra occupata molto rapidamente.

Icone dei social media

Usa questo blocco per mostrare gli account social già configurati nelle impostazioni del tema. Vedi Icone dei social media.

Puoi mostrare tutte le reti configurate oppure scegliere un insieme più ridotto. Le icone piene sono di solito le più facili da leggere in una barra superiore compatta, mentre lo stile solo testo è più adatto a layout più minimalisti.

Impostazioni standard della sezione

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione controllano lo sfondo della barra, incluse le opzioni colore, gradiente, immagine, video e overlay. Usale per separare visivamente la barra dall’header o per supportare uno stile specifico della campagna.

Poiché questa sezione è poco alta, gli sfondi discreti di solito funzionano meglio dei media dettagliati. Se usi un’immagine o un video, gli overlay possono aiutare a preservare la leggibilità del testo.

Impostazioni di padding

Impostazioni di padding controllano lo spazio verticale sopra e sotto il contenuto della barra. Piccole modifiche qui possono influire sensibilmente su quanto la barra appare prominente.

Usa un padding più ridotto per layout con molti elementi di utilità e un po’ più di padding quando la barra include pulsanti o più righe. Controlla sia desktop sia mobile per evitare che la barra diventi più alta del previsto.

Impostazioni dei separatori

Impostazioni dei separatori ti permettono di aggiungere una linea sopra o sotto la barra. È utile quando la barra è vicina all’header e ha bisogno di un confine visivo più chiaro.

Se la barra e l’header usano colori simili, un separatore può rendere il layout più facile da leggere. Un colore trasparente del separatore passa al colore del bordo più ampio.

Impostazioni di visibilità

Impostazioni di visibilità controllano se l’intera barra appare su desktop, mobile o entrambi. È utile quando desideri una barra di utilità più completa sugli schermi grandi ma un’area header più semplice sui telefoni.

Puoi combinare la visibilità della sezione con la visibilità a livello di blocco per creare mix di contenuti specifici per dispositivo senza duplicare l’intera configurazione.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza complessiva della sezione. In questa sezione, la larghezza del contenuto influisce su quanto gli elementi si raggruppano tra loro, mentre la larghezza della sezione conta soprattutto quando usi uno stile di sfondo.

L’editor potrebbe non mostrare sempre con precisione le modifiche alla larghezza, quindi visualizza l’anteprima nella vetrina live quando affini il layout. Una larghezza del contenuto più stretta può rendere i contenuti di utilità più facili da leggere, mentre una sezione più larga o full-bleed funziona bene per trattamenti di sfondo più marcati.

Note sull’uso

1. Scegli un solo metodo di contenuto. Usa il testo e il menu predefiniti per una barra semplice, oppure aggiungi blocchi per un layout personalizzato, poiché i blocchi sostituiscono il contenuto predefinito.
2. Rivedi entrambe le aree di visualizzazione. I controlli per desktop e mobile possono modificare allineamento, spaziatura, visibilità e ritorno a capo, quindi controlla entrambe le dimensioni dopo aver regolato la barra.
3. Fai attenzione alle sostituzioni dello sfondo. Valori vuoti o con stile predefinito di solito mantengono lo stile di fallback, mentre colori, gradienti o media espliciti rendono la barra più indipendente dal resto dell’header.
4. Tratta i media con cautela. Se usi media diversi per desktop e mobile, controlla ritaglio, caricamento e leggibilità in modo che la barra resti chiara su entrambi i dispositivi.
5. Rendi intenzionale la navigazione. I blocchi menu possono influenzare il percorso del cliente, quindi link nascosti, riordinati o solo mobile dovrebbero essere verificati per raggiungibilità e chiarezza.
6. Usa la barra per contenuti di utilità. Riserva questo spazio a avvisi ad alta priorità, link rapidi e navigazione leggera invece di ripetere il contenuto principale dell’header.