> ## 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 (V1)

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

📝 **Примечание**

Селекторы V1 нацелены на модули устаревшей корзины-шторки. Если вы обновились до V2, селекторы модулей на этой странице больше не совпадают — актуальные селекторы см. в [библиотеке CSS-селекторов V2](/ru/upcart/upcart_css_selector_library_v2).

Стоит знать о двух исключениях: `.upcart-cart` и `.upcart-cart-body` относятся к оболочке шторки, а не к модулю, поэтому они по-прежнему применяются в V2. Исправления макета, нацеленные на шторку в целом (ограничение её ширины, предотвращение горизонтального переполнения), продолжают работать после обновления.

<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-предложениями и т. д.).

<div id="css-selectors-library">
  # Библиотека CSS-селекторов
</div>

Ниже приведён список всех CSS-селекторов, доступных в Upcart. Они сгруппированы по **модулям** (заголовок, товары, upsell-предложения и т. д.), чтобы вам было проще найти то, что вы хотите настроить. Используйте его как справочник при написании собственных стилей.

<div id="general-settings">
  ## Общие настройки
</div>

<div id="design-module">
  ### Модуль дизайна
</div>

|                     |                                              |
| ------------------- | -------------------------------------------- |
| **CSS-селектор**    | **Описание**                                 |
| `.upcart-cart`      | Основной контейнер корзины-шторки.           |
| `.upcart-cart-body` | Содержит основной контент корзины.           |
| `.upcart-backdrop`  | Тёмный оверлей, появляющийся позади корзины. |

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

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

<div id="body-settings">
  ## Настройки тела
</div>

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

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

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

|                                    |                                                                 |
| ---------------------------------- | --------------------------------------------------------------- |
| **CSS-селектор**                   | **Описание**                                                    |
| `.upcart-rewards`                  | Основной контейнер раздела вознаграждений.                      |
| `.upcart-rewards-message`          | Отображает сообщения о прогрессе, связанные с вознаграждениями. |
| `.upcart-rewards-bar-background`   | Фоновый слой индикатора прогресса вознаграждений.               |
| `.upcart-rewards-bar-foreground`   | Передний план/заполнение прогресса панели вознаграждений.       |
| `.upcart-rewards-tier`             | Представляет отдельный уровень в системе вознаграждений.        |
| `.upcart-rewards-tier-circle`      | Визуальный круговой индикатор уровня вознаграждения.            |
| `.upcart-rewards-tier-icon`        | Значок внутри круга уровня вознаграждения.                      |
| `.upcart-rewards-tier-description` | Текст описания под каждым уровнем вознаграждения.               |
| `.upcart-rewards-skeleton`         | Скелетон-контейнер раздела вознаграждений.                      |
| `.upcart-rewards-message-skeleton` | Скелетон сообщения о прогрессе вознаграждений.                  |
| `.upcart-rewards-bar-skeleton`     | Скелетон индикатора прогресса вознаграждений.                   |

<div id="recommendations-module">
  ### Модуль рекомендаций
</div>

|                                           |                                                            |
| ----------------------------------------- | ---------------------------------------------------------- |
| **CSS-селектор**                          | **Описание**                                               |
| `.upcart-recommendation-module`           | Обёртка всего модуля рекомендаций товаров.                 |
| `.upcart-recommendations-title`           | Текст заголовка раздела рекомендаций.                      |
| `.upcart-recommendations-shop-now-button` | Кнопка для покупки рекомендуемого товара прямо из корзины. |

<div id="subscription-upgrades-module">
  ### Модуль повышения подписки
</div>

|                                         |                                                                      |
| --------------------------------------- | -------------------------------------------------------------------- |
| **CSS-селектор**                        | **Описание**                                                         |
| `.upcart-subscription-upgrade-section`  | Раздел для продвижения повышения подписки в корзине.                 |
| `.upcart-subscription-upgrade-button`   | Кнопка для запуска повышения подписки.                               |
| `.upcart-subscription-upgrade-dropdown` | Выпадающий список для выбора доступных вариантов повышения подписки. |

<div id="upsells-module">
  ### Модуль upsell-предложений
</div>

|                                        |                                                     |
| -------------------------------------- | --------------------------------------------------- |
| **CSS-селектор**                       | **Описание**                                        |
| `.upcart-upsells`                      | Основной контейнер раздела upsell-предложений.      |
| `.upcart-upsells-module`               | Обёртка модуля upsell-предложений.                  |
| `.upcart-upsells-title`                | Заголовок раздела upsell-предложений.               |
| `.upcart-upsells-button`               | Кнопка добавления upsell-товаров в корзину.         |
| `.upcart-upsell-item-card`             | Макет карточки каждого upsell-товара.               |
| `.upcart-upsell-item-title`            | Название upsell-товара.                             |
| `.upcart-upsell-item-image-wrapper`    | Обёртка вокруг изображения upsell-товара.           |
| `.upcart-upsell-item-image`            | Изображение upsell-товара.                          |
| `.upcart-upsell-item-price`            | Цена upsell-товара.                                 |
| `.upcart-upsell-item-price-row`        | Строка с ценой и ценой для сравнения.               |
| `.upcart-upsell-item-compare-price`    | Исходная цена (зачёркнутая) для upsell-предложения. |
| `.upcart-upsell-item-variant-selector` | Выпадающий список вариантов для upsell-товаров.     |

<div id="product-settings">
  ### Настройки товаров
</div>

|                                      |                                                               |
| ------------------------------------ | ------------------------------------------------------------- |
| **CSS-селектор**                     | **Описание**                                                  |
| `.upcart-products-section`           | Контейнер всех товаров в корзине.                             |
| `.upcart-product-item`               | Обёртка отдельной позиции товара.                             |
| `.upcart-product-title`              | Название товара в корзине.                                    |
| `.upcart-product-title-link`         | Ссылка, оборачивающая название товара.                        |
| `.upcart-item-prices-row`            | Строка с информацией о ценах.                                 |
| `.upcart-item-price`                 | Итоговая цена, отображаемая покупателю.                       |
| `.upcart-item-compare-price`         | Исходная (зачёркнутая) цена.                                  |
| `.upcart-product-savings`            | Экономия для конкретной позиции корзины.                      |
| `.upcart-item-option`                | Контейнер опций товара, таких как размер или цвет.            |
| `.upcart-item-option-category`       | Метка категории опции товара.                                 |
| `.upcart-item-option-value`          | Значение выбранной опции товара.                              |
| `.upcart-item-properties`            | Обёртка дополнительных метаданных товара.                     |
| `.upcart-item-property`              | Отдельное свойство товара.                                    |
| `.upcart-item-property-subscription` | Отображает сведения о подписке для позиции.                   |
| `.upcart-product-quantity-input`     | Поле ввода количества товара.                                 |
| `.upcart-product-quantity-minus`     | Кнопка уменьшения количества.                                 |
| `.upcart-product-quantity-plus`      | Кнопка увеличения количества.                                 |
| `.upcart-product-image-wrapper`      | Обёртка вокруг изображения товара.                            |
| `.upcart-quantity-warning`           | Контейнер для сообщения об ограничении количества.            |
| `.upcart-quantity-warning-text`      | Текст предупреждения о количестве, отображаемый пользователю. |

<div id="footer-settings">
  ## Настройки футера
</div>

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

|                                      |                                               |
| ------------------------------------ | --------------------------------------------- |
| **CSS-селектор**                     | **Описание**                                  |
| `.upcart-addons`                     | Основной контейнер раздела дополнений.        |
| `.upcart-addons-title`               | Заголовок раздела дополнений.                 |
| `.upcart-addons-product-description` | Описание товара-дополнения.                   |
| `.upcart-addons-price`               | Цена товара-дополнения.                       |
| `.upcart-addons-compare-price`       | Исходная (зачёркнутая) цена дополнения.       |
| `.upcart-addons-toggle`              | Переключатель добавления/удаления дополнения. |
| `.upcart-addons-image-wrapper`       | Обёртка изображения дополнения.               |

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

<div id="savings-row">
  ### Строка экономии
</div>

|                                  |                                                               |
| -------------------------------- | ------------------------------------------------------------- |
| **CSS-селектор**                 | **Описание**                                                  |
| `.upcart-savings-row`            | Обёртка всего раздела скидок/экономии в корзине.              |
| `.styles_Footer__savingsCodes__` | Контейнер метки («Discounts») и связанных промокодов.         |
| `.upcart-discount-code-badge`    | Обёртка каждого бейджа промокода, отображаемого в интерфейсе. |
| `.upcart-discount-code-icon`     | Контейнер значка скидки (например, SVG-символ билета).        |
| `.upcart-discount-code-text`     | Текстовое представление промокода (например, «AUTO 5»).       |
| `.upcart-savings-amount`         | Отображает фактическую сумму экономии от скидок.              |

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

<div id="note-2">
  ## Примечание
</div>

Кнопки экспресс-платежей в Upcart служат визуальными контейнерами, а их содержимое и функциональность полностью контролируются Shopify. Поэтому мы не можем изменять их поведение или внешний вид. Дополнительную информацию см. в руководстве [**Модуль экспресс-платежей**](/ru/upcart/express_payments_module).

|                                         |                                         |
| --------------------------------------- | --------------------------------------- |
| **CSS-селектор**                        | **Описание**                            |
| `.upcart-express-pay-buttons-container` | Контейнер всех кнопок экспресс-оплаты.  |
| `.upcart-express-pay-buttons-row`       | Строчный макет кнопок экспресс-оплаты.  |
| `.upcart-express-pay-button`            | Общий селектор кнопки экспресс-платежа. |
| `.upcart-express-pay-button-shop-pay`   | Отдельная кнопка для Shop Pay.          |
| `.upcart-express-pay-button-google-pay` | Отдельная кнопка для Google Pay.        |
| `.upcart-express-pay-button-paypal`     | Отдельная кнопка для PayPal.            |
| `.upcart-express-pay-button-apple-pay`  | Отдельная кнопка для Apple Pay.         |
| `.upcart-express-pay-button-amazon-pay` | Отдельная кнопка для Amazon Pay.        |
| `.upcart-express-pay-button-meta-pay`   | Отдельная кнопка для Meta Pay.          |

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

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

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

|                                                   |                                                              |
| ------------------------------------------------- | ------------------------------------------------------------ |
| **CSS-селектор**                                  | **Описание**                                                 |
| `.NotesModule_NotesModule__`                      | Контейнер дополнительных примечаний.                         |
| `.NotesModule_NotesModule__titleContainer__`      | Контейнер заголовка раздела примечаний                       |
| `.NotesModule_NotesModule__dropdownContainer__`   | Заголовок выпадающего списка раздела примечаний              |
| `.NotesModule_NotesModule__textModule__ textarea` | Поле ввода для добавления собственного примечания к корзине. |

<div id="upcart-settings-module">
  ## Модуль настроек Upcart
</div>

<div id="skeleton-selectors">
  ### Селекторы скелетонов
</div>

|                                                  |                                                |
| ------------------------------------------------ | ---------------------------------------------- |
| **CSS-селектор**                                 | **Описание**                                   |
| `.upcart-skeleton`                               | Общая обёртка скелетон-загрузчика корзины.     |
| `.upcart-product-item-skeleton`                  | Заглушка во время загрузки товара.             |
| `.upcart-product-image-skeleton`                 | Заглушка изображения товара.                   |
| `.upcart-product-title-skeleton`                 | Заглушка текста названия товара.               |
| `.upcart-product-price-container-skeleton`       | Заглушка области цен.                          |
| `.upcart-product-quantity-skeleton`              | Заглушка элементов управления количеством.     |
| `.upcart-item-option-skeleton`                   | Заглушка опций позиции.                        |
| `.upcart-upsells-module-skeleton`                | Скелетон модуля upsell-предложений.            |
| `.upcart-upsells-title-skeleton`                 | Скелетон заголовка раздела upsell-предложений. |
| `.upcart-upsell-item-image-skeleton`             | Скелетон изображения upsell-товара.            |
| `.upcart-upsell-item-title-skeleton`             | Скелетон названия upsell-товара.               |
| `.upcart-upsell-item-price-skeleton`             | Скелетон цены upsell-товара.                   |
| `.upcart-upsells-button-skeleton`                | Скелетон кнопки действия upsell-предложения.   |
| `.upcart-trust-badge-skeleton`                   | Скелетон контейнера значков доверия.           |
| `.upcart-trust-badge-image-skeleton`             | Скелетон изображения значка доверия.           |
| `.upcart-announcement-skeleton`                  | Скелетон-заглушка объявлений.                  |
| `.upcart-rewards-skeleton`                       | Скелетон раздела вознаграждений.               |
| `.upcart-rewards-message-skeleton`               | Скелетон сообщений о вознаграждениях.          |
| `.upcart-rewards-bar-skeleton`                   | Скелетон индикатора прогресса вознаграждений.  |
| `.upcart-addons-skeleton`                        | Скелетон раздела дополнений.                   |
| `.upcart-addons-image-wrapper-skeleton`          | Скелетон изображения товара-дополнения.        |
| `.upcart-addons-skeleton-text-container`         | Скелетон текстового содержимого в дополнениях. |
| `.upcart-discount-code-module-skeleton`          | Скелетон модуля промокодов.                    |
| `.upcart-discount-code-input-skeleton`           | Скелетон поля ввода промокода.                 |
| `.upcart-discount-code-button-skeleton`          | Скелетон кнопки применения промокода.          |
| `.upcart-checkout-button-container-skeleton`     | Скелетон обёртки кнопки оформления заказа.     |
| `.upcart-checkout-button-skeleton`               | Скелетон кнопки оформления заказа.             |
| `.upcart-express-pay-buttons-container-skeleton` | Скелетон контейнера экспресс-платежей.         |
| `.upcart-express-pay-button-skeleton`            | Скелетон отдельной кнопки экспресс-платежа.    |

<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):** оптимизируйте дизайн корзины с помощью проверенных советов.