> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aankondigingenmodule

> Leer hoe je de aankondigingsbalk in je Upcart-drawer aanpast, waaronder hoogte, positie, afteltimer, tekstopmaak en kleuren.

<div id="height">
  # Hoogte
</div>

De instelling Height bepaalt hoe dik de aankondigingsbalk wordt weergegeven. Er zijn drie opties: **Slim**, **Normal** en **Thick**. Slim houdt de drawer compacter en maakt ruimte voor de winkelwageninhoud — vooral handig op kleinere schermen. Normal zit daar tussenin. Thick geeft meer visuele nadruk, zodat je boodschap opvalt bij klanten.

<div id="position">
  # Positie
</div>

Gebruik de instelling Position om te kiezen of de aankondigingsbalk **Before products** of **After products** in de cart drawer verschijnt.

* **Before products** plaatst de balk bovenaan de body van de winkelwagen, direct onder de header.
* **After products** plaatst de balk onderaan de body van de winkelwagen, net boven de footer — onder de notitie- en upsellmodules als die daar ook zijn geplaatst.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="Twee Upcart-winkelwagens die de aankondigingsbalk boven en onder de producten vergelijken" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## Timerduur
</div>

Wil je dat de aankondiging na een bepaalde tijd verloopt, stel dan een aftelling in via het veld **Timer duration**. Dit accepteert `MM:SS` — `05:00` voor vijf minuten, `00:30` voor dertig seconden. Seconden moeten `00`–`59` zijn; het veld weigert alles wat hoger is.

De aftelling loopt alleen als je aankondigingstekst de timervariabele bevat. Zodra de tijd om is, wordt de hele aankondigingsbalk automatisch uit de winkelwagen verwijderd.

<Note>
  De ingebouwde afteltimer is sessiegebaseerd en telt af vanaf een ingesteld aantal minuten. Terugkerende of dagelijkse aftellingen die op een specifiek tijdstip resetten (bijvoorbeeld elke dag aftellen tot 14:00 uur) worden niet ondersteund. Deze functionaliteit is momenteel niet beschikbaar in Upcart.
</Note>

<div id="announcement-text">
  ## Aankondigingstekst
</div>

In deze sectie kun je het bericht invoeren en opmaken dat in de aankondigingsbanner wordt weergegeven. Je kunt specifieke delen van de tekst opmaken met de opmaakbalk boven het invoerveld, met opties voor vet, cursief, onderstrepen en kleur.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="Kleurkiezer geopend voor het opmaken van tekst in de editor voor aankondigingstekst" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  Het veld Announcement Text ondersteunt geen hyperlinks — er is geen link- of URL-knop in de opmaakwerkbalk, en geplakte `<a>`-tags of Markdown-links worden bij het opslaan verwijderd. Om de aankondiging klikbaar te maken of een link toe te voegen, gebruik je in plaats daarvan de module **Custom HTML** (zie hieronder).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Een link of URL toevoegen aan de aankondiging
</div>

Omdat het ingebouwde veld Announcement Text geen hyperlinks weergeeft, kun je de aankondigingsbalk vervangen of aanvullen door een link toe te voegen met Custom HTML:

1. Ga naar **Upcart > Cart Editor > Settings > Custom HTML**.

2. Stel **HTML Location** in op **Above announcements/rewards** (om boven de aankondigingsbalk te verschijnen) of **Below header/announcements/rewards** (om er direct onder te verschijnen).

3. Plak een snippet met je link, bijvoorbeeld:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. Klik op **Save** en test vervolgens in je live winkelwagen.

Meer informatie over Custom HTML-locaties en styling vind je in [Custom HTML](/nl/upcart/custom_html) en [Custom CSS](/nl/upcart/custom_css). Het supportteam van Upcart schrijft of debugt geen aangepaste code — neem contact op met een Shopify Expert als je hulp nodig hebt bij het bouwen ervan.

Als je de aftelfunctie gebruikt, voeg dan de timervariabele rechtstreeks in je bericht in. Gebruik `{{timer}}` voor V2-winkelwagens of `{TIMER}` voor V1-winkelwagens.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="Veld voor aankondigingstekst met de aftelvariabele van de timer toegevoegd aan het bericht" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## Belangrijk
</div>

Typ de timervariabele (`{{timer}}` voor V2, `{TIMER}` voor V1) handmatig in plaats van deze te kopiëren en te plakken. Zo voorkom je verborgen opmaakproblemen die kunnen verhinderen dat de timer correct wordt weergegeven in je live winkelwagen.

<div id="font-size">
  # Lettergrootte
</div>

Je kunt de grootte van de aankondigingstekst regelen met de schuifregelaar, met opties van 10px tot 24px. Dit zorgt voor leesbaarheid op zowel mobiel als desktop.

<div id="colors">
  # Kleuren
</div>

Met Background Color bepaal je de algemene vulkleur van de aankondigingsbalk. Met Border Color kun je de horizontale lijnen boven en onder de banner aanpassen voor een gestileerde containerlook.

<div id="advanced-timer-configuration">
  # Geavanceerde timerconfiguratie
</div>

Voor extra functionaliteit kun je JavaScript gebruiken om de afteltimer aan te passen. Voeg je script toe in de sectie **"Scripts (Before Load)"** in plaats van de Custom HTML-module. Dit is een vereiste voor de laadtiming, geen beveiligingsbeperking — Custom HTML voert wel scripts uit, maar die draaien te laat om betrouwbaar aan te haken op de laadgebeurtenis van de winkelwagen. De sectie "Scripts (Before Load)" voert je code uit voordat de winkelwagen laadt, zodat callbacks zoals `upcartSubscribeCartLoaded` correct worden aangeroepen. Voorbeeldcode:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

Opmerking over legacy: window\.upcartOnCartLoaded werkt nog steeds, maar is verouderd en toont een waarschuwing in de console. Gebruik upcartSubscribeCartLoaded voor alle nieuwe scripts.

Test de plaatsing en syntaxis van je code zorgvuldig. Sommige platformbeperkingen kunnen nog steeds van invloed zijn op hoe scripts worden verwerkt.