CSS меняет внешний вид магазина: цвета, отступы, размеры и многое другое. Свой CSS можно добавить в двух местах конструктора: для всего магазина или только для одной секции.
Пользовательский CSS для всего магазина
Нажмите на значок шестеренки и откройте вкладку Пользовательский CSS. Поле называется CSS-код: применяется ко всему магазину. Ваш CSS загружается на каждой странице рынка, который вы редактируете, а предпросмотр показывает результат.
Используйте его для правил, которые должны действовать везде, например чтобы скрыть элемент на всех страницах или изменить стиль всех кнопок. Например, h1 { text-transform: uppercase; } делает главный заголовок каждой страницы заглавными буквами.
Пользовательский CSS для одной секции
Выберите секцию на вкладке Секции. Внизу ее настроек откройте вкладку Пользовательский CSS. В ее поле CSS-код написано применяется только к этой секции. Она есть у большинства секций, включая шапку, подвал, главный баннер, информацию о товаре и оформление заказа.
Это более безопасный выбор. Storeep добавляет секцию перед каждым вашим селектором, поэтому ваши правила не могут изменить ничего за ее пределами.
h2 { letter-spacing: 2px; }меняет только заголовки внутри этой секции.- Используйте
&, чтобы оформить саму секцию:& { border-top: 1px solid #000; }. - Правила
@mediaработают. Правила внутри них тоже ограничены секцией. - Анимации
@keyframesсохраняются так, как вы их написали.
CSS секции относится к этой секции на этой странице. Используйте Применить ко всем страницам для секции, чтобы скопировать ее вместе с CSS на другие страницы, где она есть. См. Применить ко всем страницам.
Что выбрать
- Одна секция выглядит неправильно: используйте пользовательский CSS секции.
- Одно и то же изменение нужно везде: используйте вкладку настроек "Пользовательский CSS".
- Прежде чем писать CSS, проверьте, нет ли уже такой настройки: цвета находятся в цветовых схемах, шрифты в настройках шрифтов, а скругления и тени задаются вашей темой.
Если ваш CSS не работает
- Проверьте, не пропущена ли
}или;. Одна ошибка может остановить все правила после нее. - Ваше правило может быть слабее правила темы. Сделайте селектор более точным.
- В CSS секции не начинайте селектор с
bodyилиhtml. Они находятся вне секции, поэтому правило не сработает. - Если страница выглядит сломанной, удалите последнее изменение, опубликуйте и возвращайте правила по одному.
Полезно знать
- Пользовательский CSS относится к рынку, который вы редактируете. Повторите его в каждом рынке, где он нужен.
- Смена темы может изменить названия классов и макет, поэтому после смены темы проверьте свой CSS.
- Изменения появятся в магазине, когда вы нажмете Опубликовать.
- Про HTML и код внутри страницы см. Пользовательский код.