ℹ️ 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 che la tua barra di annuncio appaia in un punto specifico non coperto dal posizionamento automatico? 🎯

Il posizionamento personalizzato ti dà il pieno controllo su dove esattamente appare la tua barra — che sia all’interno di una sezione specifica del tuo tema, sotto la navigazione, all’interno dell’area descrizione prodotto, o in qualsiasi altro punto in cui puoi aggiungere uno snippet di codice o un blocco app.

Questa guida ti accompagna nella configurazione di una barra di annuncio con posizionamento manuale, in modo che venga renderizzata esattamente dove desideri ✨

✅ Prima di iniziare

Assicurati che l’embed dell’app Hoppy Announcement Bar sia abilitato nel tuo tema. Anche con il posizionamento personalizzato, l’embed carica gli script e gli stili necessari.

Per abilitarlo:

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

💡 Già abilitato? Sei pronto per iniziare!

⚙️ Passaggio 1 — Crea un nuovo annuncio

Apri l’app Hoppy Announcement Bar dalla tua Shopify admin.

Nella dashboard, fai clic su Create New Announcement (Crea nuovo annuncio).

Verrai portato alla schermata di selezione del posizionamento.

📌 Passaggio 2 — Seleziona Posizione personalizzata

Dalle opzioni di posizionamento, scegli Custom Position (Posizione personalizzata).

Questo comunica all’app che sarai tu — e non l’iniettore automatico — a decidere esattamente dove la barra appare sulla tua vetrina.

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

🎨 Passaggio 3 — Progetta la tua barra

Costruisci la tua barra di annuncio come preferisci:

• Aggiungi il tuo title (titolo), subheading (sottotitolo) e CTA (call to action)
• Scegli un announcement type (tipo di annuncio) (Simple, Running, Multiple o Email)
• Stilizzala nella scheda Design (Progettazione)

💡 Per indicazioni dettagliate sulla progettazione — inclusi modelli, colori, animazioni e CSS personalizzato — consulta la documentazione dedicata Design & Styling.

📍 Passaggio 4 — Imposta la posizione di visualizzazione su Manuale

Fai clic sulla scheda Placement (Posizionamento).

Nel menu a discesa Display Position (Posizione di visualizzazione), seleziona Manual (Manuale).

Quando lo fai:

• Il menu a discesa Page Targeting (Targeting pagina) viene disabilitato automaticamente e impostato su Custom (Personalizzato)
• La barra non si inietterà più automaticamente nella pagina
• Invece, attenderà che tu la posizioni utilizzando uno snippet di codice o un blocco app

È proprio questo che rende funzionante il posizionamento personalizzato 🛠️

📋 Passaggio 5 — Copia lo snippet di posizionamento

Una volta salvata la barra, la scheda Placement mostra uno snippet di codice copiabile:

<div class="futureblink-announcement-block" id="{announcementId}"></div>

Ogni annuncio ha un ID univoco. Lo snippet comunica all’app esattamente quale barra renderizzare all’interno di quel contenitore.

Fai clic sul pulsante di copia per salvarlo negli appunti 📋

🧩 Passaggio 6 — Aggiungi lo snippet al tuo tema

Hai due modi per posizionare lo snippet:

Opzione A — Utilizzando un blocco app (consigliato)

Questo è il metodo più semplice e funziona con i temi Online Store 2.0.

1. Vai su Shopify Admin → Sales Channels → Online Store → Themes
2. Fai clic su Edit Theme sul tema attivo
3. Naviga fino alla pagina o sezione in cui vuoi la barra
4. Fai clic su Add Section (Aggiungi sezione) o Add Block (Aggiungi blocco)
5. Vai alla scheda Apps (App)
6. Seleziona Hoppy Announcement Bar
7. Incolla il tuo Announcement ID (ID annuncio) nelle impostazioni del blocco
8. Trascina il blocco nella posizione desiderata
9. Fai clic su Save

Opzione B — Utilizzando uno snippet Liquid personalizzato

Usalo se vuoi posizionare la barra all’interno di un file Liquid specifico o di un tema non OS 2.0.

1. Vai su Shopify Admin → Sales Channels → Online Store → Themes
2. Fai clic sul menu ... sul tuo tema attivo → Edit Code (Modifica codice)
3. Apri il file Liquid in cui vuoi che appaia la barra
4. • Esempi comuni: theme.liquid, product.liquid, header.liquid
4. Incolla lo snippet dove vuoi che venga renderizzato
5. Fai clic su Save

⚠️ Importante:

• Incolla lo snippet solo una volta per barra
• Se lo stesso ID appare più volte nella stessa pagina, la barra potrebbe essere renderizzata in ogni contenitore corrispondente
• Assicurati che il contenitore sia all’interno del tag <body>, non all’interno di <head>

🚀 Passaggio 7 — Salva e pubblica

Torna all’editor di Hoppy Announcement Bar e fai clic su Save.

Poi fai clic su Publish (Pubblica) per renderla attiva.

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

Una volta pubblicata, visita la pagina in cui hai posizionato lo snippet per confermare che la barra appaia nel punto corretto 👀

🎯 Quando utilizzare il posizionamento personalizzato

Il posizionamento personalizzato è particolarmente utile quando:

• Vuoi la barra all’interno di una sezione tema specifica anziché globalmente in alto o in basso
• Il layout del tuo tema è in conflitto con il posizionamento automatico in alto/in basso
• Stai utilizzando più barre e devi controllare esattamente dove ciascuna si trova
• Vuoi la barra all’interno di una sezione page builder, di una landing page personalizzata o di un template prodotto specifico
• Hai bisogno che la barra appaia tra i blocchi di contenuto esistenti anziché sopra o sotto di essi

⚠️ Suggerimenti comuni

Spostare o rimuovere la barra

Poiché la barra è collegata a un contenitore manuale, puoi:

• Spostare il blocco app o lo snippet Liquid in una nuova posizione in qualsiasi momento
• Rimuovere il blocco o lo snippet per impedire alla barra di essere renderizzata su quella pagina
• Riutilizzare lo stesso snippet su più template, se necessario

Combinare con il targeting

Anche con il posizionamento personalizzato, puoi comunque utilizzare:

• Scheduling (Pianificazione) — Imposta date di inizio e fine
• Geolocation (Geolocalizzazione) — Mostra solo ai visitatori di paesi specifici
• Customer Targeting (Targeting cliente) — Filtra per stato di accesso, tag o spesa totale
• UTM Source Filtering (Filtraggio per sorgente UTM) — Mostra solo ai visitatori da specifiche sorgenti di traffico
• Time-on-Site Delay (Ritardo tempo sul sito) — Ritarda l’apparizione della barra

💡 Queste opzioni sono configurate nella stessa scheda Placement. Per una panoramica completa, consulta la documentazione Advanced Targeting.

Posizionamento personalizzato in checkout e carrello

• I posizionamenti Cart Page (Pagina carrello) e Cart Drawer (Cassetto carrello) supportano anche il posizionamento Manual se vuoi un controllo preciso all’interno dell’area carrello
• Il posizionamento Checkout Page (Pagina di checkout) (solo Shopify Plus) utilizza il sistema di blocchi delle estensioni UI di checkout invece di uno snippet Liquid

🎉 Risultato finale

Una volta configurata con successo:

✅ La tua barra di annuncio appare esattamente dove l’hai posizionata nel tema
✅ Rispetta tutte le regole di targeting attive (pianificazione, geolocalizzazione, segmenti di clienti, ecc.)
✅ Puoi riposizionarla o rimuoverla in qualsiasi momento senza toccare il contenuto o il design della barra
✅ Più barre personalizzate possono coesistere nella stessa pagina in sezioni diverse
✅ Il layout del tuo negozio online rimane pulito e intenzionale ✨

📚 Documentazione correlata

• How to Set Up an Announcement Bar (Come impostare una barra di annuncio) — Procedura completa per creare e pubblicare qualsiasi tipo di barra
• Design & Styling (Progettazione e stile) — Personalizzazione approfondita di colori, caratteri, animazioni e CSS personalizzato
• Advanced Targeting (Targeting avanzato) — Pianificazione, geolocalizzazione, tag cliente, filtraggio UTM e regole di tempo sul sito
• Announcement Bar Types Explained (Tipi di barre di annuncio spiegati) — Differenze tra le barre Simple, Running, Multiple e Email

Buon posizionamento! 🥂

Aggiornato il: 10/09/2026