Оформление главного экрана клиентского приложения¶

Внешний вид приложения настраивается в CRM на экране «Каталог → Оформление». Экран состоит из двух вкладок:

• «Главный экран» — конструктор наполнения главного экрана: верхние баннеры, списки и сетки товаров и категорий;
• «Цветовая схема» — цвета интерфейса магазина для светлой и тёмной темы.

Вкладка «Главный экран»¶

Слева расположена панель «Компоненты главного экрана» с кнопками добавления, справа — живое превью главного экрана в макете телефона. Превью показывает название выбранного магазина, верхний баннер, добавленные компоненты и в конце — сетку корневых категорий каталога.

Выбор магазина¶

Компоненты привязываются к магазинам, поэтому у каждого магазина свой главный экран. Если в CRM больше одного магазина, над панелью компонентов отображается блок «Выберите магазин для отображения» с выпадающим списком — конструктор и превью показывают главный экран выбранного магазина. Если магазин один, блок выбора не отображается.

Типы компонентов¶

Панель добавления разделена на три группы.

«Большой верхний баннер»¶

Горизонтальная лента крупных баннеров в самом верху главного экрана:

• «Верхний баннер с товарами» — баннер с прикреплённой подборкой товаров;
• «Верхний баннер с категориями» — баннер с прикреплёнными категориями;
• «Верхний баннер с акцией» — баннер, привязанный к акции из «Маркетинг → Акции»; нажав на него, покупатель видит товары, участвующие в акции.

Верхний баннер всегда закреплён на первой позиции главного экрана.

«Компоненты с товарам軶

• «Список товаров» — горизонтальная лента карточек товаров. Подходит для подборок вида «Хиты продаж» или «Новинки»;
• «Сетка товаров» — вертикальная сетка карточек товаров в несколько колонок;
• «Баннер с товарами» — изображение в ленте главного экрана, открывающее выбранную подборку товаров.

«Компоненты с категориям軶

• «Список категорий» — горизонтальная лента карточек категорий;
• «Сетка категорий» — вертикальная сетка категорий в несколько колонок;
• «Баннер с категориями» — изображение в ленте главного экрана, открывающее выбранные категории.

Как добавить компонент¶

1. Нажмите кнопку с названием компонента на панели, например «Сетка товаров» или «Верхний баннер с акцией».
2. В открывшемся диалоге заполните поля:
   • «Магазины» — обязательное поле; выберите магазины, на главном экране которых будет отображаться данный компонент. Если магазин один, он подставляется автоматически.
   • «Название» — заголовок компонента, который видит покупатель.
   • «Изображение» — только у верхних баннеров, «Баннера с товарами» и «Баннера с категориями»: загрузите файл или нажмите «Выбрать из галереи...», чтобы использовать ранее загруженное изображение. Без изображения баннер не сохранится.
   • Содержимое — товары и категории добавляются в список кнопками «Добавить» и «Исключить»; «Баннер с товарами» и «Баннер с категориями» не сохранятся с пустым списком. Для «Верхнего баннера с акцией» выберите акцию в поле «Акция» — список товаров акции показан в диалоге только для чтения.
3. Нажмите «OK» — компонент сохранится и появится в превью (в диалогах «Баннер с товарами» и «Баннер с категориями» кнопка сохранения называется «Сохранить»). Кнопка «Отмена» закрывает диалог без сохранения.

Требования к изображениям¶

• Поддерживаемые форматы: PNG, JPEG, GIF, WebP, SVG, BMP, HEIC.
• Максимальный размер файла — 10 МБ.
• Изображения крупнее 700 пикселей автоматически уменьшаются до 700 пикселей по большей стороне; GIF, WebP и SVG не пересжимаются и отдаются покупателю как есть.
• Для верхнего баннера рекомендуется изображение с соотношением сторон 2 к 3, например 600×900 или 800×1200 пикселей.
• Для баннера в ленте («Баннер с товарами», «Баннер с категориями») — соотношение 2 к 1, например 1000×500 или 1200×600 пикселей.

Порядок, редактирование и удаление¶

На карточке каждого компонента в превью расположены кнопки управления:

• карандаш — открывает диалог редактирования компонента;
• крестик (×) — удаляет компонент; перед удалением показывается диалог подтверждения;
• стрелки вверх и вниз — перемещают компонент на одну позицию выше или ниже.

Верхний баннер всегда закреплён на первой позиции и стрелками не перемещается — остальные компоненты двигаются только ниже него.

Применение изменений¶

Отдельного шага «публикации» нет. Компонент сохраняется в момент нажатия кнопки сохранения в диалоге и сразу становится виден покупателям; превью в макете телефона обновляется после сохранения, удаления или перемещения компонента.

Вкладка «Цветовая схем໶

На вкладке настраиваются цвета интерфейса приложения. Вкладка содержит два набора цветов — «Светлая» и «Темная». Какой набор видит покупатель, определяется его выбором в настройках приложения («Тема интерфейса»: «Системная», «Светлая» или «Тёмная»; «Системная» повторяет тему устройства).

Каждый набор включает пять цветов:

Цвет выбирается в палитре рядом с его названием и сохраняется сразу после выбора — отдельной кнопки сохранения на вкладке нет.

Кнопка «Вернуть цвета по умолчанию» сбрасывает все цвета открытой темы к базовым значениям; перед сбросом показывается диалог подтверждения.