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

# Alterar a cor da seta do upsell

> Use CSS personalizado para ajustar a cor das setas de navegação no seu carrossel de upsell.

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

Por padrão, as setas do carrossel na seção de upsell do Upcart são pretas. Se o fundo do seu upsell for escuro, as setas podem ficar difíceis de ver. Você pode corrigir isso alterando a cor das setas com uma simples atualização de CSS.

***

<div id="where-to-find-the-custom-css-editor">
  ## Onde encontrar o editor de CSS personalizado
</div>

1. Vá em **Upcart > Cart Editor > Settings > Custom CSS**
2. Role para baixo até o campo de entrada e cole seu código CSS
3. Clique em **Save**
4. Recarregue sua vitrine para visualizar as mudanças

***

<div id="example-css-to-change-the-arrow-color-in-v10">
  ## Exemplo de CSS para alterar a cor da seta na V1.0
</div>

```
.styles_PreviewCarousel__ [class~="control-next"]::before,  
.styles_PreviewCarousel__ [class~="control-prev"]::before {  
  border-color: white !important;  
}
```

<div id="example-css-to-change-the-arrow-color-in-v20">
  ## Exemplo de CSS para alterar a cor da seta na V2.0
</div>

```
.upcart-public-component-carousel__button svg {  
  stroke: orange;  
}
```

A regra da V1 acima define as setas como brancas; a regra da V2 as define como laranja. Ambas se aplicam às setas de avançar e voltar.

***

<div id="how-to-customize">
  ## Como personalizar
</div>

Você pode atualizar `border-color` e `stroke` para combinar com a paleta da sua marca. Use qualquer formato de cor válido:

* Cores nomeadas (exemplo: `black`, `white`, `red`)
* Códigos hexadecimais (exemplo: `#ffffff`)
* Valores RGB (exemplo: `rgb(255, 255, 255)`)

**Exemplo:**

```
border-color: #00bcd4 !important;
```

Isso garante que as setas de navegação do seu upsell permaneçam visíveis sobre qualquer cor de fundo.