> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎋 Come Configurare una Barra di Annuncio > ℹ️ **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. 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: | Tipo | Ideale per | | ----- | ----- | | **Simple** (Semplice) | Un singolo messaggio statico | | **Running** (Scorrevole) | Una marquee o ticker scorrevole | | **Multiple** (Multiplo) | Slide rotanti con più messaggi | | **Email** | Raccogliere gli indirizzi email dei visitatori | ### **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! 🥂