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

# Библиотека CSS-селекторов Upcart (V2)

> В этой статье описаны CSS-селекторы, доступные в Upcart версии 2, предназначенные для собственной стилизации обновлённой корзины-шторки и структуры модулей.

⚠️ **ВАЖНОЕ УВЕДОМЛЕНИЕ**

Эти селекторы применяются **только к версии 2 (V2)** модулей корзины Upcart. Если вы используете **версию 1 (V1)**, эти селекторы не будут работать.

Для корзин V1 обратитесь к **[документации по CSS-селекторам версии 1](/ru/upcart/upcart_css_selector_library_v1)**, которая охватывает устаревшую структуру модулей и селекторы.

Чтобы проверить, какую версию вы используете, откройте Cart Editor и посмотрите на верхнюю часть левого меню. Выпадающий список **Cart version** появляется там, когда каждый модуль корзины переведён на V2; если вы его не видите, в вашей корзине ещё есть модули V1. Дополнительную информацию о миграции с V1 на V2 см. в [руководстве по миграции на V2.0](/ru/upcart/upcart_v20_migration_guide).

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

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

Все доступные CSS-селекторы сгруппированы в этой статье вместе со ссылками на полезные ресурсы для написания и тестирования ваших стилей.

<div id="note">
  ## ПРИМЕЧАНИЕ
</div>

Хотя мы предоставляем эту библиотеку для вашего удобства, команда поддержки Upcart **не может помогать с созданием или исправлением собственного кода.** Это часть нашей [Политики кастомизации](/ru/upcart/upcart_customization_policy).

Для решений с собственным кодом мы рекомендуем обратиться к эксперту Shopify.

[Посмотреть экспертов Shopify](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # Как использовать CSS-селекторы Upcart
</div>

Эта статья — **библиотека CSS-селекторов**, которые можно использовать для стилизации и настройки вашей корзины-шторки Upcart. Каждый селектор нацелен на определённую часть корзины — заголовок, строки товаров, upsell-предложения, модуль вознаграждений и другое.

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

* Скрывать или переоформлять элементы
* Изменять отступы, шрифты или цвета
* Корректировать макет в соответствии с брендингом вашего магазина

Чтобы применить свой CSS, откройте Cart Editor, перейдите в **Settings**, выберите вкладку **Custom CSS** и вставьте свои стили в редактор.

<div id="what-to-know-before-adding-css">
  # Что нужно знать перед добавлением CSS
</div>

Прежде чем приступить к собственным стилям, вот несколько советов, которые помогут всё сделать гладко. Они упростят тестирование изменений, помогут избежать неожиданностей и добиться нужного вида, ничего не сломав в корзине.

<div id="css-customization-checklist">
  ## Чек-лист кастомизации CSS:
</div>

* **Тестируйте в безопасной среде:** по возможности используйте предпросмотр или неопубликованную тему перед запуском в продакшен.

* **Начинайте с малого:** вносите по одному изменению за раз, чтобы было проще отследить, что сработало, а что нет.

* **Вставляйте стили в правильное место:** используйте поле **Upcart Editor > Settings > Custom CSS** для добавления кода.

* **Используйте инструмент Inspect:** нажмите правой кнопкой мыши на элемент в браузере и выберите **Inspect**, чтобы находить и тестировать селекторы вживую.

* **Избегайте предположений:** не каждый элемент присутствует во всех корзинах — тестируйте с разными корзинами (с вознаграждениями и без, с upsell-предложениями и т. д.).

Следующие селекторы работают с версией 2 модулей корзины Upcart. V2 вводит структурированную систему именования с префиксами классов **public** и **internal**.

<div id="important-guidelines-for-v2-selectors">
  ## **Важные рекомендации по селекторам V2**
</div>

⚠️ **Используйте для кастомизации только публичные селекторы**

* **Публичные селекторы** (с префиксом `upcart-public-`) являются частью стабильного API и безопасны для собственной стилизации
* **Внутренние селекторы** (с префиксом `upcart-internal-`) зарезервированы для внутреннего использования и могут измениться без предупреждения

✅ **МОЖНО:** используйте публичные имена классов для стилизации

```
/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}
```

❌ **НЕЛЬЗЯ:** не переопределяйте внутренние имена классов и не используйте глубокие селекторы

```
/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}
```

#

<div id="css-selectors">
  # CSS-селекторы
</div>

<div id="general-components">
  ### **Общие компоненты**
</div>

|                                                          |                                                              |
| -------------------------------------------------------- | ------------------------------------------------------------ |
| **CSS-селектор**                                         | **Описание**                                                 |
| `.upcart-public-skeleton`                                | Общая обёртка скелетон-загрузчика корзины.                   |
| `.upcart-public-component__button`                       | Общий компонент кнопки, используемый во всех модулях.        |
| `.upcart-public-component-loader`                        | Компонент индикатора загрузки.                               |
| `.upcart-public-component-tag`                           | Обёртка компонента тега.                                     |
| `.upcart-public-component-tag__icon`                     | Значок внутри тега.                                          |
| `.upcart-public-component-tag__text`                     | Текстовое содержимое тега.                                   |
| `.upcart-public-component-tag__remove-button`            | Кнопка удаления («x») внутри удаляемого тега.                |
| `.upcart-public-component-collapse__dropdown-container`  | Контейнер сворачиваемых выпадающих разделов.                 |
| `.upcart-public-component-collapse__expand-icon`         | Значок, показывающий состояние развёрнуто/свёрнуто.          |
| `.upcart-public-component-carousel__container`           | Внешняя обёртка карусели.                                    |
| `.upcart-public-component-carousel__window`              | Окно отсечения, внутри которого прокручиваются слайды.       |
| `.upcart-public-component-carousel__track`               | Движущаяся дорожка, содержащая слайды.                       |
| `.upcart-public-component-carousel__slide`               | Отдельный слайд карусели.                                    |
| `.upcart-public-component-carousel__button`              | Кнопка-стрелка «назад»/«вперёд».                             |
| `.upcart-public-component-progress-bar`                  | Обычный (несегментированный) компонент индикатора прогресса. |
| `.upcart-public-component-progress-bar__track`           | Дорожка обычного индикатора прогресса.                       |
| `.upcart-public-component-progress-bar__fill`            | Заполненная часть обычного индикатора прогресса.             |
| `.upcart-public-component-progress-bar__milestone`       | Маркер этапа на обычном индикаторе прогресса.                |
| `.upcart-public-component-progress-bar__milestone-icon`  | Значок этапа на обычном индикаторе прогресса.                |
| `.upcart-public-component-progress-bar__milestone-label` | Метка этапа на обычном индикаторе прогресса.                 |

#

<div id="header-module">
  ### **Модуль заголовка**
</div>

|                                            |                                                   |
| ------------------------------------------ | ------------------------------------------------- |
| **CSS-селектор**                           | **Описание**                                      |
| `.upcart-public-header`                    | Основной контейнер заголовка корзины.             |
| `.upcart-public-header__logo`              | Изображение логотипа в заголовке корзины.         |
| `.upcart-public-header__close-button`      | Кнопка, используемая для закрытия корзины-шторки. |
| `.upcart-public-header__close-button-icon` | Значок внутри кнопки закрытия.                    |

<div id="announcements-module">
  ### **Модуль объявлений**
</div>

|                                        |                                         |
| -------------------------------------- | --------------------------------------- |
| **CSS-селектор**                       | **Описание**                            |
| `.upcart-public-announcement`          | Баннер или раздел объявлений в корзине. |
| `.upcart-public-announcement-skeleton` | Скелетон-загрузчик панели объявлений.   |

<div id="recommendation-and-upsell-modules">
  ### **Модули рекомендаций и upsell-предложений**
</div>

|                                                          |                                                       |
| -------------------------------------------------------- | ----------------------------------------------------- |
| **CSS-селектор**                                         | **Описание**                                          |
| `.upcart-public-upsell`                                  | Основная обёртка модуля upsell-предложений.           |
| `.upcart-public-upsell__header`                          | Заголовочная часть раздела upsell-предложений.        |
| `.upcart-public-upsell__title`                           | Текст заголовка раздела upsell-предложений.           |
| `.upcart-public-upsell__shop-now-button`                 | Кнопка Shop Now на upsell-товарах.                    |
| `.upcart-public-upsell__vertical-layout-wrapper`         | Обёртка вертикального макета upsell-предложений.      |
| `.upcart-public-component-upsell-tile`                   | Макет карточки каждого upsell-/рекомендуемого товара. |
| `.upcart-public-component-upsell-tile__image-container`  | Контейнер изображения upsell-товара.                  |
| `.upcart-public-component-upsell-tile__image`            | Изображение upsell-товара.                            |
| `.upcart-public-component-upsell-tile__info`             | Информационный раздел карточки upsell-товара.         |
| `.upcart-public-component-upsell-tile__title-link`       | Обёртка-ссылка для названия товара.                   |
| `.upcart-public-component-upsell-tile__title`            | Название upsell-товара.                               |
| `.upcart-public-component-upsell-tile__rating-row`       | Строка с рейтингами товара.                           |
| `.upcart-public-component-upsell-tile__stars`            | Отображение звёздного рейтинга.                       |
| `.upcart-public-component-upsell-tile__star--partial`    | Частичная звезда для дробных рейтингов.               |
| `.upcart-public-component-upsell-tile__reviews`          | Отображение количества отзывов.                       |
| `.upcart-public-component-upsell-tile__price-row`        | Строка с информацией о цене.                          |
| `.upcart-public-component-upsell-tile__price-compare-at` | Исходная (зачёркнутая) цена upsell-предложения.       |
| `.upcart-public-component-upsell-tile__price`            | Текущая цена upsell-товара.                           |
| `.upcart-public-component-upsell-tile__variant-row`      | Строка с выбором варианта.                            |
| `.upcart-public-upsell__skeleton`                        | Скелетон-заглушка модуля upsell-предложений.          |
| `.upcart-public-upsell__skeleton-title`                  | Скелетон заголовка раздела upsell-предложений.        |
| `.upcart-public-upsell__skeleton-image`                  | Скелетон изображения upsell-товара.                   |
| `.upcart-public-upsell__skeleton-product-title`          | Скелетон названия upsell-товара.                      |
| `.upcart-public-upsell__skeleton-product-price`          | Скелетон цены upsell-товара.                          |

<div id="notes-module">
  ### **Модуль примечаний**
</div>

|                                        |                                                              |
| -------------------------------------- | ------------------------------------------------------------ |
| **CSS-селектор**                       | **Описание**                                                 |
| `.upcart-public-notes`                 | Основной контейнер раздела примечаний.                       |
| `.upcart-public-notes__text-container` | Контейнер текстовой области примечаний.                      |
| `.upcart-public-notes__textarea`       | Поле ввода для добавления собственного примечания к корзине. |

<div id="discount-code-module">
  ### **Модуль промокодов**
</div>

|                                                 |                                                             |
| ----------------------------------------------- | ----------------------------------------------------------- |
| **CSS-селектор**                                | **Описание**                                                |
| `.upcart-public-discount-code`                  | Основной контейнер раздела промокодов.                      |
| `.upcart-public-discount-code__form`            | Обёртка формы ввода промокода.                              |
| `.upcart-public-discount-code__input-wrapper`   | Обёртка поля ввода промокода.                               |
| `.upcart-public-discount-code__input`           | Поле ввода промокодов.                                      |
| `.upcart-public-discount-code__suffix`          | Элемент-суффикс поля ввода.                                 |
| `.upcart-public-discount-code__error`           | Отображение сообщения об ошибке для недействительных кодов. |
| `.upcart-public-discount-code__button`          | Кнопка применения промокода.                                |
| `.upcart-public-discount-code__skeleton`        | Скелетон-заглушка модуля промокодов.                        |
| `.upcart-public-discount-code__skeleton-input`  | Скелетон поля ввода промокода.                              |
| `.upcart-public-discount-code__skeleton-button` | Скелетон кнопки применения промокода.                       |

<div id="trust-badges-module">
  ### **Модуль значков доверия**
</div>

|                                      |                                                     |
| ------------------------------------ | --------------------------------------------------- |
| **CSS-селектор**                     | **Описание**                                        |
| `.upcart-public-trust-badges`        | Контейнер значков доверия.                          |
| `.upcart-public-trust-badges__image` | Элемент изображения, используемый в значке доверия. |

<div id="tiered-rewards-module">
  ### **Модуль многоуровневых вознаграждений**
</div>

|                                                                                  |                                                                 |
| -------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| **CSS-селектор**                                                                 | **Описание**                                                    |
| `.upcart-public-rewards`                                                         | Основной контейнер раздела вознаграждений.                      |
| `.upcart-public-rewards__message`                                                | Отображает сообщения о прогрессе, связанные с вознаграждениями. |
| `.upcart-public-rewards__bar`                                                    | Контейнер индикатора прогресса вознаграждений.                  |
| `.upcart-public-component-segmented-progress-bar`                                | Компонент сегментированного индикатора прогресса.               |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | Контейнер всех сегментов индикатора прогресса.                  |
| `.upcart-public-component-segmented-progress-bar__segment`                       | Отдельный сегмент индикатора прогресса.                         |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | Заполненная часть сегмента индикатора прогресса.                |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | Маркер этапа на индикаторе прогресса.                           |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | Этап, расположенный внизу.                                      |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | Этап, расположенный вверху.                                     |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | Этап, расположенный посередине.                                 |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | Значок, отображаемый на этапе.                                  |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | Текст метки этапа.                                              |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | Метка этапа с выравниванием по правому краю.                    |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | Метка этапа с выравниванием по центру.                          |
| `.upcart-public-rewards__skeleton`                                               | Скелетон-контейнер раздела вознаграждений.                      |
| `.upcart-public-rewards__skeleton-message`                                       | Скелетон сообщения о прогрессе вознаграждений.                  |
| `.upcart-public-rewards__skeleton-bar`                                           | Скелетон индикатора прогресса вознаграждений.                   |

<div id="cart-items-module">
  ### **Модуль позиций корзины**
</div>

|                                                                   |                                                       |
| ----------------------------------------------------------------- | ----------------------------------------------------- |
| **CSS-селектор**                                                  | **Описание**                                          |
| `.upcart-public-cart-items`                                       | Основная обёртка списка позиций корзины.              |
| `.upcart-public-cart-item`                                        | Обёртка отдельной позиции корзины.                    |
| `.upcart-public-cart-items-skeleton__content`                     | Скелетон-загрузчик позиций корзины.                   |
| `.upcart-public-component-product-tile`                           | Обёртка отдельной позиции товара в корзине.           |
| `.upcart-public-component-product-tile__content`                  | Область содержимого карточки товара.                  |
| `.upcart-public-component-product-tile__image-wrapper`            | Обёртка вокруг изображения товара.                    |
| `.upcart-public-component-product-tile__image`                    | Изображение товара в корзине.                         |
| `.upcart-public-component-product-tile__info`                     | Информационный раздел карточки товара.                |
| `.upcart-public-component-product-tile__header`                   | Заголовочная часть карточки товара.                   |
| `.upcart-public-component-product-tile__product-title`            | Название товара в корзине.                            |
| `.upcart-public-component-product-tile__title-link`               | Ссылка, оборачивающая название товара.                |
| `.upcart-public-component-product-tile__remove-button`            | Кнопка удаления товара из корзины.                    |
| `.upcart-public-component-product-tile__variant`                  | Отображение информации о варианте.                    |
| `.upcart-public-component-product-tile__properties`               | Обёртка дополнительных метаданных товара.             |
| `.upcart-public-component-product-tile__bundle`                   | Раздел информации о бандле.                           |
| `.upcart-public-component-product-tile__product-pricing`          | Раздел цен карточки товара.                           |
| `.upcart-public-component-product-tile__price-compare-at`         | Исходная (зачёркнутая) цена.                          |
| `.upcart-public-component-product-tile__price`                    | Итоговая цена, отображаемая покупателю.               |
| `.upcart-public-component-product-tile__price-group`              | Обёртка вокруг цены и цены compare-at.                |
| `.upcart-public-component-product-tile__savings`                  | Экономия для конкретной позиции корзины.              |
| `.upcart-public-component-product-tile__controls`                 | Раздел элементов управления (количество и т. д.).     |
| `.upcart-public-component-product-tile__quantity-selector`        | Обёртка селектора количества.                         |
| `.upcart-public-component-product-tile__quantity-minus`           | Кнопка уменьшения количества.                         |
| `.upcart-public-component-product-tile__quantity-plus`            | Кнопка увеличения количества.                         |
| `.upcart-public-component-product-tile__discount-codes`           | Промокоды, применённые к позиции.                     |
| `.upcart-public-component-product-tile__subscription-upgrade`     | Раздел повышения подписки.                            |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | Кнопка, применяющая повышение подписки.               |
| `.upcart-public-component-product-tile__select-wrapper`           | Обёртка выпадающего списка select.                    |
| `.upcart-public-component-product-tile__select`                   | Элемент выпадающего списка select.                    |
| `.upcart-public-product-properties__subscription`                 | Отображает сведения о подписке для позиции.           |
| `.upcart-public-product-properties__item`                         | Отдельное свойство товара.                            |
| `.upcart-public-product-properties__link`                         | Ссылка в свойствах товара.                            |
| `.upcart-public-cart-items__key-value-pair`                       | Отображение пары «ключ-значение» для свойств позиции. |
| `.upcart-public-bundle-properties`                                | Контейнер свойств бандла.                             |
| `.upcart-public-bundle-properties__variant-title`                 | Название варианта для позиций бандла.                 |
| `.upcart-public-bundle-properties__header`                        | Заголовок раздела свойств бандла.                     |
| `.upcart-public-bundle-properties__item-components`               | Контейнер компонентов позиции бандла.                 |
| `.upcart-public-bundle-properties__item-component-row`            | Строка каждого компонента позиции бандла.             |
| `.upcart-public-bundle-properties__image-wrapper`                 | Обёртка изображения позиции бандла.                   |
| `.upcart-public-bundle-properties__content`                       | Область содержимого позиции бандла.                   |
| `.upcart-public-bundle-properties__product-title`                 | Название товара позиции бандла.                       |

<div id="add-ons-module">
  ### **Модуль дополнений**
</div>

|                                                |                                                |
| ---------------------------------------------- | ---------------------------------------------- |
| **CSS-селектор**                               | **Описание**                                   |
| `.upcart-public-addons`                        | Основной контейнер раздела дополнений.         |
| `.upcart-public-addons__image-wrapper`         | Обёртка изображения дополнения.                |
| `.upcart-public-addons__content-wrapper`       | Обёртка содержимого информации о дополнении.   |
| `.upcart-public-addons__content-title-wrapper` | Обёртка заголовка дополнения.                  |
| `.upcart-public-addons__content-title`         | Название товара-дополнения.                    |
| `.upcart-public-addons__content-price`         | Раздел цены дополнения.                        |
| `.upcart-public-addons__compare-at-price`      | Исходная (зачёркнутая) цена дополнения.        |
| `.upcart-public-addons__price`                 | Текущая цена товара-дополнения.                |
| `.upcart-public-addons__content-description`   | Описание товара-дополнения.                    |
| `.upcart-public-addons__toggle-wrapper`        | Обёртка переключателя дополнения.              |
| `.upcart-public-addons__toggle`                | Переключатель добавления/удаления дополнения.  |
| `.upcart-public-addons__toggle-switch`         | Элемент switch переключателя.                  |
| `.upcart-public-addons__toggle-slider`         | Элемент slider переключателя.                  |
| `.upcart-public-addons__skeleton`              | Скелетон-заглушка раздела дополнений.          |
| `.upcart-public-addons__skeleton-image`        | Скелетон изображения товара-дополнения.        |
| `.upcart-public-addons__skeleton-text`         | Скелетон текстового содержимого в дополнениях. |

<div id="express-payments-module">
  ### **Модуль экспресс-платежей**
</div>

|                                              |                                   |
| -------------------------------------------- | --------------------------------- |
| **CSS-селектор**                             | **Описание**                      |
| `.upcart-public-express-payments__container` | Контейнер кнопок экспресс-оплаты. |

<div id="cart-summary-module">
  ### **Модуль сводки корзины**
</div>

|                                               |                                    |
| --------------------------------------------- | ---------------------------------- |
| **CSS-селектор**                              | **Описание**                       |
| `.upcart-public-cart-summary`                 | Основной контейнер сводки корзины. |
| `.upcart-public-cart-summary__discount-codes` | Контейнер промокодов в сводке.     |
| `.upcart-public-cart-summary__discount-label` | Метка раздела скидок.              |
| `.upcart-public-cart-summary__slide-codes`    | Скользящий контейнер промокодов.   |
| `.upcart-public-cart-summary__total-discount` | Отображение общей суммы скидки.    |

<div id="helpful-resources-to-get-started">
  ## **Полезные ресурсы для начала работы:**
</div>

* **[Начало работы с Custom CSS](/ru/upcart/custom_css):** узнайте, как безопасно добавлять собственный CSS в Upcart.
* **[Введение в кастомизации Upcart](/ru/upcart/getting_started_with_upcart_customizations):** поймите, как работает кастомизация и с чего начать.
* **[Использование ИИ для написания собственного кода для Upcart](/ru/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** получите помощь в написании CSS или JavaScript с помощью простых запросов.
* **[Лучшие практики для увеличения конверсии корзины](/ru/upcart/best_practices_to_increase_upcart_conversions):** оптимизируйте дизайн корзины с помощью проверенных советов.

##

##