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

# Изменение цветов селектора вариантов апселла

> Настройте цвет фона и текста селекторов вариантов в разделе апселлов.

<div id="overview">
  # Обзор
</div>

Upcart позволяет изменять цвета селекторов вариантов апселлов с помощью простого пользовательского CSS. Это быстрый способ привести внешний вид корзины в соответствие с вашим брендом и улучшить опыт покупателей при выборе товара.

Эта настройка идеально подходит владельцам магазинов и разработчикам с базовыми знаниями CSS.

***

<div id="where-to-find-the-custom-css-editor">
  ## Где найти редактор пользовательского CSS
</div>

1. Перейдите в **Upcart > Cart Editor > Settings > Custom CSS**
2. Прокрутите вниз до области ввода и вставьте ваш CSS-код
3. Нажмите **Save**
4. Обновите витрину, чтобы просмотреть изменения вживую

***

<div id="example-css-for-variant-selector-styling-in-v10">
  ## Пример CSS для стилизации селектора вариантов в 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 для стилизации селектора вариантов в V2.0
</div>

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

***

<div id="how-to-customize">
  ## Как настроить
</div>

* **color**: задает цвет текста
* **background-color**: задает фон поля селектора вариантов

Вы можете использовать разные типы значений, такие как:

* Именованные цвета (например: `black`, `white`, `red`)
* Hex-коды (например: `#000000`)
* Значения RGB (например: `rgb(255, 0, 0)`)

**Пример:**

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

Это позволяет создать стиль селектора вариантов, который либо гармонирует с дизайном вашего магазина, либо выделяется, привлекая внимание.

***

<div id="still-need-help">
  ## Нужна дополнительная помощь?
</div>

Для дополнительных настроек мы рекомендуем работать с **экспертом Shopify**. Он может помочь с добавлением HTML, CSS или JavaScript в ваш cart drawer.

[Найти экспертов Shopify](https://www.shopify.com/partners/directory)