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

# Ontbrekende carrouselpijlen repareren in de upsell-module V1.0 van Upcart

> Dit artikel legt uit hoe je ontbrekende carrouselpijlen op de live storefront repareert wanneer ze wel in de editorpreview verschijnen.

<div id="overview">
  # Overzicht
</div>

Als je een probleem ervaart waarbij de carrouselpijlen ontbreken in de upsell-module van Upcart, komt dit meestal door een compatibiliteitsprobleem met het thema van je winkel.

Om dit op te lossen kun je de pijlen handmatig toevoegen door een aanpassing toe te passen met custom HTML in de editorinstellingen van Upcart.

**Zo open je de velden voor custom code in Upcart:**

**Cart Editor** > **Settings**, daarna de tabbladen **Custom HTML** en **Custom CSS**. Settings is een rij tabbladen — alles wat er niet in past, staat achter **More settings**.

***

<div id="html">
  ## HTML
</div>

Open voor deze oplossing het HTML-dropdownmenu en selecteer **"Scripts (before load)"**, en plak vervolgens de volgende code in dat gedeelte:

```
<script>
  window.upcartSubscribeCartOpened(() => {
    setTimeout(() => {
      // The cart may render inside a shadow root, where document.querySelector
      // cannot reach it. Search the shadow root when there is one.
      const host = document.getElementById('upCart');
      const scope = host?.shadowRoot ?? document;

      const buttonLeft = scope.querySelector('.control-arrow.control-prev');
      if (buttonLeft) buttonLeft.innerText = "<";

      const buttonRight = scope.querySelector('.control-arrow.control-next');
      if (buttonRight) buttonRight.innerText = ">";
    }, 300);
  });
</script>
```

<Warning>
  **Gebruik hier geen kale `document.querySelector`.** Upcart rendert in de meeste winkels binnen een shadow root (dit is de standaard voor nieuwere installaties), en `document.querySelector` kan daar niet in kijken — het script zou niets vinden en zonder de `if`-controles een fout geven op `null`. De regel `host?.shadowRoot ?? document` hierboven werkt in beide gevallen.
</Warning>

<Note>
  **Legacy-opmerking:** `window.upcartOnCartOpened`-callbacks werken nog steeds, maar zijn deprecated en loggen waarschuwingen in de console. Gebruik `upcartSubscribeCartOpened` voor alle nieuwe scripts.
</Note>

Zo zouden je Custom HTML-instellingen er in Upcart uit moeten zien:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Upcart Custom HTML-instellingen met het script voor carrouselpijlen in Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

<div id="css">
  ## CSS
</div>

Als je nog steeds problemen hebt met de positie van de carrouselpijlen, probeer dan de volgende CSS-oplossing:

```
.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}
```

***

<div id="explanation">
  ## Uitleg
</div>

We gebruiken vaak CSS-pseudo-elementen (`::before`) binnen de knoppen om de carrouselpijlen weer te geven. Sommige winkelthema's blokkeren echter het renderen van pseudo-elementen, waardoor de carrouselpijlen uit de cart drawer verdwijnen.

Dit veroorzaakt een situatie waarbij de pijlen van de upsell-carrousel correct verschijnen in de editorpreview, maar niet op de daadwerkelijke live storefront.