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

# Fixing missing carousel arrows in Upcart's upsell module V1.0

> This article explains how to fix missing carousel arrows on the live storefront when they appear in the editor preview.

# Overview

If you're experiencing an issue where the carousel arrows are missing in Upcart's upsell module, it's usually due to a compatibility issue with your store's theme.

To resolve this, you can manually add the arrows by applying a customization using custom HTML in Upcart's editor settings.

**To access the custom code fields in Upcart:**

**Cart Editor** > **Settings**, then the **Custom HTML** and **Custom CSS** tabs. Settings is a row of tabs — anything that doesn't fit sits behind **More settings**.

***

## HTML

For this fix, open the HTML dropdown menu and select **"Scripts (before load)"**, then paste the following code into that section:

```
<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>
  **Don't use a bare `document.querySelector` here.** Upcart renders inside a shadow root on most stores (it's the default for newer installs), and `document.querySelector` can't see into one — the script would find nothing and, without the `if` guards, throw on `null`. The `host?.shadowRoot ?? document` line above works either way.
</Warning>

<Note>
  **Legacy note:** `window.upcartOnCartOpened` callbacks still work but are deprecated and log console warnings. Use `upcartSubscribeCartOpened` for all new scripts.
</Note>

Here's what your custom HTML settings should look like in Upcart:

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

## CSS

If you're still having issues with the position of the carousel arrows, try applying the following CSS fix:

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

***

## Explanation

We often use CSS pseudo-elements (`::before`) that are contained inside the buttons to display the carousel arrows. However, some store themes choose to block the rendering of pseudo-elements, which causes the carousel arrows to disappear from the cart drawer.

This creates an issue where the upsell carousel arrows appear correctly in the editor preview but not on the actual live storefront.