Skip to main content
Когда встроенных настроек дизайна недостаточно, добавьте собственный пользовательский CSS для оформления корзины.

​
Куда его добавить

В редакторе корзины откройте Cart settings → Custom CSS. Ваш CSS применяется ко всей корзине и загружается после базовых стилей корзины, поэтому ваши правила имеют приоритет.

​
Используйте только публичные классы

Оформляйте корзину, используя её публичные классы cart-external-*. Редактор подсказывает их через автодополнение и предостерегает от остальных:
  • cart-external-*: публичная поддерживаемая цель. Используйте их. Они не несут собственных стилей и существуют исключительно для того, чтобы к ним подключался ваш CSS.
  • cart-internal-*: внутренняя механика корзины, где живут все её встроенные стили. Редактор помечает селекторы по ним как ошибки. Они не меняются легкомысленно, поскольку от них зависит каждая существующая корзина, но право менять их принадлежит корзине, а не является контрактом с вами. Вместо этого оформляйте через парный класс cart-external-*.
  • Другие классы cart-*, которые редактор не распознаёт, помечаются как предупреждения.
Вы увидите классы cart-internal-* в разметке, включая пользовательский шаблон по умолчанию каждого блока. Это ожидаемо: именно они придают блоку его встроенный вид. Правило здесь касается селекторов, которые вы пишете в этой панели, а не имён классов, которые отображает корзина.Если вы пишете пользовательский шаблон, изменяющий DOM-структуру блока, см. Оформление пользовательского шаблона, чтобы узнать, какие имена классов оставить, а какие убрать.

​
Shadow DOM: корзина автономна

На витрине вся корзина отображается внутри собственного shadow DOM. Это значит:
  • CSS вашей темы не может проникнуть в корзину, а CSS корзины не может выйти наружу, поэтому ваш пользовательский CSS автоматически ограничен корзиной и не будет конфликтовать с остальным сайтом.
  • Ваши селекторы должны ссылаться на элементы и классы внутри корзины. Селекторы, нацеленные на элементы страницы вне корзины, внутрь не доберутся.
Та же граница действует для JavaScript: document.querySelector тоже не видит внутрь выдвижной корзины. Скрипт, обращающийся к элементу корзины, должен идти через shadowRoot и нацеливаться на те же классы cart-external-*.

​
Когда лучше использовать настройки дизайна

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

​
Что дальше