> ## 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).

# 📍 Een announcement bar instellen op een aangepaste positie

> ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Wil je dat je announcement bar op een specifieke plek verschijnt die niet wordt gedekt door automatische positionering? 🎯

**Aangepaste plaatsing** geeft je volledige controle over waar je bar precies wordt weergegeven — of dat nu in een specifiek gedeelte van je thema is, onder je navigatie, in een productbeschrijvingsgedeelte, of overal waar je een codefragment of app-block kunt toevoegen.

Deze gids leidt je door het instellen van een announcement bar met handmatige plaatsing, zodat deze precies op de gewenste plek wordt geladen ✨

---

# **✅ Voordat je begint**

Zorg ervoor dat de app-embed **Hoppy Announcement Bar** is ingeschakeld in je thema. Zelfs bij aangepaste plaatsing laadt de embed de vereiste scripts en stijlen.

**Om dit in te schakelen:**

1. Ga naar **Shopify Admin → Sales Channels → Online Store → Themes** (Shopify-beheer → Verkoopkanalen → Onlinewinkel → Thema's)
2. Klik op **Edit Theme** (Thema bewerken) bij je actieve thema
3. Selecteer **App Embeds** (App-embeds) in de linkerzijbalk
4. Zoek **Announcement Bar/Banner** (Aankondigingsbalk/banner)
5. Zet de schakelaar op **ON** (AAN)
6. Klik op **Save** (Opslaan)

💡 *Alles al ingeschakeld? Dan kun je meteen verder!*

---

# **⚙️ Stap 1 — Een nieuwe aankondiging maken**

Open de app **Hoppy Announcement Bar** vanuit je Shopify-beheer.

Klik op het dashboard op **Create New Announcement** (Nieuwe aankondiging maken).

Je komt op het scherm om de plaatsing te selecteren.

---

# **📌 Stap 2 — Kies een aangepaste positie**

Kies uit de plaatsingsopties **Custom Position** (Aangepaste positie).

Dit geeft de app door dat jij — en niet de automatische injector — bepaalt waar de bar in je webwinkel verschijnt.

Klik vervolgens op **Continue** (Doorgaan).

---

# **🎨 Stap 3 — Ontwerp je bar**

Bouw je announcement bar zoals jij wilt:

* Voeg een **title** (titel), **subheading** (ondertitel) en **CTA** (call-to-action) toe
* Kies een **announcement type** (aankondigingstype): **Simple**, **Running**, **Multiple** of **Email**
* Pas de stijl aan in het tabblad **Design** (Ontwerp)

💡 *Voor gedetailleerde ontwerphulp — inclusief sjablonen, kleuren, animaties en aangepaste CSS — raadpleeg je de documentatie **Ontwerp en stijl**.*

---

# **📍 Stap 4 — Stel de weergavepositie in op Handmatig**

Klik op het tabblad **Placement** (Plaatsing).

Selecteer in de vervolgkeuzelijst **Display Position** (Weergavepositie) de optie **Manual** (Handmatig).

Wat er dan gebeurt:

* De vervolgkeuzelijst **Page Targeting** (Paginatargeting) wordt automatisch uitgeschakeld en ingesteld op **Custom** (Aangepast)
* De bar wordt niet meer automatisch in de pagina geïnjecteerd
* In plaats daarvan wacht deze tot jij hem plaatst met een codefragment of app-block

Dit is precies waardoor aangepaste plaatsing werkt 🛠️

---

# **📋 Stap 5 — Kopieer je plaatsingscodefragment**

Zodra de bar is opgeslagen, toont het tabblad **Placement** (Plaatsing) een kopieerbaar codefragment:

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

Elke aankondiging heeft een unieke ID. Het fragment vertelt de app precies welke bar in die container moet worden weergegeven.

Klik op de kopieerknop om het naar je klembord te kopiëren 📋

---

# **🧩 Stap 6 — Voeg het fragment toe aan je thema**

Je hebt twee manieren om het fragment te plaatsen:

## **Optie A — Met een app-block (aanbevolen)**

Dit is de makkelijkste manier en werkt met Online Store 2.0-thema's.

1. Ga naar **Shopify Admin → Sales Channels → Online Store → Themes** (Shopify-beheer → Verkoopkanalen → Onlinewinkel → Thema's)
2. Klik op **Edit Theme** (Thema bewerken) bij je actieve thema
3. Ga naar de pagina of sectie waar je de bar wilt plaatsen
4. Klik op **Add Section** (Sectie toevoegen) of **Add Block** (Blok toevoegen)
5. Ga naar het tabblad **Apps**
6. Selecteer **Hoppy Announcement Bar**
7. Plak je **Announcement ID** (Aankondigings-ID) in de instellingen van het blok
8. Sleep het blok naar de gewenste positie
9. Klik op **Save** (Opslaan)

## **Optie B — Met een aangepast Liquid-fragment**

Gebruik dit als je de bar in een specifiek Liquid-bestand of een thema zonder OS 2.0 wilt plaatsen.

1. Ga naar **Shopify Admin → Sales Channels → Online Store → Themes** (Shopify-beheer → Verkoopkanalen → Onlinewinkel → Thema's)
2. Klik op het menu **...** bij je actieve thema → **Edit Code** (Code bewerken)
3. Open het Liquid-bestand waarin je de bar wilt weergeven
   * Veelgebruikte voorbeelden: `theme.liquid`, `product.liquid`, `header.liquid`
4. Plak het fragment op de plek waar je het wilt weergeven
5. Klik op **Save** (Opslaan)

⚠️ **Belangrijk:**

* Plak het fragment maar **één keer** per bar
* Als dezelfde ID meerdere keren op dezelfde pagina voorkomt, kan de bar in elke overeenkomende container worden weergegeven
* Zorg ervoor dat de container binnen de `<body>`-tag staat, niet in `<head>`

---

# **🚀 Stap 7 — Opslaan en publiceren**

Ga terug naar de editor van **Hoppy Announcement Bar** en klik op **Save** (Opslaan).

Klik vervolgens op **Publish** (Publiceren) om hem live te zetten.

⚠️ **Belangrijk:** Alleen opslaan maakt de bar niet zichtbaar voor klanten. Je moet op **Publish** (Publiceren) klikken.

Zodra gepubliceerd, bezoek je de pagina waar je het fragment hebt geplaatst om te controleren of de bar op de juiste plek verschijnt 👀

---

# **🎯 Wanneer gebruik je aangepaste plaatsing?**

Aangepaste plaatsing is vooral handig wanneer:

* Je de bar in een **specifiek themagedeelte** wilt hebben in plaats van globaal bovenaan of onderaan
* De lay-out van je thema conflicteert met automatische positie bovenaan/onderaan
* Je **meerdere bars** gebruikt en precies wilt bepalen waar elke bar staat
* Je de bar in een **page builder-sectie**, een aangepaste landingspagina of een specifieke producttemplate wilt hebben
* Je wilt dat de bar **tussen bestaande contentblokken** verschijnt, in plaats van erboven of eronder

---

# **⚠️ Nuttige tips**

## **De bar verplaatsen of verwijderen**

Omdat de bar gekoppeld is aan een handmatige container, kun je:

* Het app-block of Liquid-fragment op elk moment naar een nieuwe positie verplaatsen
* Het blok of fragment verwijderen om te voorkomen dat de bar op die pagina wordt weergegeven
* Dezelfde snippet indien nodig op meerdere templates hergebruiken

## **Combineren met targeting**

Zelfs met aangepaste plaatsing kun je nog steeds gebruikmaken van:

* **Scheduling** (Plannen) — Stel start- en einddatums in
* **Geolocation** (Geolocatie) — Toon alleen aan bezoekers uit specifieke landen
* **Customer Targeting** (Klanttargeting) — Filter op loginstatus, tags of totale besteding
* **UTM Source Filtering** (UTM-bronfiltering) — Toon alleen aan bezoekers van specifieke verkeersbronnen
* **Time-on-Site Delay** (Vertraging op basis van tijd op site) — Laat de bar pas na een bepaalde tijd verschijnen

💡 *Deze opties worden geconfigureerd in hetzelfde tabblad **Placement** (Plaatsing). Voor een volledig overzicht raadpleeg je de documentatie **Geavanceerde targeting**.*

## **Aangepaste plaatsing in winkelwagen en afrekenen**

* Ook de plaatsingen **Cart Page** (Winkelwagenpagina) en **Cart Drawer** (Winkelwagenlade) ondersteunen **Manual** (Handmatig) als je precies wilt bepalen waar de bar in het winkelwagengebied komt
* Voor de plaatsing op de **Checkout Page** (Afrekenpagina) *(alleen Shopify Plus)* gebruik je in plaats van een Liquid-fragment het checkout UI-extensiebloksysteem

---

# **🎉 Eindresultaat**

Als alles succesvol is geconfigureerd:

✅ Je announcement bar verschijnt precies waar je hem in je thema hebt geplaatst
✅ De bar houdt zich aan alle actieve targetingsregels (planning, geolocatie, klantsegmenten, enz.)
✅ Je kunt hem op elk moment verplaatsen of verwijderen zonder de inhoud of het ontwerp van de bar aan te passen
✅ Meerdere aangepaste bars kunnen naast elkaar op dezelfde pagina in verschillende secties staan
✅ De lay-out van je webwinkel blijft schoon en doordacht ✨

---

# **📚 Gerelateerde documentatie**

* **Een announcement bar instellen** — Volledige walkthrough voor het maken en publiceren van elke bar-type
* **Ontwerp en stijl** — Diepgaande aanpassing van kleuren, lettertypen, animaties en aangepaste CSS
* **Geavanceerde targeting** — Planning, geolocatie, klanttags, UTM-filtering en regels op basis van tijd op site
* **Announcement bar-types uitgelegd** — Verschillen tussen Simple, Running, Multiple en Email bars

Veel plezier met het plaatsen! 🥂