Skip to main content
📝 Примечание Селекторы 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-предложения и т. д.), чтобы вам было проще найти то, что вы хотите настроить. Используйте его как справочник при написании собственных стилей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

​
Примечание

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

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

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

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

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

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