Темы оформления и брендовые цвета

Брендовые цвета и темы оформления делают сайт узнаваемым. Меняются в одном месте, применяются ко всем компонентам автоматически.

Брендовые цвета

1. Настройки → Оформление → Брендовые цвета.
2. Установите три цвета:
   • Primary — основной (кнопки, ссылки, акценты)
   • Secondary — вторичный (фоны второго плана, дополнительные элементы)
   • Accent — акцент (badge, важные подсветки)
3. Введите HEX (например, #FF6B00) или выберите в палитре.
4. Сохраните.

Из основного цвета автоматически генерируются 11 оттенков (50, 100, 200… 950) — компоненты используют нужный оттенок в зависимости от контекста.

Темы оформления

Тема — комбинация шрифта, отступов и базового стиля компонентов. Доступно 4 темы:

• Default — нейтральная, шрифт Inter, средние отступы
• Elegant Light — светлая премиум-тема, шрифт Playfair (serif), больше воздуха
• Modern Dark — тёмная тема, шрифт Inter, контрастные акценты
• Bold Brand — яркая, много градиентов, для брендов с характером

Тема меняется в Настройки → Оформление → Тема. Применяется мгновенно ко всему сайту.

Тёмный режим

В Настройки → Оформление → Тёмный режим выберите:

• Светлый — всегда светлый
• Тёмный — всегда тёмный
• Авто — по системным настройкам устройства клиента
• Переключатель — кнопка в шапке сайта позволяет клиенту выбрать самому

Свой шрифт

На тарифе «Бизнес» можно подключить любой Google Font. В разделе Оформление → Шрифты выберите из списка ~1000 шрифтов или вставьте имя вручную. Шрифт грузится с CDN, поэтому страница не тяжелеет.

Частые вопросы

Цвета не применились — что делать?

Браузер кэширует CSS. Очистите кэш (Ctrl/Cmd+Shift+R) или подождите 5 минут.

Можно ли разный дизайн на разных страницах?

Тема и цвета — глобальные. Но конкретные компоненты можно стилизовать индивидуально через настройки или редактирование Liquid.