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

# Fehlende Karussellpfeile im Upsell-Modul V1.0 von Upcart beheben

> Dieser Artikel erklärt, wie du fehlende Karussellpfeile im Live-Storefront behebst, wenn sie in der Editor-Vorschau erscheinen.

<div id="overview">
  # Übersicht
</div>

Wenn bei dir das Problem auftritt, dass die Karussellpfeile im Upsell-Modul von Upcart fehlen, liegt das in der Regel an einem Kompatibilitätsproblem mit dem Theme deines Shops.

Um dies zu beheben, kannst du die Pfeile manuell hinzufügen, indem du eine Anpassung über benutzerdefiniertes HTML in den Editor-Einstellungen von Upcart anwendest.

**So greifst du auf die Felder für benutzerdefinierten Code in Upcart zu:**

**Cart Editor** > **Settings**, dann die Tabs **Custom HTML** und **Custom CSS**. Settings ist eine Reihe von Tabs — alles, was nicht hineinpasst, befindet sich hinter **More settings**.

***

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

Öffne für diese Lösung das HTML-Dropdown-Menü und wähle **„Scripts (before load)“**, füge dann den folgenden Code in diesen Bereich ein:

```
<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>
  **Verwende hier keinen bloßen `document.querySelector`.** Upcart wird in den meisten Shops innerhalb eines Shadow Root gerendert (das ist der Standard für neuere Installationen), und `document.querySelector` kann nicht hineinsehen — das Skript würde nichts finden und ohne die `if`-Absicherungen bei `null` einen Fehler werfen. Die Zeile `host?.shadowRoot ?? document` oben funktioniert in beiden Fällen.
</Warning>

<Note>
  **Legacy-Hinweis:** `window.upcartOnCartOpened`-Callbacks funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende `upcartSubscribeCartOpened` für alle neuen Skripte.
</Note>

So sollten deine Einstellungen für benutzerdefiniertes HTML in Upcart aussehen:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Upcart-Einstellungen für Custom HTML mit dem Karussellpfeil-Skript in Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

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

Wenn du weiterhin Probleme mit der Position der Karussellpfeile hast, versuche die folgende CSS-Korrektur:

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

***

<div id="explanation">
  ## Erklärung
</div>

Wir verwenden häufig CSS-Pseudo-Elemente (`::before`), die in den Schaltflächen enthalten sind, um die Karussellpfeile anzuzeigen. Einige Shop-Themes blockieren jedoch das Rendern von Pseudo-Elementen, wodurch die Karussellpfeile aus dem Cart Drawer verschwinden.

Das führt zu dem Problem, dass die Karussellpfeile des Upsell-Moduls in der Editor-Vorschau korrekt erscheinen, aber nicht im tatsächlichen Live-Storefront.