ℹ️ 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.

Hoppy Announcement Bar biedt vier verschillende manieren om berichten weer te geven in je storefront. Elk type gedraagt zich anders, ondersteunt verschillende contentconfiguraties en is ontworpen voor specifieke use cases.

Door het juiste type vroeg in je setup te kiezen, voorkom je rework en zorg je ervoor dat je aankondiging zich precies zo gedraagt als je verwacht in de live store.

⚠️ Voordat je begint

Het aankondigingstype wordt geselecteerd in het tabblad Content (Inhoud) bij het maken of bewerken van een aankondiging.

Je kunt op elk moment van type wisselen, maar houd rekening met het volgende:

• Sommige velden verschijnen of verdwijnen afhankelijk van het geselecteerde type
• Contentitems kunnen worden ingekort of uitgebreid bij het wisselen tussen bepaalde types
• Ontwerp- en plaatsingsinstellingen blijven voor alle types gedeeld

ℹ️ Aankondigingstype is niet hetzelfde als placement. Placement bepaalt waar de balk verschijnt. Type bepaalt hoe de balk zich gedraagt.

📋 De vier aankondigingstypes

1️⃣ Eenvoudige aankondiging (Simple)

Het Simple-type toont één statisch bericht. Dit is de meestgebruikte indeling omdat deze eenvoudig is en voor bijna elke use case werkt.

Wat het doet

• Toont één aankondiging met een Title (titel), Subheading (ondertitel) en optionele call-to-action
• Blijft statisch op de pagina staan totdat de klant wegnavigeert of de balk sluit
• Ondersteunt alle CTA-types: knop, klikken op de hele balk, coupon, trigger event of geen CTA

Beschikbare contentvelden

• Title — Het hoofdbericht. Ondersteunt rich text-opmaak.
• Subheading — Een tweede regel onder de titel.
• Call to action type — Kies hoe klanten met de balk interacteren.

CTA-gedrag

ℹ️ Wanneer Trigger App Event is geselecteerd, verschijnt een extra veld Trigger ID. Deze ID moet overeenkomen met de eventnaam die is geconfigureerd in de ontvangende app.

Best geschikt voor

• Store-wide sale-aankondigingen
• Updates van verzendbeleid
• Aanbiedingen voor beperkte tijd
• Algemene promoties

2️⃣ Lopende-tekst aankondiging (Running)

Het Running-type creëert een continue horizontaal scrollende ticker — vergelijkbaar met een nieuwsticker. De titeltekst animeert in een lus over de balk.

Wat het doet

• Toont één titelbericht in een soepele, eindeloze scroll
• Richting en snelheid zijn volledig configureerbaar
• Het veld Subheading is verborgen omdat de indeling is gebaseerd op één enkele scrollende regel

Beschikbare contentvelden

• Title — Het bericht dat over de balk scrollt. Ondersteunt rich text.
• Animation speed — Een schuifregelaar van 1 tot 80 die bepaalt hoe snel de tekst beweegt.
• Run left to right — Een selectievakje dat de standaard scrollrichting omkeert.

Hoe animatiesnelheid werkt

• Lagere waarden = langzamer, beter leesbaar scrollen
• Hogere waarden = snellere tickerbeweging
• De snelheid wordt dynamisch berekend op basis van de lengte van je titeltekst

CTA-gedrag

Running-aankondigingen ondersteunen knop, coupon, trigger en geen CTA. De optie Make entire bar clickable wikkelt het scrollgebied in een link.

Als er een knop of coupon wordt gebruikt, verschijnt deze statisch naast de scrollende tekst.

Best geschikt voor

• Meldingen voor flash sales
• Dringende verzenddeadlines
• Herhalende merkslogans
• Tijdsgevoelige herinneringen

⚠️ Belangrijk: Lopende-tekstbalken werken het beste met kortere titels. Zeer lange berichten kunnen voor ongelijkmatig scrolltempo zorgen op kleinere schermen.

3️⃣ Meerdere roterende aankondigingen (Multiple)

Het Multiple-type stelt je in staat om meerdere aankondigingen in één balk te stapelen die er automatisch doorheen roteert. Klanten zien één bericht tegelijk, met navigatiepijlen om handmatig te bladeren.

Wat het doet

• Cyclust door meerdere aankondigingslides
• Elke slide heeft zijn eigen titel, ondertitel en CTA
• Gaat automatisch verder op basis van een configureerbare weergaveduur
• Inclusief links/rechts-pijlnavigatie

Beschikbare contentvelden

• Announcement display duration — Een schuifregelaar van 1 tot 10 seconden die bepaalt hoe lang elke slide zichtbaar blijft voordat deze automatisch roteert.
• Announcement #1, #2, #3... — Elke slide is een onafhankelijk contentblok met eigen titel, ondertitel en CTA.
• Add new announcement — Voegt extra slides toe.

Slidelimieten

• Minimum: 2 slides
• Maximum: 20 slides

Je kunt slides opnieuw ordenen met de pijlen omhoog/omlaag, en slides verwijderen als je er meer dan 2 hebt.

CTA-gedrag

Elke slide kan zijn eigen onafhankelijke CTA hebben. De ene slide kan een knop hebben, een andere een coupon tonen, en een derde helemaal geen CTA.

Ondersteunde CTA-types per slide: knop, klikken op hele balk, coupon, trigger of geen.

Animatie-effecten

De overgang tussen slides wordt geregeld door de instelling Animation in het tabblad Design (Ontwerp):

• Slide — Standaard horizontale schuifovergang
• Fade — Soepele cross-fade tussen slides
• Cube — 3D-kuberotatie-effect
• Flip — Overgang in kaart-omdraaistijl

Best geschikt voor

• Meerdere promoties tegelijk tonen
• Verschillende productcategorieën aankondigen
• Roterende berichten over verzending, retourneren en trust
• Meerdere coupons uitlichten zonder de pagina vol te zetten

4️⃣ E-mailcollectiebanner (Email)

Het Email-type transformeert de aankondigingsbalk in een leadcaptureformulier. Het toont een e-mailinvoerveld en een verzendknop, en toont daarna een successtatus na verzending.

Wat het doet

• Toont een titel, ondertitel en een e-mailinvoerveld
• Toont een Success Message nadat een klant zijn e-mailadres heeft verzonden
• Kan een couponcode bevatten als beloning voor het inschrijven

Beschikbare contentvelden

• Title — Het hoofdbericht waarmee klanten worden uitgenodigd om zich in te schrijven.
• Subheading — Ondersteunende tekst onder de titel.
• Button text — Het label op de verzendknop. Standaard Subscribe als dit leeg wordt gelaten.
• Success Message — De bevestigingstekst die wordt getoond na een succesvolle e-mailverzending.
• Email Placeholder — De hinttekst in het lege e-mailinvoerveld.

CTA-gedrag

Email-collectiebalken ondersteunen twee CTA-modi:

• Button — Een standaard verzendknop. De balk verzamelt het e-mailadres en toont de successtatus.
• Coupon — Toont een couponcode naast of in plaats van het invoerveld, met een optionele kopieerknop.

De opties Make entire bar clickable en Trigger App Event zijn niet beschikbaar voor dit type, omdat de balk is opgebouwd rond het indienen van een formulier.

Voorbeeld van successtatus

In de app-preview zie je twee balkstatussen gestapeld:

1. Het actieve e-mailcollectieformulier
2. De succesberichtenbalk

In de live storefront zien klanten de successtatus pas nadat ze hun e-mailadres hebben verzonden.

Best geschikt voor

• Opbouwen van nieuwsbrieflijsten
• Kortingscodes aanbieden in ruil voor e-mailadressen
• Inschrijvingen voor wachtlijsten voor pre-launch
• VIP- of loyaliteitsprogramma's promoten

🔀 Hoe typekeuze zichtbare instellingen beïnvloedt

Het kiezen van een aankondigingstype verandert dynamisch welke velden verschijnen in het tabblad Content. Hier is een snel overzicht:

Velden die per type verschijnen

Contentitemlimieten

• Simple, Running, Email — Alleen het eerste contentitem wordt gebruikt. Zelfs als er meerdere items in het datamodel bestaan, wordt alleen het eerste weergegeven.
• Multiple — Alle contentitems worden gebruikt als individuele slides.

⚠️ Als je van Multiple naar Simple schakelt, worden extra slides op de achtergrond bewaard maar niet weergegeven. Ze verschijnen opnieuw als je terug schakelt naar Multiple.

🎯 Call-to-action-types uitgelegd

CTA-gedrag is grotendeels consistent over aankondigingstypes heen, met enkele type-specifieke uitzonderingen.

No call to action (geen call-to-action)

De balk is puur informatief. Er worden geen knoppen, links of klikbare gebieden weergegeven.

Button (knop)

Er verschijnt een klikbare knop. Je configureert:

• Button text — Wat de knop zegt
• Link — Waar de knop naartoe navigeert

Make entire bar clickable (hele balk klikbaar maken)

Het volledige aankondigingsgebied wordt een link. Klikken overal op de balk navigeert naar de geconfigureerde URL.

ℹ️ Als je balk geneste klikbare elementen bevat, zoals social icons, werken deze nog steeds onafhankelijk. Het klikken op de hele balk overschrijft deze niet.

Coupon (coupon)

Toont een gestileerd couponcodevak. Je configureert:

• Coupon Code — De daadwerkelijke kortingscode
• Show copy button — Voegt een kopieer-icoon met één klik toe naast de code

Trigger App Event (app-event activeren)

In plaats van naar een URL te navigeren, verstuurt de knop een browser CustomEvent. Je configureert:

• Trigger ID — De eventnaamstring (bijvoorbeeld, my-app:open-modal)

Andere apps of aangepaste thema-scripts die naar deze eventnaam luisteren, kunnen hierop reageren.

⚠️ Trigger-CTA's zijn niet beschikbaar op Email-collectiebalken, omdat de primaire actie van de balk het indienen van een formulier is.

🎨 Ontwerpgedrag per type

De meeste ontwerpinstellingen zijn universeel van toepassing, maar een paar gedragen zich anders afhankelijk van het type.

Animation-instelling (Design-tabblad)

• Simple & Email — Animation regelt het entree-effect wanneer de balk voor het eerst laadt.
• Running — Animation speed wordt geregeld in het tabblad Content, niet in het tabblad Design.
• Multiple — Animation regelt het overgangseffect tussen slides (slide, fade, cube, flip).

Social icons

Bannericons kunnen aan alle types worden toegevoegd. Je beheert de zichtbaarheid afzonderlijk voor desktop en mobiel.

• Iconen verschijnen statisch naast de content
• Elk icoon kan naar een URL linken of niet-klikbaar blijven

Sluiticoon

Alle types ondersteunen het sluiticoon. Wanneer ingeschakeld, kun je het volgende configureren:

• Appear again after — Hoeveel uur of dagen totdat de balk opnieuw verschijnt voor een terugkerende bezoeker

Als er geen herverschijntijd is ingesteld, blijft de balk permanent verborgen na het sluiten.

📱 Mobiel gedrag

Alle vier aankondigingstypes zijn volledig responsief. Er vinden echter automatisch lay-outaanpassingen plaats:

• Email-collectiebalken stapelen verticaal op mobiel — het invoerveld en de knop verschijnen op afzonderlijke regels
• Multiple roterende balken verkleinen de pijlvulling en verkleinen lettergroottes licht
• Running-balken behouden scrollsnelheid maar comprimeren icoongroottes als social icons zijn ingeschakeld
• Simple balken met knoppen kunnen tekst centreren op kleinere schermen, afhankelijk van het CTA-type

Je kunt het mobiele uiterlijk overschrijven met het paneel Custom CSS (aangepaste CSS) in het tabblad Design indien nodig.

💡 Use-casevoorbeelden

Voorbeeld 1 — Eenvoudige balk met coupon

• Type: Simple
• Title: "Zomersale is live ☀️"
• Subheading: "Gebruik code SUNNY voor 20% korting"
• CTA: Coupon
• Coupon code: SUNNY
• Resultaat: Een schone, statische balk met een kopieerbare kortingscode.

Voorbeeld 2 — Lopende ticker voor urgentie

• Type: Running
• Title: "Gratis verzending eindigt vanavond om middernacht ⏰"
• Animation speed: 25
• CTA: None
• Resultaat: Een continue scrollend urgentiebericht bovenaan de store.

Voorbeeld 3 — Meerdere slides voor verschillende collecties

• Type: Multiple
• Slide 1: "Tot 50% korting op Schoenen →" met knoplink naar /collections/shoes
• Slide 2: "Nieuwe collectie Accessoires →" met knoplink naar /collections/accessories
• Slide 3: "Gratis retourneren op alle bestellingen" zonder CTA
• Display duration: 4 seconden
• Resultaat: Eén balk die automatisch door drie verschillende promoties cyclet.

Voorbeeld 4 — E-mailcollectie met couponbeloning

• Type: Email
• Title: "Word lid van de VIP-lijst"
• Subheading: "Ontvang 15% korting op je eerste bestelling"
• Button text: "Ontvang mijn code"
• Success Message: "Welkom! Je code WELCOME15 is klaar."
• Email Placeholder: "Vul je e-mailadres in"
• Resultaat: Een leadcapturebalk die abonnees direct beloont met een coupon.

⚠️ Belangrijke opmerkingen en beperkingen

Type wisselen

Wisselen tussen types verwijdert je content niet. Houd er echter rekening mee:

• Wisselen van Multiple naar Simple verbergt extra slides
• Wisselen van Running naar Simple toont het veld Subheading opnieuw
• Wisselen naar Email verbergt Trigger ID-velden als deze eerder waren ingesteld

Controleer altijd je content nadat je van type hebt gewisseld.

Lengte lopende tekst

Zeer lange titels in lopende-tekstbalken kunnen zorgen voor ongelijkmatige scrolltiming, vooral op mobiel. Test met je daadwerkelijke berichtlengte voordat je publiceert.

Minimum aantal slides voor Multiple

Je kunt geen Multiple-aankondiging publiceren met minder dan 2 slides. Als je maar één bericht nodig hebt, gebruik dan het Simple-type.

Successtatus Email-balk

De successtatus verschijnt pas nadat een klant een e-mailadres heeft verzonden. De preview in de app toont beide statussen gestapeld ter referentie, maar live klanten zien eerst het formulier.

Klikken op hele balk en geneste elementen

Wanneer Make entire bar clickable is ingeschakeld, werkt het klikken op social icons of de kopieerknop nog steeds zoals verwacht. Het klikken op de hele balk negeert deze geneste interactieve elementen.

🎉 Eindresultaat

Door de vier aankondigingsbalktypen te begrijpen, kun je het juiste formaat koppelen aan je doel:

✅ Simple — Het beste voor enkele, statische promoties
✅ Running — Het beste voor urgentie en herhalende ticker-achtige berichten
✅ Multiple — Het beste voor het roteren van meerdere aanbiedingen in één placement
✅ Email — Het beste voor het verzamelen van leads en het laten groeien van abonneelijsten

Elk type ondersteunt hetzelfde ontwerpsysteem, placement-regels, planning en targetinglogica. Het verschil zit puur in hoe content wordt gepresenteerd en waarop wordt gereageerd.

Door het juiste type vanaf het begin te kiezen, zorg je ervoor dat je aankondiging native aanvoelt in je storefront en de juiste boodschap in het juiste formaat levert 🚀

Bijgewerkt op: 10/09/2026