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

Обзор

Если вы хотите изменить внешний вид своей корзины, например скрыть цену, изменить размер текста или переместить кнопку, начинать нужно отсюда. Эта библиотека 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-предложениями и т. д.).

Библиотека CSS-селекторов

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

Общие настройки

Модуль дизайна


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

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


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

Настройки тела

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


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

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


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

Модуль рекомендаций


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

Модуль повышения подписки


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

Модуль upsell-предложений


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

Настройки товаров


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`	Текст предупреждения о количестве, отображаемый пользователю.

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


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

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

Строка экономии


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`	Отображает фактическую сумму экономии от скидок.

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

Примечание

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


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.

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


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

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


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

Модуль настроек Upcart

Селекторы скелетонов


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

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

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

⌘I

Начало работы

Модули корзины

Настройки корзины

Закреплённая кнопка корзины

Multicart

Кастомизации

Аналитика

Интеграции и совместимость

Оплата и аккаунт

Устранение неполадок

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

Обзор

Примечание

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

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

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

Библиотека CSS-селекторов

Общие настройки

Модуль дизайна

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

Настройки тела

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

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

Модуль рекомендаций

Модуль повышения подписки

Модуль upsell-предложений

Настройки товаров

Настройки футера

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

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

Строка экономии

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

Примечание

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

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

Модуль настроек Upcart

Селекторы скелетонов

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

​Обзор

​Примечание

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

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

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

​Библиотека CSS-селекторов

​Общие настройки

​Модуль дизайна

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

​Настройки тела

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

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

​Модуль рекомендаций

​Модуль повышения подписки

​Модуль upsell-предложений

​Настройки товаров

​Настройки футера

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

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

​Строка экономии

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

​Примечание

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

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

​Модуль настроек Upcart

​Селекторы скелетонов

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

Обзор

Примечание

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

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

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

Библиотека CSS-селекторов

Общие настройки

Модуль дизайна

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

Настройки тела

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

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

Модуль рекомендаций

Модуль повышения подписки

Модуль upsell-предложений

Настройки товаров

Настройки футера

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

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

Строка экономии

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

Примечание

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

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

Модуль настроек Upcart

Селекторы скелетонов

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