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

# Cambiar los colores del selector de variantes de upsell

> Personaliza el color de fondo y de texto de los selectores de variantes en la sección de upsells.

<div id="overview">
  # Resumen
</div>

Upcart te permite cambiar los colores usados en los selectores de variantes de upsell mediante CSS personalizado simple. Esta es una forma rápida de alinear la apariencia de tu carrito con tu marca y mejorar la experiencia del cliente durante la selección de productos.

Esta personalización es ideal para propietarios de tiendas o desarrolladores con conocimientos básicos de CSS.

***

<div id="where-to-find-the-custom-css-editor">
  ## Dónde encontrar el editor de CSS personalizado
</div>

1. Ve a **Upcart > Cart Editor > Settings > Custom CSS**
2. Desplázate hacia abajo hasta el área de entrada y pega tu código CSS
3. Haz clic en **Save**
4. Actualiza tu tienda para previsualizar los cambios en vivo

***

<div id="example-css-for-variant-selector-styling-in-v10">
  ## CSS de ejemplo para el estilo del selector de variantes en 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">
  ## CSS de ejemplo para el estilo del selector de variantes en V2.0
</div>

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

***

<div id="how-to-customize">
  ## Cómo personalizar
</div>

* **color**: establece el color del texto
* **background-color**: establece el fondo de la caja del selector de variantes

Puedes usar diferentes tipos de valores, como:

* Colores con nombre (ejemplo: `black`, `white`, `red`)
* Códigos hexadecimales (ejemplo: `#000000`)
* Valores RGB (ejemplo: `rgb(255, 0, 0)`)

**Ejemplo:**

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

Esto te permite crear un estilo de selector de variantes que se integre con el diseño de tu tienda o que destaque para captar la atención.

***

<div id="still-need-help">
  ## ¿Todavía necesitas ayuda?
</div>

Para personalizaciones adicionales, te recomendamos trabajar con un **Shopify Expert**. Ellos pueden ayudarte a añadir HTML, CSS o JavaScript a tu carrito deslizante.

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