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

# Je eerste checkout-widget aanmaken

> Begeleiding bij het instellen van een checkout-widget in Aftersell, van het selecteren en aanmaken van de widget tot het aanpassen van de stijl en het gedrag.

In dit artikel leiden we je door het proces van het instellen van een checkout-widget in Aftersell. Om meer te leren over de verschillende beschikbare widgettypes, [klik hier](/nl/aftersell/checkout_widget_types).

Laten we beginnen.

***

<div id="step-1-selecting-your-widget">
  ## Stap 1: Je widget selecteren
</div>

Selecteer eerst de widget die aansluit bij je behoeften. Of het nu een upsell- of testimonial-widget is, Aftersell biedt een reeks keuzes die aansluiten op jouw voorkeuren.

In deze tutorial selecteren we de upsell-widget.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3302868c50e12461761e6a1300820bd7" alt="Aftersell Checkout-pagina met widgetkaarten voor Upsells, Cart Controls, Rewards en Testimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## Stap 2: Je widget aanmaken
</div>

Klik op "Create Upsell" om te beginnen met het opbouwen van je upsell-widget.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e89c35b59c09c6fd858e910f46d9fcc0" alt="Upsells-paneel van de Checkout Editor met een pijl die wijst naar de knop Create upsell" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## Stap 3: Een preset selecteren
</div>

Kies uit een lijst met geoptimaliseerde widget-presets of begin helemaal opnieuw.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-new-campaign-preset-options.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d64607da81a3a4b43e9d5c7c9a7420c2" alt="Scherm Create new campaign met preset-opties zoals upsells met één en meerdere producten" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## Stap 4: Stijl en gedrag bewerken
</div>

Tijd om de details te verfijnen. Pas de stijl en het gedrag van je widget tot in de puntjes aan. Stel de triggerlogica bij, verfijn de productselectie of geef het ontwerp die laatste finishing touch.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-single-product-upsell-editor.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e9560a037ceb877ea2d47d261278934b" alt="Editor voor upsell met één product met trigger-, product- en stijlinstellingen en live preview" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## Stap 5: Widgetstatus inschakelen
</div>

Zorg ervoor dat de status van je widget op actief staat.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7f9cedd5ace808ad47a077090be3e29d" alt="Checkout Editor met de Status-schakelaar van de upsell ingeschakeld om de widget te activeren" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

Nu je checkout-widget live is in Aftersell, wacht de laatste stap: de widget in je Shopify-checkout plaatsen. Wil je weten hoe? Klik hieronder om dieper in het proces te duiken.

[Meer informatie](/nl/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)