Как вам помочь ?
Настройка дизайна
В статье рассмотрим подробнее о том, какие настройки дизайна возможно произвести для мобильного приложения на платформе AdvantShop. Рассмотрим последовательно:
Тема дизайнаДля мобильного приложения предусмотрено две темы дизайна: "Светлая" (рис.1) и "Темная" (рис.2).


Они представляют из себя цвет фона. Для выбора темы необходимо перейти в настройки модуля “Мобильное приложение”, в раздел "Внешний вид". Выбираем пункт "Тема" с выпадающим списком. Для переключения на одну из них, выбираем понравившуюся из списка (рис.3) и сохраняем настройки.
Рисунок 3.
Оформление кнопок, панелей меню и прочих элементов мобильного приложения сайта в каком-либо определенном цвете. Для мобильного приложения можно использовать свой цвет кнопок и текста кнопок. Для того, чтобы изменить цвет элементов меню, также необходимо перейти на вкладку “Внешний вид”, и выбрать определенный цвет. Список доступных цветовых схем представлен в виде палитры (рис. 4).

Рисунок 4.
Можно изменить основной цвет - цвет элементов меню, и цвет текста кнопок. Ниже представлены элементы меню приложения, которые меняются через цветовую схему (рис.5).

Можно использовать цветовую схему магазина (при этом дополнительные настройки цветовой схемы мобильного приложения исчезнут) (рис.6).
Рисунок 6.
Т.е. в мобильном приложении будет использоваться та цветовая схема, которая указана в настройках дизайна основного магазина (рис.7).
Рисунок 7.
Отдельно можно изменить цвет фона шапки, цвет текста в шапке, цвет фона нижнего меню, цвет выбранного пункта меню (рис.8).
Рисунок 8.

Выбранный пункт меню (рис.10).

Цвет пунктов меню (имеется ввиду цвет текста пунктов меню) (рис.11).

Логотип
Для мобильного приложения можно загрузить свой логотип, отличный от логотипа магазина.
Заметка
Рекомендуемые размеры: 480х120 px (в соотношении 3:1);
Формат: png;
Фон: прозрачный.
Для загрузки готового логотипа необходимо перейти в панель администрирования, в настройки модуля вкладка "Внешний вид" -” Логотип для мобильного приложения” - “Добавить изображение” (рис.12).
Рисунок 12.
Ниже показано как будет отображаться логотип на главной странице в приложении (рис.9).

Дополнительная настройка “Выводить логотип по центру” - логотип будет располагаться не слева, а по центру экрана (рис.10).

Рисунок 14.
Ниже вид логотипа при расположении по центру на странице приложения (рис. 11).

Квадратные фото товаров с закругленными углами
Фото в каталоге и в карточке товара будут с закругленными углами (раздел "Внешний вид" - подраздел "Каталог и товары") (рис.12).
Рисунок 16.
В клиентской части отображение будет иметь такой вид (для детального вида сделаем фон темным) (рис.13).

Фото на дополнительных страницах
Заметка
Рекомендуемые размеры данных изображений: 1000х1000 рx;
Формат: png.
При переходе на вкладку "Профиль" откроется страница ввода номера телефона. Изображение на данной странице можно изменить через настройки модуля, вкладка "Внешний вид" - "Изображение "Экран входа"- "Добавить изображение" (рис.14).
Рисунок 18.
Так может выглядеть страница авторизации в приложении после загрузки своего изображения (рис.15).

Изображение для корзины при отсутствии в ней товаров также можно изменить через настройки модуля, вкладка "Внешний вид" - "Изображение "Пустая корзина"- "Добавить изображение" (рис.16).
Рисунок 20.
Отображение пустой корзины в приложении после загрзки изображения (рис.17).

Другие статьи по теме
- Мобильное приложение App Store, Google Play и RuStore
- Демо мобильного приложения
- Настройка мобильного приложения
- Статические блоки мобильного приложения
- Статические страницы мобильного приложения
Тэги: мобильное, приложение, мобильное приложение, mobileapp, mobile app, MobileApp, дизайн, App Store, Google Play, RuStore, настройка дизайна мобильного приложения