Wil je updates, promoties of belangrijke berichten delen met elke bezoeker die in je winkel terechtkomt? 📢

Een announcement bar is een van de makkelijkste manieren om aandacht te trekken zonder de winkelervaring te verstoren. Of het nu gaat om een flash sale, een verzendupdate of een nieuwsbriefaanmelding, een goed geplaatste bar houdt klanten op de hoogte vanaf het moment dat ze arriveren.

Deze gids leidt je door de volledige installatie — van het maken van je eerste bar tot het live zetten ervan in je winkel 🚀

📍 Wat je gaat leren

Aan het einde van deze gids weet je hoe je:

• Een nieuwe announcement bar maakt
• De juiste plaatsing en bartype kiest
• Je bericht en call-to-action toevoegt
• Een ontwerp toepast dat bij je merk past
• Bepaalt waar en wanneer deze verschijnt
• De bar publiceert in je winkel

✅ Voordat je begint

Zorg ervoor dat de Hoppy Announcement Bars & Banners app-embed is ingeschakeld in je thema. Zonder deze verschijnt je bar niet in de winkel, hoe perfect deze ook is geconfigureerd.

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
5. Zet de schakelaar op ON (AAN)
6. Klik op Save (Opslaan)

💡 Al ingeschakeld? Je bent klaar om te beginnen!

⚙️ Stap 1 — Maak een nieuwe announcement aan

Open de Hoppy Banners-app vanuit je Shopify-beheer.

Op het dashboard klik je op Create New Announcement (Nieuwe announcement maken).

Je komt op het scherm voor plaatsingsselectie.

📌 Stap 2 — Kies een plaatsing

Plaatsing bepaalt waar je announcement bar in je winkel verschijnt.

Je ziet zes opties:

• Storefront Page (Winkelpagina) — Verschijnt op je hoofdwinkel (home, producten, collecties, etc.)
• Email Collection Bar (E-mailverzamelingsbalk) — Een bar gericht op het verzamelen van bezoekers-e-mails
• Cart Page (Winkelwagenpagina) — Verschijnt op de speciale winkelwagenpagina
• Cart Drawer (Winkelwagenlade) — Verschijnt in de uitklapbare winkelwagenlade
• Checkout Page (Afrekenpagina) — Verschijnt tijdens het afrekenen (alleen Shopify Plus)
• Custom Position (Aangepaste positie) — Plaats deze handmatig op specifieke product- of collectiepagina's

Selecteer de optie die past bij je doel. Voor de meeste verkopers is Storefront Page het beste startpunt.

Klik daarna op Continue (Doorgaan).

🎨 Stap 3 — Kies een preset (of begin vanaf nul)

Daarna zie je een verzameling visuele presets — voorontworpen combinaties van kleuren, lettertypen en lay-outs.

Je kunt:

• Choose a preset (Kies een preset) om je ontwerp een vliegende start te geven
• Of klik op Make your Own (Maak je eigen) om alles handmatig op te bouwen

Maak je geen zorgen — je kunt later elk ontwerpdetail wijzigen. Presets besparen alleen tijd ⏱️

Nadat je een preset hebt geselecteerd (of ervoor hebt gekozen om fris te beginnen), opent de editor automatisch.

📝 Stap 4 — Voeg je content toe

Je belandt in het tabblad Content (Content). Hier schrijf je je bericht en kies je hoe de bar zich gedraagt.

🏷️ Naam van de announcement

Dit is alleen voor je interne referentie. Klanten zien deze niet.

Gebruik iets herkenbaars, zoals:

• Zomersale-banner
• Gratis verzending-melding
• Black Friday-header

💡 Goede benaming helpt wanneer je meerdere bars tegelijk hebt draaien.

📢 Type announcement

Dit bepaalt hoe je bericht wordt weergegeven. Er zijn vier typen:

Een type kiezen

• Simple is perfect voor één duidelijk bericht — zoals "Gratis verzending bij bestellingen boven de $50."
• Running werkt goed voor urgentie of flash sales. Wanneer geselecteerd, zie je een Animation Speed-schuifregelaar (Animatiesnelheid) en een selectievakje om de scrollrichting te wijzigen.
• Multiple laat je door maximaal 20 verschillende slides cyclen. Wanneer geselecteerd, verschijnt een Display Duration-schuifregelaar (Weergaveduur) om te bepalen hoe lang elke slide zichtbaar blijft.
• Email verandert de bar in een lead-capturetool. Wanneer geselecteerd, worden standaard CTA-opties vervangen door een veld voor een Success Message (Succesbericht) en Email Placeholder (E-mailplaceholder).

💡 Je kunt altijd terugkomen en van type wisselen.

✍️ Titel & ondertitel

• Title (Titel) — Dit is je hoofdbericht. Het ondersteunt rich-text-opmaak (vet, cursief, links, kleuren).
• Subheading (Ondertitel) — Een kleinere ondersteunende regel onder de titel.

ℹ️ Het veld Subheading is verborgen als je het type Running selecteert, omdat marquee-bars meestal uit één regel tekst bestaan.

🔗 Call to Action (CTA)

Je CTA vertelt klanten wat ze vervolgens moeten doen.

Kies een CTA Type (CTA-type):

• No Call to Action (Geen call to action) — Geen knop of link
• Button (Knop) — Een klikbare knop met aangepaste tekst en een link
• Make entire bar clickable (Maak de hele bar klikbaar) — De hele bar wordt klikbaar
• Coupon (Kortingscode) — Toont een kortingscode met een kopieer-naar-klembord-knop
• Trigger App Event (App-event activeren) — Vuurt een aangepast event af voor gebruik met andere apps

Als je Button, Make entire bar clickable of Trigger App Event selecteert, zie je velden voor de link of knoptekst. Als je Coupon selecteert, verschijnt een veld Coupon Code (Kortingscode) samen met een selectievakje om een kopieericoon te tonen.

🚪 Sluiticoon

Schakel dit in als je wilt dat klanten de bar kunnen sluiten.

Wanneer ingeschakeld, verschijnen er twee extra velden:

• Appear again after (Opnieuw verschijnen na) — Hoe lang het duurt voordat de bar opnieuw verschijnt voor die bezoeker
• Unit (Eenheid) — Uren of dagen

Dit is handig als je terugkerende bezoekers niet wilt irriteren met hetzelfde bericht.

🎭 Banner Icons

Met Banner Icons (Banner-iconen) kun je klikbare sociale of branding-iconen direct binnen de announcement bar plaatsen voor meer betrokkenheid en snelle toegang tot externe platforms.

Dit is vooral handig om socialemediaprofielen, community's of belangrijke externe links te promoten zonder extra tekst in de bar te plaatsen.

📌 Maximum aantal toegestane iconen

Je kunt maximaal 6 Banner Icons toevoegen binnen één announcement bar-instelling.

Dit helpt om een schone en gebalanceerde lay-out te behouden op zowel desktop als mobiele apparaten.

🖥️ Zichtbaarheid op desktop en mobiel

Elk icoon kan worden geconfigureerd om te verschijnen op:

• Desktopapparaten
• Mobiele apparaten
• Of beide tegelijk

Dit geeft je meer flexibiliteit, afhankelijk van hoe je wilt dat de announcement bar eruitziet op verschillende schermgroottes.

🔄 Icon vervangen

Iconen kunnen op elk moment worden vervangen via de ingebouwde Icon Library.

Beschikbaar gedrag

• Blader door beschikbare iconen in de Icon Library (Iconenbibliotheek)
• Vervang bestaande iconen direct
• Update iconen zonder de rest van de instellingen te beïnvloeden

⚠️ Belangrijk:

Aangepaste iconen uploaden wordt momenteel niet ondersteund. Alleen iconen die beschikbaar zijn in de Icon Library kunnen worden gebruikt.

🔗 Call to Action (CTA)

Elk Banner Icon kan optioneel zijn eigen Call to Action-gedrag bevatten.

Beschikbare opties

• No call to action (Geen call to action)
• Add Link (Link toevoegen)

➕ Link toevoegen

Wanneer Add Link is geselecteerd:

→ Er verschijnt een veld CTA Link

Dit stelt het icoon in staat om bezoekers door te sturen naar externe of interne pagina's.

Voorbeelden van gebruik

• Socialemediaprofielen
• WhatsApp-gesprekken
• Discord-community's
• Productcollecties
• Promotionele landingspagina's

⚠️ Belangrijke opmerkingen

• Elk icoon kan zijn eigen onafhankelijke CTA-gedrag hebben
• Sommige iconen kunnen niet klikbaar blijven, terwijl andere bezoekers doorverwijzen
• Het verwijderen van een icoon verwijdert alleen dat specifieke icoon en heeft geen invloed op de overige iconen
• De rangschikking van iconen kan de spatiëring en zichtbaarheid op kleinere mobiele schermen beïnvloeden

💡 Voor de beste winkelervaring: vermijd het overvol maken van de announcement bar met te veel iconen en links tegelijk.

🎨 Stap 5 — Kies een ontwerp

Klik op het tabblad Design (Ontwerp) om je bar vorm te geven.

Voor een snelle installatie richt je je op deze essentials:

• Template (Sjabloon) — Kies uit 20+ vooraf gemaakte stijlen of blijf bij je preset
• Visibility (Zichtbaarheid) — Kies of deze verschijnt op Desktop and Mobile (Desktop en mobiel), Desktop Only (Alleen desktop) of Mobile Only (Alleen mobiel)
• Background (Achtergrond) — Kies een Single Color (Effen kleur), Gradient (Kleurovergang) of Pattern (Patroon)
• Typography (Typografie) — Kies een lettertype en stel je titelkleur in
• Button (Knop) — Pas de knopkleur, tekstkleur en hoekradius aan (als je een knop-CTA gebruikt)

💡 Voor diepgaandere ontwerpaanpassingen — waaronder animaties, aangepaste CSS, geavanceerde knopeffecten en styling van sociale iconen — zie de specifieke documentatie Design & Styling.

📍 Stap 6 — Stel positie & zichtbaarheid in

Klik op het tabblad Placement (Plaatsing) om te bepalen waar en wanneer je bar verschijnt.

📐 Weergavepositie

Dit bepaalt de fysieke locatie van de bar:

• Top Push (Bovenaan duwen) — Duwt de paginacontent naar beneden
• Top Push (Sticky) (Bovenaan duwen, plakkerig) — Blijft vast bovenaan tijdens het scrollen
• Top Overlap (Bovenaan overlappen) — Zweeft bovenaan de pagina
• Top Overlap (Sticky) (Bovenaan overlappen, plakkerig) — Zweeft en blijft vast tijdens het scrollen
• Bottom Overlap (Sticky) (Onderaan overlappen, plakkerig) — Verschijnt onderaan in het zichtbare gedeelte
• Manual (Handmatig) — Je plaatst deze zelf met een codefragment of app-block

ℹ️ Als je Manual selecteert, is de vervolgkeuzelijst voor paginadoelen uitgeschakeld en krijg je een codefragment dat je in je thema kunt plakken.

🎯 Paginadoelen

Bepaal op welke pagina's de bar verschijnt:

• Every page (Elke pagina)
• Home page only (Alleen homepage)
• All products (Alle producten)
• Products in specific collections (Producten in specifieke collecties)
• Specific products (Specifieke producten)
• All collections (Alle collecties)
• Specific collections (Specifieke collecties)

Als je een 'specific'-optie kiest, verschijnt een knop Select Products (Producten selecteren) of Select Collections (Collecties selecteren) zodat je handmatig kunt kiezen waar deze wordt getoond.

⏰ Planning

Wil je dat de bar later live gaat of automatisch stopt? Stel een Start Date (Startdatum) en End Date (Einddatum) in.

Als je deze leeg laat, verschijnt de bar direct en blijft deze live totdat je deze handmatig depubliceert.

💡 Geavanceerde doelopties — waaronder klanttags, geolocatie, UTM-bronnen en vertragingen op basis van tijd op de site — zijn beschikbaar in hetzelfde tabblad. Deze worden in detail behandeld in de documentatie Advanced Targeting.

🚀 Stap 7 — Publiceer je bar

Zodra alles er goed uitziet, is het tijd om live te gaan.

Klik op Publish (Publiceren) in de rechterbovenhoek.

Er verschijnt een succesmelding. Als je App Embed al is ingeschakeld, ben je helemaal klaar! 🎉

Als de App Embed niet is ingeschakeld, herinnert de melding je hieraan en biedt deze een snelle link om deze in te schakelen in je thema-editor.

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

🎉 Eindresultaat

Nadat deze succesvol is gepubliceerd:

✅ Je announcement bar verschijnt op de geselecteerde pagina's
✅ Klanten zien je bericht direct bij een bezoek
✅ Je CTA genereert kliks, aanmeldingen of verkopen
✅ Het ontwerp sluit naadloos aan bij de branding van je winkel
✅ Je kunt de bar op elk moment bewerken, dupliceren of depubliceren vanaf het dashboard

📚 Gerelateerde documentatie

Wil je nog verder gaan? Bekijk deze specifieke gidsen:

• Design & Styling — Diepgaande aanpassing van kleuren, lettertypen, animaties en aangepaste CSS
• Advanced Targeting — Geolocatie, klanttags, UTM-filtering en regels op basis van tijd op de site
• Translations — Meertalige announcement bars uitvoeren
• Troubleshooting — Wat te doen als je bar niet wordt weergegeven

Veel plezier met aankondigen! 🥂

Bijgewerkt op: 01/09/2026