⚠️ ВАЖНОЕ УВЕДОМЛЕНИЕ Эти селекторы применяются только к версии 2 (V2) модулей корзины Upcart. Если вы используете версию 1 (V1), эти селекторы не будут работать. Для корзин V1 обратитесь к документации по CSS-селекторам версии 1, которая охватывает устаревшую структуру модулей и селекторы. Чтобы проверить, какую версию вы используете, откройте Cart Editor и посмотрите на верхнюю часть левого меню. Выпадающий список Cart version появляется там, когда каждый модуль корзины переведён на V2; если вы его не видите, в вашей корзине ещё есть модули V1. Дополнительную информацию о миграции с V1 на V2 см. в руководстве по миграции на V2.0.

Обзор

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

ПРИМЕЧАНИЕ

Хотя мы предоставляем эту библиотеку для вашего удобства, команда поддержки Upcart не может помогать с созданием или исправлением собственного кода. Это часть нашей Политики кастомизации. Для решений с собственным кодом мы рекомендуем обратиться к эксперту Shopify. Посмотреть экспертов Shopify

Как использовать CSS-селекторы Upcart

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

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

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

Что нужно знать перед добавлением CSS

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

Чек-лист кастомизации CSS:

Тестируйте в безопасной среде: по возможности используйте предпросмотр или неопубликованную тему перед запуском в продакшен.
Начинайте с малого: вносите по одному изменению за раз, чтобы было проще отследить, что сработало, а что нет.
Вставляйте стили в правильное место: используйте поле Upcart Editor > Settings > Custom CSS для добавления кода.
Используйте инструмент Inspect: нажмите правой кнопкой мыши на элемент в браузере и выберите Inspect, чтобы находить и тестировать селекторы вживую.
Избегайте предположений: не каждый элемент присутствует во всех корзинах — тестируйте с разными корзинами (с вознаграждениями и без, с upsell-предложениями и т. д.).

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

Важные рекомендации по селекторам V2

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

Публичные селекторы (с префиксом 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;   
}

CSS-селекторы

Общие компоненты


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`	Метка этапа на обычном индикаторе прогресса.

Модуль заголовка


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

Модуль объявлений


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

Модули рекомендаций и upsell-предложений


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-товара.

Модуль примечаний


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

Модуль промокодов


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`	Скелетон кнопки применения промокода.

Модуль значков доверия


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

Модуль многоуровневых вознаграждений


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`	Скелетон индикатора прогресса вознаграждений.

Модуль позиций корзины


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`	Название товара позиции бандла.

Модуль дополнений


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`	Скелетон текстового содержимого в дополнениях.

Модуль экспресс-платежей


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

Модуль сводки корзины


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`	Отображение общей суммы скидки.

Полезные ресурсы для начала работы:

Начало работы с Custom CSS: узнайте, как безопасно добавлять собственный CSS в Upcart.
Введение в кастомизации Upcart: поймите, как работает кастомизация и с чего начать.
Использование ИИ для написания собственного кода для Upcart: получите помощь в написании CSS или JavaScript с помощью простых запросов.
Лучшие практики для увеличения конверсии корзины: оптимизируйте дизайн корзины с помощью проверенных советов.

Справочник функций корзины

Справочник CSS

Рецепты оформления

Рецепты функциональности

Пользовательские шаблоны

Публичный API Upcart

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

Обзор

ПРИМЕЧАНИЕ

Как использовать CSS-селекторы Upcart

Что нужно знать перед добавлением CSS

Чек-лист кастомизации CSS:

Важные рекомендации по селекторам V2

CSS-селекторы

Общие компоненты

Модуль заголовка

Модуль объявлений

Модули рекомендаций и upsell-предложений

Модуль примечаний

Модуль промокодов

Модуль значков доверия

Модуль многоуровневых вознаграждений

Модуль позиций корзины

Модуль дополнений

Модуль экспресс-платежей

Модуль сводки корзины

Полезные ресурсы для начала работы:

​Обзор

​ПРИМЕЧАНИЕ

​

​Как использовать CSS-селекторы Upcart

​Что нужно знать перед добавлением CSS

​Чек-лист кастомизации CSS:

​Важные рекомендации по селекторам V2

​

​CSS-селекторы

​Общие компоненты

​

​Модуль заголовка

​Модуль объявлений

​Модули рекомендаций и upsell-предложений

​Модуль примечаний

​Модуль промокодов

​Модуль значков доверия

​Модуль многоуровневых вознаграждений

​Модуль позиций корзины

​Модуль дополнений

​Модуль экспресс-платежей

​Модуль сводки корзины

​Полезные ресурсы для начала работы:

​

​

Обзор

ПРИМЕЧАНИЕ

Как использовать CSS-селекторы Upcart

Что нужно знать перед добавлением CSS

Чек-лист кастомизации CSS:

Важные рекомендации по селекторам V2

CSS-селекторы

Общие компоненты

Модуль заголовка

Модуль объявлений

Модули рекомендаций и upsell-предложений

Модуль примечаний

Модуль промокодов

Модуль значков доверия

Модуль многоуровневых вознаграждений

Модуль позиций корзины

Модуль дополнений

Модуль экспресс-платежей

Модуль сводки корзины

Полезные ресурсы для начала работы: