Добавление пользовательского CSS в тему
Каскадные таблицы стилей (CSS) изменяют способ отображения элементов в вашей теме и могут управлять внешним видом нескольких страниц одновременно. Вы можете настраивать свою тему сверх встроенных настроек, используя функцию пользовательского CSS. Например, можно использовать CSS для установки градиентов в настройках цвета вашей темы. Вы можете добавить пользовательский CSS ко всей теме или к определенному разделу шаблона в вашей теме. Пользовательский CSS не поддерживается на странице оформления заказа.
Настройка CSS требует определенных знаний CSS и HTML. Прежде чем настраивать тему, убедитесь, что вы понимаете, какой уровень поддержки доступен.
На этой странице
Что нужно учесть при использовании пользовательского CSS
Прежде чем добавлять пользовательский CSS в свою тему, ознакомьтесь со следующими моментами:
- Следующие селекторы и свойства CSS не поддерживаются в пользовательском CSS:
- Директивы
@import,@charsetи@namespaceиспользовать нельзя. - Для CSS на уровне раздела разрешены только директивы
@media,@container,@layerи@supports. - В CSS на уровне раздела нельзя обращаться к ИД или классам элемента-обертки раздела Shopify, который рендерится темой с классом
shopify-section. - Свойство
contentнедоступно в пользовательском CSS.
- Директивы
- Если правило пользовательского CSS объявлено с тегом, который является оберткой для родительского элемента раздела, то он считается тегом-потомком, и правило стиля применяется к этому разделу. Обратите внимание, что по умолчанию родительский раздел заключен в тег
<div>, но разработчики темы могут установить для него любое из допустимых значений в схеме раздела. - В настоящее время при использовании URL-адресов в пользовательском CSS разрешен только домен https://cdn.shopify.com.
- Использование пользовательских шрифтов не ограничено. Однако пользовательские шрифты — это отдельный ресурс, который загружается браузерами перед отображением текста, что может повлиять на общую производительность магазина. Вы несете ответственность за то, чтобы пользовательские шрифты не оказывали негативного влияния на вашу витрину. Узнайте, как использовать пользовательские шрифты в вашей теме.
- Правила CSS, которые влияют на всю тему, ограничены 1500 символами.
- Правила CSS, которые влияют на определенный раздел, ограничены 500 символами.
- В зависимости от используемых вами селекторов или классов CSS, обновление темы может привести к тому, что ваш пользовательский CSS перестанет работать.
Shopify не предоставляет поддержку для сложных настроек темы. Если вы столкнулись с ошибкой в пользовательском CSS, связанной с этими ограничениями, и не можете определить ее причину, обратитесь к списку других доступных ресурсов поддержки.
Добавление пользовательского CSS
Пользовательский CSS можно добавить ко всей теме. Он будет влиять на все страницы вашего интернет-магазина, кроме страницы оформления заказа. Например, вы можете изменить способ отображения кнопок во всем вашем магазине.
Шаги:
В панели администратора Shopify перейдите в раздел Интернет-магазин > Темы.
Нажмите Редактировать тему.
Нажмите Настройки темы.
Нажмите Пользовательский CSS.
Добавьте свой код.
Нажмите Сохранить.
Пользовательский CSS также можно добавить в определенный раздел вашей темы. Если вы добавляете пользовательский CSS в раздел темы, CSS будет применяться только к этому разделу. Например, вы можете применить пользовательский размер шрифта или цвет фона к одному разделу.
Шаги:
В панели администратора Shopify перейдите в раздел Интернет-магазин > Темы.
Нажмите Редактировать тему.
Нажмите на раздел, в который вы хотите добавить CSS.
В нижней части панели свойств раздела нажмите Пользовательский CSS.
Добавьте свой код.
Нажмите Сохранить.
Дополнительные ресурсы по CSS
Настройка CSS требует определенных знаний CSS и HTML. Прежде чем настраивать тему, убедитесь, что вы понимаете, какой уровень поддержки доступен.
Если вы хотите узнать больше о CSS, воспользуйтесь следующими ресурсами: