> ## 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 as cores do seletor de variantes do upsell

> Personalize a cor de fundo e do texto dos seletores de variantes na seção de upsell.

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

O Upcart permite alterar as cores usadas nos seletores de variantes do upsell com um CSS personalizado simples. Essa é uma maneira rápida de alinhar a aparência do seu carrinho com a sua marca e melhorar a experiência do cliente durante a seleção de produtos.

Essa personalização é ideal para lojistas ou desenvolvedores com conhecimento básico 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é a área de entrada e cole seu código CSS
3. Clique em **Save**
4. Recarregue sua vitrine para visualizar as mudanças ao vivo

***

<div id="example-css-for-variant-selector-styling-in-v10">
  ## Exemplo de CSS para estilizar o seletor de variantes na V1.0
</div>

```
.upcart-upsell-item-variant-selector {     
  color: white !important;  
  background-color: #008060 !important;   
}
```

<div id="example-css-for-variant-selector-styling-in-v20">
  ## Exemplo de CSS para estilizar o seletor de variantes na V2.0
</div>

```
.upcart-public-component-upsell-tile__variant-row select {  
  color: white;     
  background-color: #008060;   
}
```

***

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

* **color**: define a cor do texto
* **background-color**: define o fundo da caixa do seletor de variantes

Você pode usar diferentes tipos de valores, como:

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

**Exemplo:**

```
.upcart-public-component-upsell-tile__variant-row select {     
  color: #000000 !important;     
  background-color: #f3f4f6 !important;   
}
```

Isso permite criar um estilo de seletor de variantes que se integra ao design da sua loja ou que se destaca para chamar a atenção.

***

<div id="still-need-help">
  ## Ainda precisa de ajuda?
</div>

Para personalizações adicionais, recomendamos trabalhar com um **Shopify Expert**. Ele pode ajudar a adicionar HTML, CSS ou JavaScript ao seu cart drawer.

[Ver Shopify Experts](https://www.shopify.com/partners/directory)