# Оформление
# Предустановленный дизайн
В разделе "Настройки дизайна" вы получаете возможность отредактировать стили блоков рекомендаций по заранее предустановленным параметрам.
# Редактирование стилей
Экран настройки состоит из двух частей:
- Слева — Отображение выбранного стиля блока рекомендаций.
- Справа — Список доступных тем блоков рекомендаций.
Обратите внимание
В "Галерее" две предустановленные темы — Светлая и Темная.
Они не редактируются.
Редактируемые темы
Созданные и настроенные пользователем темы показаны в разделе "Мои темы".
Их можно редактировать после создания.
# Создание новой темы
Шаг 1
Выбираем в "Галерее" одну из предустановленных тем — Светлую или Темную.
Шаг 2
Нажимаем кнопку "Редактировать" справа от названия темы.
Шаг 3
В появившемся окне задаем имя новой теме.
Шаг 4
После создания новой темы, перед вами откроется редактор темы.
# Редактирование темы
Обратите внимание
Редактор темы состоит из двух редакторов:
Базовый редактор
В нем есть только предустановленные настройки.
CSS редактор
Предназначен для пользователей, разбирающихся в верстке и предоставляет полную свободу по настройке внешнего вида темы.
Важный момент
Переключение между Базовым и CSS редактором ведёт к тому, что будут утеряны настройки в том редакторе, в котором вы изначально находились.
Поэтому при редактировании темы нужно выбирать лишь один редактор и не переключаться на другой.
Если нужно две темы, созданных отдельно в Базовом и CSS редакторах, то для этого нужно создать две разные темы и править каждую в своём редакторе.
В рамках данного руководства будет разбираться работа только в "Базовом редакторе".
# Базовый редактор
При редактировании темы все производимые изменения сразу же отображаются на превью с левой стороны.
Список доступных настроек.
| Название | Описание |
|---|---|
| Название темы | На ваше усмотрение |
| Цвет текста | Задаётся цвет текста под картинкой товара (описание плюс цена) |
| Размер заголовка | Задается размер текста в заголовке блока (сам текст заголовка в данном разделе не редактируется) |
| Цвет заголовка | Задается цвет заголовка блока |
| Размер шрифта | Задается размер шрифта под картинкой товара и внутри кнопки (описание плюс текст на кнопке) |
| Цвет фона | Задается цвет фона всего блока |
| Размер карточки товара | Задается только ширина карточки товара |
| Основной цвет | Задается цвет кнопки в карточке товара |
После того, как все настройки произведены, вы можете сохранить тему, сбросить до "стандартного шаблона", либо удалить, в случае ненадобности.
Чтобы созданная тема применилась к размещенным блокам на сайте, необходимо её опубликовать.
На примере ниже, красной стрелкой показано, что выбрана тема "Моя первая тема" — она выделена серым цветом.
После выбора нужной темы нажимаем кнопку "Опубликовать" и дизайн блоков на сайте изменится на тот, что вы видите в левой части редактора.
# Собственный дизайн
Если возможности базового редактора не позволяют сделать подходящий под стиль сайта блок рекомендаций, предоставляется возможность сверстать собственный дизайн под ключ
Для этого нужно зайти в блок рекомендаций и открыть вкладку "Шаблон".
С левой стороны будет текстовый редактор, с правой — перечень рекомендаций по верстке.
Обратите внимание
В текстовом редакторе меняется верстка блока. Применяется шаблонизатор liquid для работы с массивом товаров.
Дополнительно в данной вкладке можно прописать UTM метки, для отслеживания в аналитике переходов с блока.