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

# Checkout-widgets configureren

> Volledige stapsgewijze gids voor het configureren van checkout-widgets in Aftersell, inclusief alle widgettypes, plaatsingsopties en best practices voor conversie op mobiel en desktop

Deze gids leidt je door het configureren en plaatsen van checkout-widgets in Aftersell, van het inschakelen van widgets tot het optimaliseren van de plaatsing in Shopify Checkout voor maximale conversiepercentages..

**Let op:** Checkout-widgets zijn alleen beschikbaar voor Shopify Plus-merchants vanwege de beperkingen van Shopify's Checkout Extensibility API.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Stap 1: Schakel je widget in binnen Aftersell
</div>

Voordat je widgets aan je checkout toevoegt, moet je ze inschakelen in het Aftersell-beheer.

1. Ga naar het tabblad **Checkout** in je Aftersell-beheer
2. Selecteer het widgettype dat je wilt configureren ([Upsells](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images) of [Text](#text))
3. Klik op **Create** om een nieuwe widget te bouwen of selecteer een bestaande widget om te bewerken
4. Configureer je widgetinstellingen (zie [Widgettypes en configuratie](#widget-types-and-configuration) hieronder)
5. Klik op de schakelaar **Enable** in de rechterbovenhoek van de widgetinstellingen
6. Voor beperkte of geavanceerde upsells: zorg dat je aangepaste triggers inschakelt voordat je verdergaat

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Stap 2: Open de Shopify Checkout Editor
</div>

Er zijn twee manieren om de Shopify Checkout Editor te openen:

**Optie 1: Vanuit Shopify Admin**

1. Ga naar **Settings** in je Shopify Admin
2. Klik op **Checkout** in de linkernavigatie
3. Klik op **Customize** naast het gewenste checkout-profiel

**Optie 2: Vanuit Aftersell**

1. Klik op de knop **Open Shopify Checkout Editor** rechtsonder op de pagina van de Aftersell Checkout-editor

💡 **Tip:** Optie 1 geeft je meer controle over welk checkout-profiel je bewerkt. We raden aan eerst te testen op een conceptversie voordat je deze live zet.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Shopify admin-startpagina met de link Settings gemarkeerd om de checkout-editor te openen" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Stap 3: Voeg het app block toe aan je checkout
</div>

1. Klik in de Shopify Checkout Editor op **Add app block**
2. Selecteer de gewenste Aftersell-widget in de lijst met beschikbare widgets
3. Kies de juiste plaatsing voor je widget (zie [Beschikbare plaatsingen](#available-placements) hieronder)
4. Als je wilt dat je widgets in de Shop Pay-checkout worden getoond, vink dan de optie [**Include app block in Shop Pay**](/nl/aftersell/show_checkout_widgets_in_shop_pay) aan
5. Klik op **Save** in de rechterbovenhoek

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Shopify Checkout Editor met een pijl die wijst naar de knop Add block in de zijbalk" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Stap 4: Positioneer je widget
</div>

1. Sleep het app block naar de gewenste locatie binnen het geselecteerde plaatsingsgebied
2. Klik op **Save** in de rechterbovenhoek

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Blokkenlijst van de Shopify Checkout Editor naast een live checkout-voorbeeld met Aftersell-widgets" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Widgettypes en configuratie
</div>

<div id="placements">
  ## Plaatsingen
</div>

Plaatsingen worden aangemaakt in de Aftersell Checkout-editor en stellen je in staat om meerdere widgets van hetzelfde type op dezelfde checkout-pagina te draaien.

Als je bijvoorbeeld twee upsell-aanbiedingen op dezelfde pagina wilt tonen, moet elke aanbieding aan een andere plaatsing worden toegewezen.

<div id="available-placements">
  ### Beschikbare plaatsingen
</div>

* **Default placement**: De primaire plaatsing. Elk widgettype begint hier.
* **Additional placement 1**: Een tweede plaatsingsslot om nog een widget van hetzelfde type op dezelfde pagina te tonen.
* **Additional placement 2**: Een derde plaatsingsslot voor verdere scheiding.

Je kunt ook nieuwe plaatsingen rechtstreeks aanmaken vanuit de plaatsingsdropdown in Aftersell door **+ Add new placement** te selecteren.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Aftersell Checkout-editor met de plaatsingsdropdown boven de Upsells-lijst en het voorbeeld" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Wanneer gebruik je meerdere plaatsingen
</div>

Gebruik meerdere plaatsingen wanneer je:

* Meer dan één widget van hetzelfde type op één checkout-pagina wilt tonen
* Widgets in verschillende secties van de pagina wilt tonen
* Verschillende doelgroepen wilt targeten met verschillende aanbiedingen
* Widgets wilt draaien met vergelijkbare of overlappende triggers

Aftersell gebruikt een prioriteitssysteem. Je kunt binnen dezelfde plaatsing geen meerdere widgets met identieke triggers draaien. Als twee widgets dezelfde triggervoorwaarden delen in één plaatsing, wordt slechts één getoond op basis van prioriteit.

Om vergelijkbare triggers te gebruiken, wijs je elke widget toe aan een andere plaatsing, zodat ze onafhankelijk kunnen draaien zonder conflict.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Plaatsingen matchen in de Shopify Checkout Editor
</div>

Elke plaatsing in Aftersell komt overeen met een apart app block in de Shopify Checkout Editor. De plaatsing die in Shopify is geselecteerd, moet overeenkomen met de plaatsing die in Aftersell is ingesteld.

Als een widget bijvoorbeeld is toegewezen aan **Additional placement 1** in Aftersell, moet het app block in Shopify ook op **Additional placement 1** staan.

Als de plaatsingen niet overeenkomen, verschijnt de widget mogelijk niet of wordt deze op de verkeerde locatie getoond.

**Belangrijk:** Een niet-overeenkomende plaatsing is een van de meest voorkomende redenen dat een widget niet wordt getoond. Als een widget niet verschijnt, controleer dan of de plaatsing in zowel Aftersell als Shopify overeenkomt voordat je verder gaat met probleemoplossing.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Shopify Checkout Editor Upsell Widget-blokinstellingen met de dropdown Placement ingesteld op een extra plaatsing" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

Bied producten aan klanten aan tijdens de checkout om je gemiddelde bestelwaarde (AOV) te verhogen.

**Configuratieopties:**

**Widgetmodi:**

* **Single Product Upsell:** Toon één product met een Add to Cart-knop
* **Multi-Product Upsell:** Toon meerdere producten in een stapel- of carrousel-lay-out, zodat klanten meerdere aanbiedingen kunnen accepteren
* **Checkmark Upsell:** Toon één product met een selectievakje in plaats van een Add to Cart-knop (ideaal voor goedkope add-ons zoals verzendbescherming)

**Productselectiemethoden:**

* **Specific Products:** Selecteer handmatig individuele producten voor de upsell
* **Collection:** Selecteer een collectie en toon maximaal 5 willekeurige producten (producten die al in de winkelwagen zitten, worden automatisch uitgesloten)
* **Automatic upsell(s):** Beveel automatisch producten aan op basis van de winkelwageninhoud
* **Most Expensive Product:** Upsell automatisch het duurste product uit de winkelwagen
* **Spend threshold:** Beveel producten aan die klanten helpen beloningsdrempels te bereiken (alleen selecteerbaar zodra **Show rewards bar** is ingeschakeld op dezelfde upsell-widget)
* **Strategy:** Selecteer dynamisch een product met behulp van op regels gebaseerde targeting. Alleen zichtbaar in winkels waar [Strategies](/nl/aftersell/strategies_overview) is ingeschakeld

**Extra functies:**

* Voeg kortingen direct toe binnen de widget
* Vergrendel abonnementsplannen op specifieke opties
* Toon productreviewsterren (vereist een compatibele review-app)
* Stel een maximumaantal geaccepteerde aanbiedingen per widget in (alleen upselltypes Single en Multi)

[Meer informatie over upsell-widgets](/nl/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

Laat klanten hun winkelwagen rechtstreeks op de checkout-pagina aanpassen.

**Beschikbare bedieningselementen:**

* **Variant selector:** Wissel naar een andere variant die op voorraad is
* **Quantity selector:** Pas productaantallen aan
* **Remove item:** Show Remove Item Button verwijdert upsell-producten uit de winkelwagen. Een bijbehorende instelling, **Allow Removal of Non-Upsell Products** (standaard uit), breidt het verwijderen uit naar alles in de winkelwagen
* **Subscription selector:** Wijzig de abonnementsfrequentie
* **Subscription upgrade:** Upgrade eenmalige aankopen naar abonnementen
* **Custom text:** Voeg aangepaste tekst toe onder regelitems

**Producttargeting:**

* Toepassen op alle producten in de winkelwagen
* Alleen toepassen op geselecteerde producten
* Toepassen op alle producten behalve de geselecteerde

**Extra functies:**

* Toon productreviewsterren voor producten in de winkelwagen

[Meer informatie over cart controls](/nl/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

Toon een voortgangsbalk die klanten laat zien hoe dicht ze bij een beloning zijn.

**Configuratieopties:**

* Beloningsbasis: **Cart total** of **Item count**
* Bedragsbasis (voor Cart total): **Order total (includes shipping and tax)**, **Subtotal (before discounts)** of **Subtotal after discounts (excludes tax and shipping)**
* Beloningsbericht en styling
* Kleuren en ontwerp van de voortgangsbalk

**Best practices:**

* Combineer met upsell-widgets om klanten te helpen beloningsdrempels te bereiken
* Gebruik het producttype spend threshold in upsells om automatisch producten aan te bevelen die het verschil overbruggen
* Maak beloningen in Shopify met Automatic Discounts (voor kortingsbeloningen) of Shipping Rules (voor gratis verzending)
* Gebruik **Subtotal after discounts (excludes tax and shipping)** als bedragsbasis bij het aanbieden van gratis verzending, zodat de balk overeenkomt met Shopify's eigen drempelevaluatie wanneer kortingscodes worden toegepast

[Meer informatie over rewards](/nl/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

Bouw vertrouwen op met aangepaste pictogrammen en tekst om de conversie in de checkout te verhogen.

**Configuratieopties:**

* Badge-lay-out: verticale stapel of horizontale weergave
* Aangepaste pictogrammen en tekst voor elke badge
* Opties voor styling en tussenruimte

**Best practices:**

* Benadruk beveiligingsfuncties (veilige checkout, SSL-versleuteling)
* Toon garanties (geld-terug-garantie, gratis retourneren)
* Toon verzendvoordelen (gratis verzending, snelle levering)

[Meer informatie over trust badges](/nl/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonials
</div>

Toon klantreviews rechtstreeks in de checkout om vertrouwen op te bouwen.

**Configuratieopties:**

* **Flex Testimonials (aanbevolen):** Haalt automatisch echte reviews op uit je review-app (Judge.me, Klaviyo, Okendo of Yotpo)
* Selectiemodus: Manual (kies specifieke reviews) of Dynamic (haal automatisch reviews op op basis van de winkelwageninhoud)
* Weergavetype: horizontale carrousel of verticale stapel
* Filter op minimale beoordeling

**Installatievereisten:**

* Configureer de inloggegevens van je review-app in Settings > Product Reviews
* Reviews synchroniseren automatisch binnen 24 uur, daarna wekelijks

[Meer informatie over testimonials](/nl/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

Laat klanten notities aan hun bestelling toevoegen.

**Configuratieopties:**

* Handmatige notities: vrij tekstveld voor klantinvoer
* Vooraf geschreven notities: selectievakjes voor opties zoals cadeauverpakking of milieuvriendelijke verpakking

[Meer informatie over notes](/nl/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

Upload en toon aangepaste afbeeldingen in je checkout.

**Configuratieopties:**

* Afbeelding uploaden
* Schuifregelaar voor breedteaanpassing
* Geen minimale groottevereiste

[Meer informatie over images](/nl/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Text
</div>

Voeg een banner met aangepaste tekst toe in je checkout.

**Configuratieopties:**

* **Container Style:** **Plain Text** (de standaard) of **Badge**. De onderstaande bannerkleuren verschijnen pas zodra je Badge kiest
* **Banner Type** (alleen Badge):
  * **Info (Blue):** blauwe achtergrond met informatiepictogram
  * **Success (Green):** groene achtergrond met vinkje
  * **Warning (Yellow):** gele achtergrond met waarschuwingsdriehoek
  * **Critical (Red):** rode achtergrond met uitroepteken
* Tekstgrootte op het veld **Body** (Small of Base) — het veld Heading heeft geen groottecontrole
* Uitlijning op zowel het Heading- als Body-veld
* Tussenruimte: None, Extra Tight, Tight, Base, Loose of Extra Loose

[Meer informatie over text](/nl/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Probleemoplossing
</div>

<div id="widgets-not-displaying">
  ### Widgets worden niet getoond
</div>

Als je widgets na de installatie niet worden getoond:

1. Controleer of de widget is ingeschakeld in het Aftersell-beheer
2. Controleer of het app block is toegevoegd in de Shopify Checkout Editor
3. Bevestig dat het app block is opgeslagen in de Shopify Checkout Editor
4. Controleer of de juiste plaatsing is geselecteerd. Bij het toevoegen van een app block in de Shopify Checkout Editor moet je de overeenkomende plaatsing kiezen, zoals Default placement, Additional placement 1 of Additional placement 2. Als de verkeerde plaatsing is geselecteerd, verschijnt de widget mogelijk niet of wordt deze op de verkeerde locatie getoond. Verwijder het app block en voeg het opnieuw toe, waarbij je zorgt dat de juiste plaatsing is geselecteerd.
5. Voor Shop Pay: controleer of "Include app block in Shop Pay" is aangevinkt
6. Wis je browsercache of probeer de incognitomodus
7. Wacht een paar minuten tot de wijzigingen zijn doorgevoerd

<div id="shop-pay-widgets-not-showing">
  ### Shop Pay-widgets worden niet getoond
</div>

Om widgets in de Shop Pay-checkout te tonen:

1. Open de widget in de Shopify Checkout Editor
2. Vink de optie **Include app block in Shop Pay** aan onder Checkout behaviour
3. Sla je wijzigingen op

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Zijbalk van de Shopify Checkout Editor met het Aftersell Upsell Widget app block onder Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Meer informatie over Shop Pay-widgets](/nl/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Volgende stappen
</div>

* [Leer meer over checkout-triggers](/nl/aftersell/checkout_triggers) om widgets voorwaardelijk te tonen
* [Stel checkout A/B-tests in](/nl/aftersell/checkout_a_b_testing) om plaatsingen te optimaliseren
* [Configureer checkout-branding](/nl/aftersell/checkout_branding_settings) om aan te sluiten bij het ontwerp van je winkel
* [Verken geavanceerde upsell-strategieën](/nl/aftersell/best_practices) om je AOV te maximaliseren