Как вам помочь ?

Настройка дизайна

База знаний постепенно обновляется, поэтому некоторые материалы могут временно отличаться от интерфейса вашей панели администрирования.

Статья актуальна для версии магазина: 13.0 | 12.0

В статье рассмотрим подробнее о том, какие настройки дизайна возможно произвести для мобильного приложения на платформе AdvantShop. Рассмотрим последовательно:

Тема дизайна 

Для мобильного приложения предусмотрено две темы дизайна: "Светлая"  (рис.1) и  "Темная"  (рис.2).

Настройка дизайна - 3118
Рисунок 1.
Настройка дизайна - 7048
Рисунок 2.

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

Настройка дизайна - 3669
Рисунок 3.

Цветовая схема 

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

Настройка дизайна - 1670
Рисунок 4.

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

Настройка дизайна - 5685
Рисунок 5.

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

Настройка дизайна - 7995
Рисунок 6.

Т.е. в мобильном приложении будет использоваться та цветовая схема, которая указана в настройках дизайна основного магазина (рис.7).

Настройка дизайна - 6588
Рисунок 7.

Отдельно можно изменить  цвет фона шапки, цвет текста в шапке, цвет фона нижнего меню, цвет выбранного пункта меню (рис.8).

Настройка дизайна - 4977
Рисунок 8.

Покажем на пример, как будет выглядеть мобильное приложение при изменении цвета шапки и нижнего меню (рис.9).
Настройка дизайна - 2152
Рисунок 9.

Выбранный пункт меню  (рис.10).
Настройка дизайна - 4529
Рисунок 10.

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

Настройка дизайна - 4427
Рисунок 11.

Логотип

Для мобильного приложения можно загрузить свой логотип, отличный от логотипа магазина. 

Заметка

Рекомендуемые размеры: 480х120 px (в соотношении 3:1);
Формат:  png;
Фон:  прозрачный.

Для загрузки готового логотипа необходимо перейти в панель администрирования, в настройки модуля  вкладка "Внешний вид" -” Логотип для мобильного приложения” - “Добавить изображение” (рис.12).

Настройка дизайна - 1180
Рисунок 12.

Ниже показано как будет отображаться логотип на главной странице в приложении (рис.13).

Настройка дизайна - 5560
Рисунок 13.

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

Настройка дизайна - 1286
Рисунок 14.

Ниже вид логотипа при расположении по центру на странице приложения (рис. 15).
 
Настройка дизайна - 4032
Рисунок 15.

Квадратные фото товаров с закругленными углами

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

Настройка дизайна - 4585
Рисунок 16.

В клиентской части отображение будет иметь такой вид (для детального вида сделаем фон темным) (рис.17).
 

Настройка дизайна - 4961
Рисунок 17.

 
 

Фото на дополнительных страницах

Заметка

Рекомендуемые размеры данных изображений: 1000х1000 рx;
Формат:  png.

При переходе на вкладку "Профиль" откроется страница ввода номера телефона. Изображение на данной странице можно изменить через настройки модуля, вкладка "Внешний вид" -  "Изображение "Экран входа"- "Добавить изображение" (рис.18).

Настройка дизайна - 3158
Рисунок 18.

Так может выглядеть страница авторизации в приложении после загрузки своего изображения (рис.19).

Настройка дизайна - 2452
Рисунок 19.

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

Настройка дизайна - 2207
Рисунок 20.

Отображение пустой корзины в приложении после загрзки изображения (рис.21).

Настройка дизайна - 3909
Рисунок 21.
Готово. Мы рассмотрели основные настройки дизайна мобильного приложения.

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?