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

# Upcart x Replo landingspaginabuilder

> Dit artikel legt uit hoe je Replo instelt zodat de Upcart-drawer opent wanneer een product aan de cart wordt toegevoegd.

Replo is een krachtige landingspaginabuilder, maar het standaard "Add to Cart"-gedrag leidt door naar de Shopify-cartpagina. Dit onderbreekt de bedoelde Upcart-ervaring, die een uitschuivende drawer gebruikt.

Met een eenvoudig JavaScript-fragment kun je Replo Upcart laten informeren wanneer een product wordt toegevoegd, zodat de klant op dezelfde pagina blijft en de drawer direct opent.

Dit laat zien hoe JavaScript niet alleen voor Upcart-integratie kan worden gebruikt, maar ook voor bredere cartaanpassingen in je winkel.

***

<div id="why-this-integration-matters">
  ## Waarom deze integratie belangrijk is
</div>

Standaard ondersteunt Replo meerdere gedragingen na het toevoegen aan de cart:

* Doorverwijzen naar de Shopify-cartpagina
* Doorverwijzen naar de checkout
* Op de pagina blijven (geen drawer-interactie)

Upcart opent niet automatisch tenzij je dit expliciet activeert. Deze configuratie zorgt ervoor dat de drawer direct opent nadat op de Replo "Add to Cart"-knop is geklikt.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Stap 1: open de productpagina in Replo
</div>

1. Open je product- of landingspagina in de Replo-editor
2. Selecteer de **Add to Cart**-knop in de pagina-indeling
3. Klik in de rechterzijbalk op het tabblad **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Replo-editor Interactions-tabblad waarbij een On Click-interactie aan de Add to Cart-knop wordt toegevoegd" />

<div id="step-2-add-a-second-interaction">
  ## Stap 2: voeg een tweede interactie toe
</div>

1. Controleer of de knop al de **Add Product to Cart**-interactie gebruikt
2. Klik op het `+`-pictogram onder **On Click**
3. Selecteer **Run JavaScript** in de lijst met acties
4. Plak het volgende in het code-invoerveld:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Dit vertelt Upcart om de drawer te openen zodra het product aan de cart is toegevoegd.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Stap 3: schakel de Replo-redirect naar de cartpagina uit
</div>

1. Selecteer opnieuw de **Add Product to Cart**-interactie
2. Schakel de toggle **Go to cart after?** uit

Dit voorkomt dat Replo doorverwijst naar de Shopify-cartpagina, wat de Upcart-drawer volledig zou omzeilen.

<div id="step-4-preview-and-publish">
  ## Stap 4: bekijk een voorbeeld en publiceer
</div>

1. Klik op **Preview** in Replo om de interactie te testen
2. Voeg een product toe aan de cart en controleer of de Upcart-drawer automatisch opent
3. Klik na bevestiging op **Publish Page** om de wijzigingen live te zetten

***

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

* Deze configuratie moet worden toegepast op **elke pagina** waar je Replo + Upcart samen gebruikt
* De functie `window.upcartRegisterAddToCart();` komt uit de publieke API van Upcart en werkt zonder extra code-installaties
* Dit werkt voor zowel mobiele als desktopversies van Replo-pagina's

<div id="notes-2">
  # **Opmerkingen**
</div>

Replo zou nu moeten stoppen met doorverwijzen naar de Shopify-cartpagina en in plaats daarvan Upcart moeten informeren wanneer een artikel aan de cart wordt toegevoegd.

Let op: je moet dit proces voltooien voor elke productpagina die je ontwerpt in Replo Landing Page Designer.