...
Open admin panel and click "Plugins"
Select "Demonstration MetaUI Demonstration"
Go to "Download/Update" tab and install the plugin if you don't have it in the list
...
Application design: logo and colors
Лучше всего сделать оформление такое же как на сайте Коробки ОТ, чтобы у покупателя в голове ваш сайт и мобильное приложение были одним магазином.
В разделе плагинов кликаем по плагину «Демонстрация MetaUI»
В списке доступных изменений ищем пункт «Настройка дизайна приложений»
Кликаем по нему мышкой и нажимаем кнопку «Открыть»
Логотип
Берем тот же самый логотип, что вы используете в Коробке ОТ и сохраняем его на ваш компьютер (если логотип у вас и так сохранен, пропускаем этот шаг).
Нажимаем на кнопку «Выбрать файл»
Логотип загрузится автоматически, когда вы выберете файл на компьютере. Чтобы логотип появился в приложении, нажимаем кнопку «Сохранить»
Цветовое оформление
Делает цветовое оформление 1 в 1 как у вашего магазина.
Переходим в админке в раздел «Конфигурация → Конструкция сайта → Тема дизайна»
Отсюда нам понадобятся цвета, которые мы запишем, чтобы настроить мобильное приложение.
Кликаем по цвету дизайна и записываем цифры RGB (если у вас есть брендбук и используется другая система цветов, используйте её)
Соотношение цветов в Коробке ОТ и в мобильном приложении
| Название полей в приложении | Название полей в Коробке ОТ |
|---|---|
| Вспомогательный цвет | Дизайн. Цвет 1 |
| Фоновый цвет | Цвет фона |
| Основной цвет | Дизайн. Цвет 2 |
| Цвет текста | Цвет текста |
| Цвет текста на фоне основного цвета |
Цвета в приложении для наглядности будут обозначены ярко-синим цветом
| Вспомогательный цвет | Фоновый цвет | Основной цвет |
|---|---|---|
| Первый цвет кнопок, нижнее меню | Фон страниц приложения | Второй цвет кнопок |
Когда все цвета выписаны, начинаем редактировать мобильное приложение. Кликаем по полю первого цвета
Записываем цвет в формате RGB
Если у вас формат не RGB, переключаем на нужный формат с помощью стрелочек
После выбора цвета, нажимаем кнопку «Сохранить»
Так по очереди делаем со всеми цветами
Если у вас в дизайне сайта есть фоновое изображение, можно его загрузить и сюда. Выбираем файл на вашем компьютере
Нажимаем кнопку «Сохранить»
...
It is better to make application design similar to your website. Thus, the application and the site will be interconnected in customer's head.
Click "Demonstration MetaUI" in Plugins section
Find "Applications design settings"
Select it and click "Open" button
Logo
Take the same logo that you use in your website and save it to your computer (skip this step if you already have saved logo).
Click "Select file"
Logo will download automatically when you select the file on your computer. Click "Save" button to add logo into application
Color design
Makes color design 1 in 1 like your store.
Go to "Configuration → Website configuration → design theme"
From here we will need the colors that we will record to configure the mobile application.
Click design color and write RGB digits (use another color system if you have a brand book and a different color system)
The ratio of colors in OT Box and in mobile application
| Fields names in application | Fields names in OT Box |
|---|---|
| Auxiliary color | Design. Color 1 |
| Background color | Background color |
| Primary Color | Design. Color 2 |
| Text color | Text color |
Text color on background of primary color |
Colors in the application will be bright blue for clarity.
| Auxiliary color | Background color | Primary Color |
|---|---|---|
| Buttons first color, bottom menu | Application pages background | Buttons second color |
Start editing the mobile application when all the colors are written out. Click the field of the first color
Write color in RGB format
Switch to necessary format using the arrows if your format is not RGB
Click "Save" button after selecting color
Do it with all the colors in turn.
If you have a background image in your website design, you can upload it here as well. Select file on your computer
Click "Save" button
Showcase
Настройка витрины помогает показать или скрыть определенные параметры товара, например, отзывы или ссылку на оригинал.
...