Где находятся эти настройки
Эти настройки задаются отдельно для каждого рынка, и внутри рынка они влияют на все страницы сразу. Откройте конструктор, выберите рынок на вкладке рынков (значок флага страны) в левой боковой панели, затем нажмите вкладку Настройки (значок шестерёнки). Изменения применяются к выбранному рынку и становятся видимыми после нажатия кнопки Опубликовать. Полный список всех настроек смотрите в статье Справочник по настройкам конструктора.
Цветовые схемы
Storeep использует палитру до 9 цветовых схем. Каждый раздел, блок и компонент вашего магазина ссылается на одну из этих схем по её номеру (от 1 до 9). Изменение цветов схемы мгновенно обновляет каждый раздел, который её использует, на всех страницах.
Роли цветов внутри каждой схемы
Каждая схема определяет следующие роли цветов, все они задаются в виде шестнадцатеричных значений:
- Фон: основной цвет фона раздела.
- Внутренний фон: слегка тонированный фон, используемый для карточек и вложенных областей контента внутри раздела.
- Цвет заголовков: цвет текста заголовков.
- Цвет основного текста: цвет текста абзацев.
- Цвет выделенного текста: акцентный цвет текста, используемый для цен, бейджей экономии и значений таймера обратного отсчёта. Обычно это самый тёмный или самый насыщенный тон в палитре.
- Цвет ссылок: цвет гиперссылок по умолчанию.
- Цвет ссылок при наведении: цвет гиперссылки, когда покупатель наводит на неё курсор.
- Цвет границ: цвет границ элементов и разделительных линий.
- Цвет обводки: цвет колец фокуса, подсветки выбора с клавиатуры и акцентных обводок, которым нужно выделяться сильнее обычных границ.
- Цвет тени: цвет теней блоков (обычно с некоторой прозрачностью).
- Фон основной кнопки: цвет заливки основных кнопок.
- Текст основной кнопки: цвет надписи на основных кнопках.
- Граница основной кнопки: цвет границы основных кнопок.
- Фон основной кнопки при наведении: цвет заливки основной кнопки при наведении.
- Текст основной кнопки при наведении: цвет надписи основной кнопки при наведении.
- Граница основной кнопки при наведении: цвет границы основной кнопки при наведении.
- Фон второстепенной кнопки: цвет заливки второстепенных кнопок.
- Текст второстепенной кнопки: цвет надписи на второстепенных кнопках.
- Граница второстепенной кнопки: цвет границы второстепенных кнопок.
- Фон второстепенной кнопки при наведении: цвет заливки второстепенной кнопки при наведении.
- Текст второстепенной кнопки при наведении: цвет надписи второстепенной кнопки при наведении.
- Граница второстепенной кнопки при наведении: цвет границы второстепенной кнопки при наведении.
- Фон поля ввода: цвет фона полей ввода формы.
- Цвет текста поля ввода: цвет текста внутри полей ввода формы.
- Цвет границы поля ввода: цвет границы полей ввода формы.
- Цвет подписи поля: цвет текста подписи над полями формы.
- Фон поля при фокусе: цвет фона поля ввода, когда покупатель фокусируется на нём или наводит курсор.
Советы по созданию сильных цветовых схем
- Используйте нейтральный светлый цвет для Фона в большинстве разделов и приберегите яркие цвета для одной акцентной схемы, применяемой в баннерах и разделах с призывом к действию.
- Сделайте Фон основной кнопки визуально отличным от Фона раздела, потому что кнопка должна чётко выделяться.
- Держите Внутренний фон как очень лёгкий оттенок основного Фона, чтобы фон карточек был различим, но не резал глаз.
- Стремитесь к контрасту не менее 4,5:1 между Цветом основного текста и Фоном, а также между Текстом основной кнопки и Фоном основной кнопки.
Типографика
Типографикой на каждой странице управляют четыре роли шрифтов. Каждая роль сопоставляется с семейством шрифтов из доступной библиотеки.
- Основной: основной шрифт для текста абзацев и описаний.
- Заголовок: шрифт для всех заголовков во всём магазине.
- Подзаголовок: шрифт для второстепенных заголовков и подзаголовков разделов, связывающий стили заголовков и основного текста.
- Акцентный: стилистический шрифт для цен, бейджей и декоративного выделения.
Среди доступных шрифтов: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface и Acme.
Для магазинов с арабским контентом шрифты автоматически сочетаются с подходящими арабскими аналогами: например, Inter сочетается с Cairo, а Poppins с Tajawal. Выбирать арабский шрифт отдельно не нужно.
Ширина страницы
Глобальная настройка Ширина страницы управляет максимальной шириной основной сетки контента в пикселях. Разделы с шириной Страница ограничиваются этим значением; разделы с шириной Полная всегда занимают всю область просмотра независимо от него. Доступные значения: 900, 1000, 1100, 1200 (по умолчанию), 1300 и 1400 px. На областях просмотра уже выбранной ширины разделы автоматически сжимаются, заполняя 100% экрана.
Логотип
Логотип задаётся внутри блока логотипа раздела Шапка и внутри блока О нас в подвале. Нажмите блок логотипа на панели управления, затем нажмите + Добавить медиа или + Добавить изображение, чтобы загрузить логотип с вашего устройства или выбрать его из медиабиблиотеки. После загрузки задайте ширину отображения (от 20 до 300 px) и высоту (от 20 до 300 px); другое измерение масштабируется автоматически, сохраняя соотношение сторон.
Фавикон
Фавикон задаётся в разделе Настройки → Фирменный стиль в конструкторе. Нажмите поле фавикона и загрузите изображение (рекомендуется квадратное). Фавикон отображается на вкладках браузера и в закладках.
Фоновое изображение страницы
Также в разделе Настройки → Фирменный стиль можно по желанию задать фоновое изображение для всей страницы. Настройте, как оно масштабируется (Заполнение заполняет всю область просмотра, Вписать вписывает изображение внутрь неё) и повторяется ли оно (мозаикой) или остаётся одним изображением за прокручиваемым контентом.
Глобальные пользовательские CSS и JavaScript
Для продвинутых настроек, которых нельзя добиться стандартными средствами, раздел Настройки предоставляет поле Глобальный CSS (до 1000 символов) и поле Глобальный JS (до 1000 символов). Введённый здесь CSS внедряется на каждую страницу магазина; введённый здесь JS выполняется на каждой странице. Используйте их умеренно и предпочитайте раздел «Пользовательский код» для настроек, относящихся к конкретной странице.