ℹ️ 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
4. • 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! 🥂

Bijgewerkt op: 10/09/2026