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

# Corrigindo setas do carrossel ausentes no módulo de upsell V1.0 do Upcart

> Este artigo explica como corrigir setas do carrossel ausentes na loja ao vivo quando elas aparecem na prévia do editor.

<div id="overview">
  # Visão geral
</div>

Se você está enfrentando um problema em que as setas do carrossel estão ausentes no módulo de upsell do Upcart, isso geralmente se deve a um problema de compatibilidade com o tema da sua loja.

Para resolver, você pode adicionar as setas manualmente aplicando uma personalização com HTML personalizado nas configurações do editor do Upcart.

**Para acessar os campos de código personalizado no Upcart:**

**Cart Editor** > **Settings**, depois as abas **Custom HTML** e **Custom CSS**. Settings é uma linha de abas — o que não couber fica atrás de **More settings**.

***

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

Para esta correção, abra o menu suspenso de HTML e selecione **"Scripts (before load)"**, depois cole o seguinte código nessa seção:

```
<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>
  **Não use um `document.querySelector` simples aqui.** O Upcart é renderizado dentro de um shadow root na maioria das lojas (é o padrão para instalações mais recentes), e o `document.querySelector` não consegue enxergar dentro de um — o script não encontraria nada e, sem as proteções de `if`, geraria um erro em `null`. A linha `host?.shadowRoot ?? document` acima funciona nos dois casos.
</Warning>

<Note>
  **Nota sobre legado:** os callbacks `window.upcartOnCartOpened` ainda funcionam, mas estão obsoletos e registram avisos no console. Use `upcartSubscribeCartOpened` em todos os scripts novos.
</Note>

Veja como suas configurações de Custom HTML devem ficar no Upcart:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Configurações de Custom HTML do Upcart com o script das setas do carrossel em Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

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

Se você ainda tiver problemas com a posição das setas do carrossel, tente aplicar a seguinte correção de CSS:

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

***

<div id="explanation">
  ## Explicação
</div>

Frequentemente usamos pseudoelementos CSS (`::before`) contidos dentro dos botões para exibir as setas do carrossel. No entanto, alguns temas de loja optam por bloquear a renderização de pseudoelementos, o que faz as setas do carrossel desaparecerem do cart drawer.

Isso cria um problema em que as setas do carrossel de upsell aparecem corretamente na prévia do editor, mas não na loja ao vivo.