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

# 🎋 Hoe je een announcement bar instelt

> ℹ️ **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 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:

| Type | Beste voor |
| ----- | ----- |
| **Simple** (Eenvoudig) | Een enkel statisch bericht |
| **Running** (Lopend) | Een scrollende marquee of ticker |
| **Multiple** (Meerdere) | Roteerende slides met meerdere berichten |
| **Email** (E-mail) | Het verzamelen van bezoekers-e-mailadressen |

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