> ## 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 impostare una barra di annuncio per un posizionamento personalizzato

> ℹ️ **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  
   * 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\! 🥂