Vuoi condividere aggiornamenti, promozioni o messaggi importanti con ogni visitatore che arriva nel tuo negozio? 📢

Una barra di annuncio è uno dei modi più semplici per attirare l'attenzione senza interrompere l'esperienza di acquisto. Che si tratti di una vendita lampo, di un aggiornamento sulle spedizioni o di un invito all'iscrizione alla newsletter, una barra posizionata bene tiene i clienti informati dal momento in cui arrivano.

Questa guida ti accompagna nella configurazione completa, dalla creazione della tua prima barra alla messa in diretta sullo storefront 🚀

📍 Cosa Imparerai

Al termine di questa guida, saprai come:

• Creare una nuova barra di annuncio
• Scegliere il posizionamento e il tipo di barra giusti
• Aggiungere il tuo messaggio e call-to-action
• Applicare un design in linea con il tuo brand
• Impostare dove e quando apparirà
• Pubblicarla nel tuo negozio

✅ Prima di Iniziare

Assicurati che l'app embed (incorporamento dell'app) di Hoppy Announcement Bars & Banners sia abilitato nel tuo tema. Senza di esso, la barra non apparirà sullo storefront, per quanto sia configurata perfettamente.

Per abilitarlo:

1. Vai su Shopify Admin → Sales Channels → Online Store → Themes
2. Fai clic su Edit Theme (Modifica tema) sul tema attivo
3. Seleziona App Embeds (Incorporamenti app) dalla barra laterale sinistra
4. Trova Announcement Bar/Banner (Barra/Banner di annuncio)
5. Imposta l'interruttore su ON (Attivo)
6. Fai clic su Save (Salva)

💡 Già abilitato? Sei pronto per iniziare!

⚙️ Passaggio 1 — Crea una Nuova Barra di Annuncio

Apri l'app Hoppy Announcement Bars & Banners dal tuo Shopify admin.

Nella dashboard, fai clic su Create New Announcement (Crea nuova barra di annuncio).

Verrai indirizzato alla schermata di selezione del posizionamento.

📌 Passaggio 2 — Scegli un Posizionamento

Il posizionamento determina dove apparirà la tua barra di annuncio nel negozio.

Vedrai sei opzioni:

• Storefront Page (Pagina del negozio) — Appare sullo storefront principale (home, prodotti, collezioni, ecc.)
• Email Collection Bar (Barra di raccolta email) — Una barra focalizzata sulla raccolta di indirizzi email
• Cart Page (Pagina carrello) — Appare sulla pagina carrello dedicata
• Cart Drawer (Cassetto carrello) — Appare all'interno del cassetto carrello a scorrimento
• Checkout Page (Pagina di checkout) — Appare durante il checkout (solo Shopify Plus)
• Custom Position (Posizione personalizzata) — Posizionala manualmente su pagine di prodotti o collezioni specifiche

Seleziona quella più adatta al tuo obiettivo. Per la maggior parte dei merchant, Storefront Page è il punto di partenza migliore.

Una volta selezionata, fai clic su Continue (Continua).

🎨 Passaggio 3 — Scegli un Preset (o Parti da Zero)

Ora vedrai una raccolta di preset visivi — combinazioni predisegnate di colori, font e layout.

Puoi:

• Scegliere un preset per dare il via al design
• Oppure fare clic su Make your Own (Crea il tuo) per costruire tutto manualmente

Non preoccuparti: puoi modificare ogni dettaglio del design in seguito. I preset servono solo a farti risparmiare tempo ⏱️

Dopo aver selezionato un preset (o aver scelto di partire da zero), l'editor si aprirà automaticamente.

📝 Passaggio 4 — Aggiungi i Tuoi Contenuti

Ti troverai nella scheda Content (Contenuto). È qui che scrivi il tuo messaggio e scegli come si comporta la barra.

🏷️ Announcement Name (Nome della barra di annuncio)

Serve solo per tua referenza interna. I clienti non lo vedranno.

Usa un nome riconoscibile, ad esempio:

• Summer Sale Banner
• Free Shipping Alert
• Black Friday Header

💡 Una buona denominazione è utile quando hai più barre attive contemporaneamente.

📢 Announcement Type (Tipo di annuncio)

Controlla come viene visualizzato il messaggio. Ci sono quattro tipi:

Scegliere un Tipo

• Simple è perfetto per un messaggio chiaro, come Spedizione gratuita per ordini superiori a 50 $.
• Running è ideale per creare urgenza o vendite lampo. Quando selezionato, vedrai un cursore Animation Speed (Velocità animazione) e una casella di controllo per modificare la direzione di scorrimento.
• Multiple ti permette di alternare fino a 20 slide diverse. Quando selezionato, appare un cursore Display Duration (Durata visualizzazione) per controllare quanto a lungo ogni slide rimane visibile.
• Email trasforma la barra in uno strumento di lead generation. Quando selezionato, le opzioni CTA standard vengono sostituite dai campi Success Message (Messaggio di conferma) e Email Placeholder (Placeholder email).

💡 Puoi sempre tornare indietro e cambiare tipo in seguito.

✍️ Title & Subheading (Titolo e sottotitolo)

• Title (Titolo) — È il messaggio principale. Supporta la formattazione del testo (grassetto, corsivo, link, colori).
• Subheading (Sottotitolo) — Una riga di supporto più piccola sotto il titolo.

ℹ️ Il campo Subheading viene nascosto se selezioni il tipo Running, poiché le barre marquee di solito usano una sola riga di testo.

🔗 Call to Action (CTA) (Invito all'azione)

La tua CTA dice ai clienti cosa fare dopo.

Scegli una CTA Type (Tipo di CTA):

• No Call to Action (Nessun invito all'azione) — Nessun pulsante o link
• Button (Pulsante) — Un pulsante cliccabile con testo personalizzato e un link
• Make entire bar clickable (Rendi l'intera barra cliccabile) — L'intera barra diventa cliccabile
• Coupon (Buono sconto) — Mostra un codice coupon con un pulsante per copiarlo negli appunti
• Trigger App Event (Attiva evento app) — Attiva un evento personalizzato da usare con altre app

Se selezioni Button, Make entire bar clickable o Trigger App Event, vedrai i campi per il link o il testo del pulsante. Se selezioni Coupon, appare il campo Coupon Code (Codice coupon) insieme a una casella di controllo per mostrare un'icona di copia.

🚪 Close Icon (Icona di chiusura)

Abilitala se vuoi che i clienti possano chiudere la barra.

Quando è abilitata, appaiono due campi aggiuntivi:

• Appear again after (Ricompare dopo) — Quanto tempo deve passare prima che la barra ricompaia per quel visitatore
• Unit (Unità) — Ore o giorni

È utile se non vuoi infastidire i visitatori abituali con lo stesso messaggio.

🎭 Banner Icons (Icone del banner)

Le Banner Icons ti permettono di aggiungere icone social o di brand cliccabili direttamente all'interno della barra di annuncio per migliorare il coinvolgimento e offrire un accesso rapido a piattaforme esterne.

È particolarmente utile per promuovere profili social, community o link esterni importanti senza aggiungere testo superfluo alla barra.

📌 Maximum Icons Allowed (Numero massimo di icone consentite)

Puoi aggiungere fino a 6 Banner Icons all'interno di una singola configurazione di barra di annuncio.

Questo aiuta a mantenere un layout pulito ed equilibrato sia su desktop che su dispositivi mobili.

🖥️ Desktop & Mobile Visibility (Visibilità desktop e mobile)

Ogni icona può essere configurata per apparire su:

• Dispositivi desktop
• Dispositivi mobili
• Oppure su entrambi contemporaneamente

Questo ti offre maggiore flessibilità a seconda di come vuoi che la barra di annuncio appaia su diverse dimensioni dello schermo.

🔄 Replace Icon (Sostituisci icona)

Le icone possono essere sostituite in qualsiasi momento usando la Icon Library (Libreria icone) integrata.

Comportamenti Disponibili

• Sfoglia le icone disponibili nella Icon Library
• Sostituisci le icone esistenti istantaneamente
• Aggiorna le icone senza influenzare il resto della configurazione

⚠️ Importante:

I caricamenti di icone personalizzate non sono attualmente supportati. È possibile utilizzare solo le icone disponibili all'interno della Icon Library.

🔗 Call to Action (CTA) (Invito all'azione)

Ogni Banner Icon può includere facoltativamente il proprio comportamento di Call to Action.

Opzioni Disponibili

• Nessuna call to action
• Add Link (Aggiungi link)

➕ Add Link (Aggiungi link)

Quando è selezionato Add Link:

→ Appare il campo CTA Link (Link CTA)

Questo consente all'icona di reindirizzare i visitatori verso pagine esterne o interne.

Esempi di Utilizzo

• Profili social media
• Chat WhatsApp
• Community Discord
• Collezioni di prodotti
• Pagine di destinazione promozionali

⚠️ Note Importanti

• Ogni icona può avere il proprio comportamento CTA indipendente
• Alcune icone possono rimanere non cliccabili mentre altre reindirizzano i visitatori
• La rimozione di un'icona elimina solo quella specifica icona e non influisce sulle icone rimanenti
• La disposizione delle icone può influire sulla spaziatura e sulla visibilità su schermi mobili più piccoli

💡 Per la migliore esperienza sullo storefront, evita di sovraccaricare la barra di annuncio con troppe icone e link contemporaneamente.

🎨 Passaggio 5 — Scegli un Design

Fai clic sulla scheda Design per dare stile alla tua barra.

Per una configurazione rapida, concentrati su questi elementi essenziali:

• Template (Modello) — Scegli tra oltre 20 stili predefiniti o mantieni il tuo preset
• Visibility (Visibilità) — Scegli se apparire su Desktop and Mobile (Desktop e mobile), Desktop Only (Solo desktop) o Mobile Only (Solo mobile)
• Background (Sfondo) — Seleziona Single Color (Colore singolo), Gradient (Gradiente) o Pattern (Motivo)
• Typography (Tipografia) — Scegli un font e imposta il colore del titolo
• Button (Pulsante) — Regola il colore del pulsante, il colore del testo e il raggio degli angoli (se stai usando una CTA di tipo Button)

💡 Per una personalizzazione più approfondita del design — inclusi animazioni, CSS personalizzato, effetti avanzati per i pulsanti e stile delle icone social — consulta la documentazione dedicata Design & Styling (Design e stile).

📍 Passaggio 6 — Imposta Posizione e Visibilità

Fai clic sulla scheda Placement (Posizionamento) per controllare dove e quando appare la tua barra.

📐 Display Position (Posizione di visualizzazione)

Questo imposta la posizione fisica della barra:

• Top Push (Spinta in alto) — Spinge verso il basso il contenuto della pagina
• Top Push (Sticky) (Spinta in alto fissa) — Rimane fissa in alto durante lo scorrimento
• Top Overlap (Sovrapposizione in alto) — Fluttua sopra la parte superiore della pagina
• Top Overlap (Sticky) (Sovrapposizione in alto fissa) — Fluttua e rimane fissa durante lo scorrimento
• Bottom Overlap (Sticky) (Sovrapposizione in basso fissa) — Appare nella parte inferiore dell'area visibile
• Manual (Manuale) — La posizioni tu stesso usando uno snippet di codice o un blocco app

ℹ️ Se selezioni Manual, il menu a discesa di targeting delle pagine viene disabilitato e viene fornito uno snippet di codice da incollare nel tuo tema.

🎯 Page Targeting (Targeting delle pagine)

Decidi in quali pagine appare la barra:

• Every page (Tutte le pagine)
• Home page only (Solo home page)
• All products (Tutti i prodotti)
• Products in specific collections (Prodotti in collezioni specifiche)
• Specific products (Prodotti specifici)
• All collections (Tutte le collezioni)
• Specific collections (Collezioni specifiche)

Se scegli un'opzione specifica, apparirà il pulsante Select Products (Seleziona prodotti) o Select Collections (Seleziona collezioni) per scegliere esattamente dove mostrarla.

⏰ Scheduling (Pianificazione)

Vuoi che la barra diventi attiva in un secondo momento o si interrompa automaticamente? Imposta una Start Date (Data di inizio) e una End Date (Data di fine).

Se lasciati vuoti, la barra appare immediatamente e rimane attiva finché non la disattivi manualmente.

💡 Le opzioni avanzate di targeting — inclusi tag cliente, geolocalizzazione, sorgenti UTM e ritardi basati sul tempo sul sito — sono disponibili nella stessa scheda. Sono trattate in dettaglio nella documentazione Advanced Targeting (Targeting avanzato).

🚀 Passaggio 7 — Pubblica la Tua Barra

Una volta che tutto ti sembra corretto, è il momento di andare in diretta.

Fai clic su Publish (Pubblica) in alto a destra.

Apparirà un banner di conferma. Se il tuo App Embed è già abilitato, hai finito! 🎉

Se l'App Embed non è abilitato, il banner ti ricorderà di farlo e fornirà un link rapido per attivarlo nell'editor del tema.

⚠️ Importante: il solo salvataggio non rende la barra visibile ai clienti. Devi fare clic su Publish.

🎉 Risultato Finale

Una volta pubblicata con successo:

✅ La tua barra di annuncio appare sulle pagine selezionate
✅ I clienti vedono il tuo messaggio appena visitano il negozio
✅ La tua CTA genera clic, iscrizioni o vendite
✅ Il design si integra perfettamente con il brand del tuo negozio
✅ Puoi modificare, duplicare o disattivare la barra in qualsiasi momento dalla dashboard

📚 Documentazione Correlata

Vuoi andare oltre? Consulta queste guide dedicate:

• Design & Styling — Personalizzazione approfondita di colori, font, animazioni e CSS personalizzato
• Advanced Targeting — Geolocalizzazione, tag cliente, filtri UTM e regole basate sul tempo sul sito
• Translations — Gestione di barre di annuncio multilingue
• Troubleshooting — Cosa fare se la barra non viene visualizzata

Buona comunicazione! 🥂

Aggiornato il: 01/09/2026