Пример настройки внешнего вида для приложения Одежды

Рассмотрим как настроить для приложения страницу, на которой покупатель сможет увидеть согласие с офертой, и зададим подходящий дизайн для страниц категорий и карточек товаров.

• Настройка отображения согласия с офертой
• Настройка изображений категорий на главной
• Настройка изображений в товаров к каталоге
• Настройка изображений товаров в карточках товаров

Настройка отображения согласия с офертой

В нашем хелп портале мы уже заранее подготовили инструкцию о том, как создать страницу с офертой и как добавить ее для отображения в приложении. Вы можете ознакомиться с процессом в инструкции Настройки приложения под требования 152-ФЗ Адвантшоп.

Настройка изображений категорий на главной

В приложениях для продажи одежды зачастую необходимо отобразить детальное изображение товара и категорий (рис. 1), но изображения могут быть разных размеров, и не всегда есть возможность обрезать каждое фото под размер контейнера.

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

Чтобы достичь эффекта как на (рис. 1) нужно произвести ряд настроек, который позволят отобразить изображения таким образом. 

Рисунок 1.

Перейдите в раздел админ панели вашего приложения, откройте раздел "Дизайн - Параметры", вкладка "Категория товаров", секция "Размер изображения" убедитесь, что размер изображений для "Категория. Маленькая фотография" не ниже 380 на 380px, если необходимо измените и пережмите изображение (рис. 2).

Рисунок 2.

После этого перейдите в раздел админ панели "Мобильное приложение - Внешний вид" и в секции "Дополнительные настройки" (рис. 3).

Рисунок 3.

Добавьте следующие настройки и используя ключи настроек со следующими параметрами:

• NumberOfCategoriesPerLine – 1; настройка установит одну колонку категорий на главной (рис.3 п.,1).
• CategoryPhotoFit – cover; подгоняет фото категорий под контейнер, заполняя его без пустых полей, при необходимости обрезает края (рис.3 п.,2).
• HeightSizeCategory – 500; устанавливает высоту контейнера для изображения категории (рис.3 п.,3).

С ключами можно подробнее ознакомиться в статье о Дополнительных настройках внешнего вида приложения.

Настройка изображений товаров в каталоге

Для настройки изображений товаров в каталоге добавляем следующие настройки:

• HeightSizeProductInCategory – 590; устанавливает высоту контейнера для изображения товара в категории (рис.3 п.,4).
• ProductCardPhotoFit – cover; подгоняет фото товара в категории под контейнер, заполняя его без пустых полей, при необходимости обрезает края (рис.3 п.,5).

С ключами можно подробнее ознакомиться в статье о Дополнительных настройках внешнего вида приложения.

Результат таких изменений (рис. 4).

Рисунок 4.

Теперь перейдем к настройку последней части изображений.

Настройка изображений в карточках товаров

Для настройки изображений товаров в карточках товаров добавляем следующие настройки:

• HeightSizeProduct – 600; устанавливает высоту контейнера для изображения товара в категории (рис.3 п.,6).
• ProductPhotoFit – cover; подгоняет фото товара в карточке товара под контейнер, заполняя его без пустых полей, при необходимости обрезает края (рис.3 п.,7).

С ключами можно подробнее ознакомиться в статье о Дополнительных настройках внешнего вида приложения.

Результат таких изменений (рис. 5).

Рисунок 5.

На этом мы завершили рассмотрение примера настройки вида изображений для приложения продающего одежду.