ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

Hoppy Announcement Bar ti offre quattro modalità diverse per mostrare messaggi sul tuo negozio. Ogni tipo si comporta in modo diverso, supporta diverse configurazioni di contenuto ed è pensato per casi d'uso specifici.

Scegliere il tipo giusto fin dall'inizio ti aiuta a evitare lavoro extra e garantisce che il tuo annuncio si comporti esattamente come previsto nel negozio live.

⚠️ Prima di iniziare

Il tipo di annuncio si seleziona nella scheda Content (Contenuto) durante la creazione o la modifica di un annuncio.

Puoi cambiare tipo in qualsiasi momento, ma tieni presente che:

• Alcuni campi appariranno o scompariranno a seconda del tipo selezionato
• Gli elementi di contenuto possono essere ridotti o espansi quando si passa da un tipo all'altro
• Le impostazioni di design e posizionamento rimangono condivise tra tutti i tipi

ℹ️ Il tipo di annuncio non è la stessa cosa del posizionamento. Il posizionamento controlla dove appare la barra. Il tipo controlla come si comporta la barra.

📋 Le quattro tipologie di annuncio

1️⃣ Simple Announcement

La tipologia Simple mostra un messaggio singolo e statico. È il formato più utilizzato perché è semplice e funziona per quasi tutti i casi d'uso.

Cosa fa

• Mostra un annuncio con titolo, sottotitolo e call-to-action opzionale
• Rimane statico sulla pagina finché il cliente non esce o la chiude
• Supporta tutti i tipi di CTA: button, full-bar click, coupon, trigger event o no CTA

Campi contenuto disponibili

• Title (Titolo) — Il messaggio principale. Supporta la formattazione rich text.
• Subheading (Sottotitolo) — Una riga secondaria sotto il titolo.
• Call to action type (Tipo di call to action) — Scegli come i clienti interagiscono con la barra.

Comportamento CTA

ℹ️ Quando è selezionato Trigger App Event, appare un campo aggiuntivo Trigger ID (ID attivazione). Questo ID deve corrispondere al nome dell'evento configurato nell'app ricevente.

Ideale per

• Annunci di vendita per tutto il negozio
• Aggiornamenti sulle politiche di spedizione
• Offerte a tempo limitato
• Promozioni generali

2️⃣ Running Line Announcement

La tipologia Running crea un ticker orizzontale continuo — simile a una marquee di notizie. Il testo del titolo scorre sulla barra in loop.

Cosa fa

• Mostra un messaggio di titolo in uno scorrimento fluido e infinito
• Direzione e velocità sono completamente configurabili
• Il campo sottotitolo è nascosto perché il formato si basa su una singola riga scorrevole

Campi contenuto disponibili

• Title (Titolo) — Il messaggio che scorre sulla barra. Supporta rich text.
• Animation speed (Velocità animazione) — Un cursore da 1 a 80 che controlla la velocità di movimento del testo.
• Run left to right (Scorri da sinistra a destra) — Una casella di spunta che inverte la direzione di scorrimento predefinita.

Come funziona la velocità di animazione

• Valori bassi = scorrimento più lento e leggibile
• Valori alti = movimento più veloce del ticker
• La velocità viene calcolata dinamicamente in base alla lunghezza del testo del titolo

Comportamento CTA

Le annunci Running supportano button, coupon, trigger e no CTA. L'opzione Make entire bar clickable avvolge l'area scorrevole in un link.

Se si utilizza un pulsante o un coupon, appare in modo statico accanto al testo scorrevole.

Ideale per

• Avvisi di vendita lampo
• Scadenze urgenti per spedizioni
• Slogan di marca ripetitivi
• Promemoria sensibili al tempo

⚠️ Importante: Le barre a linea scorrevole funzionano meglio con titoli brevi. Messaggi molto lunghi possono creare un ritmo di scorrimento irregolare su schermi più piccoli.

3️⃣ Multiple Rotating Announcements

La tipologia Multiple ti permette di raggruppare diversi annunci in un'unica barra che li ruota automaticamente. I clienti vedono un messaggio alla volta, con frecce di navigazione per sfogliare manualmente.

Cosa fa

• Cicla tra più slide di annunci
• Ogni slide ha il proprio titolo, sottotitolo e CTA
• Avanza automaticamente in base a una durata di visualizzazione configurabile
• Include la navigazione con frecce sinistra/destra

Campi contenuto disponibili

• Announcement display duration (Durata visualizzazione annuncio) — Un cursore da 1 a 10 secondi che controlla quanto tempo ogni slide rimane visibile prima di ruotare automaticamente.
• Announcement #1, #2, #3... (Annuncio #1, #2, #3...) — Ogni slide è un blocco di contenuto indipendente con il proprio titolo, sottotitolo e CTA.
• Add new announcement (Aggiungi nuovo annuncio) — Aggiunge slide aggiuntive.

Limiti slide

• Minimo: 2 slide
• Massimo: 20 slide

Puoi riordinare le slide usando le frecce su/giù e rimuovere le slide se ne hai più di 2.

Comportamento CTA

Ogni slide può avere la propria CTA indipendente. Una slide può avere un pulsante, un'altra un coupon, e una terza nessuna CTA.

Tipi di CTA supportati per slide: button, full-bar click, coupon, trigger o none.

Effetti di animazione

La transizione tra le slide è controllata dall'impostazione Animation (Animazione) nella scheda Design (Design):

• Slide — Transizione orizzontale standard
• Fade — Dissolvenza incrociata fluida tra le slide
• Cube — Effetto di rotazione cubo 3D
• Flip — Transizione a stile capovolgimento carta

Ideale per

• Mostrare più promozioni contemporaneamente
• Annunciare diverse categorie di prodotti
• Ruotare messaggi su spedizioni, resi e fiducia
• Evidenziare diversi coupon senza ingombrare la pagina

4️⃣ Email Collection Banner

La tipologia Email trasforma la barra di annuncio in un modulo di lead capture. Mostra un campo di input email e un pulsante di invio, quindi mostra uno stato di successo dopo l'invio.

Cosa fa

• Mostra un titolo, un sottotitolo e un campo di input email
• Mostra un Success Message (Messaggio di successo) dopo che un cliente ha inviato la propria email
• Può includere un codice coupon come ricompensa per l'iscrizione

Campi contenuto disponibili

• Title (Titolo) — Il messaggio principale che invita i clienti a iscriversi.
• Subheading (Sottotitolo) — Testo di supporto sotto il titolo.
• Button text (Testo pulsante) — L'etichetta sul pulsante di invio. Se lasciato vuoto, il default è Subscribe (Iscriviti).
• Success Message (Messaggio di successo) — Il testo di conferma mostrato dopo un invio email riuscito.
• Email Placeholder (Placeholder email) — Il testo di suggerimento all'interno del campo email vuoto.

Comportamento CTA

Le barre di raccolta email supportano due modalità CTA:

• Button (Pulsante) — Un pulsante di invio standard. La barra raccoglie l'email e mostra lo stato di successo.
• Coupon (Coupon) — Mostra un codice coupon accanto o al posto dell'input, con un pulsante di copia opzionale.

Le opzioni Make entire bar clickable e Trigger App Event non sono disponibili per questo tipo perché la barra è costruita attorno all'invio del modulo.

Anteprima dello stato di successo

Nell'anteprima dell'app vedrai due stati della barra sovrapposti:

1. Il modulo attivo di raccolta email
2. La barra del messaggio di successo

Nel negozio live, i clienti vedono lo stato di successo solo dopo aver inviato la loro email.

Ideale per

• Costruire liste di newsletter
• Offrire codici sconto in cambio di email
• Iscrizioni a liste d'attesa pre-lancio
• Promuovere programmi VIP o fedeltà

🔀 Come la selezione del tipo influisce sulle impostazioni visibili

Scegliere un tipo di annuncio cambia dinamicamente quali campi appaiono nella scheda Content (Contenuto). Ecco una rapida referenza:

Campi che appaiono in base al tipo

Limiti elementi di contenuto

• Simple, Running, Email — Viene utilizzato solo il primo elemento di contenuto. Anche se nel modello dati esistono più elementi, viene renderizzato solo il primo.
• Multiple — Tutti gli elementi di contenuto sono utilizzati come slide individuali.

⚠️ Se passi da Multiple a Simple, le slide extra vengono conservate in background ma non verranno visualizzate. Riappariranno se torni a Multiple.

🎯 Spiegazione dei tipi di Call-to-Action

Il comportamento della CTA è per lo più coerente tra i tipi di annuncio, con alcune eccezioni specifiche per tipo.

No call to action

La barra è puramente informativa. Non vengono renderizzati pulsanti, link o aree cliccabili.

Button

Appare un pulsante cliccabile. Configuri:

• Button text (Testo pulsante) — Cosa dice il pulsante
• Link (Link) — Dove naviga il pulsante

Make entire bar clickable

L'intera area dell'annuncio diventa un link. Cliccare ovunque sulla barra naviga all'URL configurato.

ℹ️ Se la barra contiene elementi cliccabili annidati come icone social, questi funzionano comunque in modo indipendente. Il clic sull'intera barra non li sovrascrive.

Coupon

Mostra una casella di coupon stilizzata. Configuri:

• Coupon Code (Codice coupon) — Il codice sconto effettivo
• Show copy button (Mostra pulsante copia) — Aggiunge un'icona per copiare con un clic accanto al codice

Trigger App Event

Invece di navigare a un URL, il pulsante invia un CustomEvent del browser. Configuri:

• Trigger ID (ID attivazione) — La stringa del nome dell'evento (ad esempio, my-app:open-modal)

Altre app o script di tema personalizzati che ascoltano questo nome di evento possono rispondervi.

⚠️ Le CTA Trigger non sono disponibili sulle barre di raccolta email perché l'azione principale della barra è l'invio del modulo.

🎨 Comportamento del design in base al tipo

La maggior parte delle impostazioni di design si applicano universalmente, ma alcune si comportano in modo diverso a seconda del tipo.

Impostazione Animation (scheda Design)

• Simple & Email — L'animazione controlla l'effetto di ingresso quando la barra si carica per la prima volta.
• Running — La velocità dell'animazione è controllata nella scheda Content (Contenuto), non nella scheda Design (Design).
• Multiple — L'animazione controlla l'effetto di transizione tra le slide (slide, fade, cube, flip).

Icone social

Le icone del banner possono essere aggiunte a tutti i tipi. Controlli la visibilità separatamente per desktop e mobile.

• Le icone appaiono in modo statico accanto al contenuto
• Ogni icona può collegarsi a un URL o rimanere non cliccabile

Icona di chiusura

Tutti i tipi supportano l'icona di chiusura. Quando abilitata, puoi configurare:

• Appear again after (Riapri dopo) — Quante ore o giorni devono passare prima che la barra riappaia per un visitatore di ritorno

Se non viene impostato un tempo di riapparizione, la barra rimane nascosta permanentemente dopo essere stata chiusa.

📱 Comportamento su mobile

Tutte e quattro le tipologie di annuncio sono completamente responsive. Tuttavia, le regolazioni del layout avvengono automaticamente:

• Le barre di raccolta email si impilano verticalmente su mobile — il campo di input e il pulsante appaiono su righe separate
• Le barre a rotazione multipla riducono il padding delle frecce e riducono leggermente le dimensioni del font
• Le barre a linea scorrevole mantengono la velocità di scorrimento ma comprimono le dimensioni delle icone se le icone social sono abilitate
• Le barre Simple con pulsanti possono centrare il testo su schermi più piccoli a seconda del tipo di CTA

Puoi sovrascrivere l'aspetto mobile usando il pannello Custom CSS (CSS personalizzato) nella scheda Design (Design), se necessario.

💡 Esempi di casi d'uso

Esempio 1 — Barra Simple con coupon

• Type: Simple
• Title: "I saldi estivi sono iniziati ☀️"
• Subheading: "Usa il codice SUNNY per il 20% di sconto"
• CTA: Coupon
• Coupon code: SUNNY
• Risultato: Una barra pulita e statica con un codice sconto copiabile.

Esempio 2 — Ticker Running per urgenza

• Type: Running
• Title: "Spedizione gratuita fino a mezzanotte ⏰"
• Animation speed: 25
• CTA: None
• Risultato: Un messaggio di urgenza che scorre continuamente nella parte superiore del negozio.

Esempio 3 — Slide Multiple per diverse collezioni

• Type: Multiple
• Slide 1: "Sconti fino al 50% su Scarpe →" con pulsante link a /collections/shoes
• Slide 2: "Nuovi arrivi in Accessori →" con pulsante link a /collections/accessories
• Slide 3: "Resi gratuiti su tutti gli ordini" senza CTA
• Display duration: 4 secondi
• Risultato: Una barra che cicla automaticamente tra tre promozioni diverse.

Esempio 4 — Raccolta email con coupon premio

• Type: Email
• Title: "Unisciti alla lista VIP"
• Subheading: "Ottieni il 15% di sconto sul tuo primo ordine"
• Button text: "Ricevi il mio codice"
• Success Message: "Benvenuto/a! Il tuo codice WELCOME15 è pronto."
• Email Placeholder: "Inserisci la tua email"
• Risultato: Una barra di lead capture che premia gli iscritti con un coupon immediato.

⚠️ Note importanti e limitazioni

Cambio di tipo

Cambiare tipo non cancella il tuo contenuto. Tuttavia:

• Passare da Multiple a Simple nasconde le slide extra
• Passare da Running a Simple rivela di nuovo il campo subheading
• Passare a Email nasconde i campi Trigger ID se erano stati impostati

Rivedi sempre il contenuto dopo aver cambiato tipo.

Lunghezza linea scorrevole

Titoli molto lunghi nelle barre scorrevoli possono causare tempistiche di scorrimento irregolari, specialmente su mobile. Testa con la lunghezza effettiva del messaggio prima di pubblicare.

Minimo slide Multiple

Non puoi pubblicare un annuncio Multiple con meno di 2 slide. Se ti serve un solo messaggio, usa il tipo Simple.

Stato di successo barra email

Lo stato di successo appare solo dopo che un cliente ha inviato un'email. L'anteprima nell'app mostra entrambi gli stati sovrapposti per riferimento, ma i clienti live vedono prima il modulo.

Clic sull'intera barra ed elementi annidati

Quando è abilitata l'opzione Make entire bar clickable, il clic sulle icone social o sul pulsante Copia funziona comunque come previsto. Il clic sull'intera barra ignora quegli elementi interattivi annidati.

🎉 Risultato finale

Conoscere le quattro tipologie di announcement bar ti aiuta a abbinare il formato giusto al tuo obiettivo:

✅ Simple — Ideale per promozioni singole e statiche
✅ Running — Ideale per messaggi di urgenza e ticker ripetitivi
✅ Multiple — Ideale per ruotare diverse offerte in un unico posizionamento
✅ Email — Ideale per raccogliere lead e far crescere le liste di iscritti

Ogni tipo supporta lo stesso sistema di design, regole di posizionamento, programmazione e logica di targeting. La differenza è puramente nel modo in cui il contenuto viene presentato e con cui si interagisce.

Scegliere il tipo corretto fin dall'inizio garantisce che il tuo annuncio sia coerente con il tuo negozio e comunichi il messaggio giusto nel formato giusto 🚀

Aggiornato il: 10/09/2026