OTMA, бренд одежды с собственными коллекциями. Мы создали для него магазин на InSales на основе шаблона Newtone 2.0, адаптировали оформление под бренд и собрали основные страницы покупки. Затем развивали магазин: дорабатывали выбор цвета и остатков, поиск и оплату при оформлении заказа.
В центре визуальной подачи оставили фотографии одежды. Каталог, карточка товара и страницы коллекций должны были помогать рассмотреть вещи, а покупательские действия оставаться рядом: выбрать вариант, проверить его наличие и перейти к заказу.
Шаблон адаптировали под фотографии и коллекции
Взяли готовую платформенную основу и переработали её оформление в сдержанную подачу OTMA. Крупные фотографии показывают одежду, а навигация ведёт к ассортименту. Такой подход позволил использовать возможности InSales и оформить магазин под конкретный бренд.
Каталог и поиск
Собрали выпадающее меню с категориями, фильтрацию и сортировку. В товарной сетке основное место занимают фотографии: покупатель может сравнить несколько вещей и открыть заинтересовавшую модель.
Позже доработали поиск для настольной и мобильной версий. На компьютере поле ввода открывается по нажатию на иконку. На телефоне поиск адаптировали к небольшому экрану. Доработка вошла в дальнейшее развитие навигации магазина.
Цвет, размер и наличие в одной карточке
В карточке предусмотрели выбор цвета и размера, увеличение фотографии, информацию о составе и уходе. Рядом с покупкой оставили возможность обратиться к продавцу через WhatsApp.
При дальнейшей доработке цвета вывели кружками и связали выбор со сменой фотографии. Этот сценарий реализовали в настольной и мобильной карточке, а также в быстром просмотре. Покупатель может рассмотреть выбранный цвет в том формате, в котором открыл товар.
Добавили вывод остатков по вариантам и доработали поле электронной почты в предзаказе. Так в карточке учитываются различия между вариантами одежды, а для предзаказа предусмотрен контакт покупателя.
Коллекция как самостоятельная история
Для коллекций сделали отдельную страницу с переходами в галерею. Она дополняет обычный каталог: здесь посетитель знакомится с визуальной подачей коллекции, а в каталоге выбирает конкретную вещь, цвет и размер.
Корзина, доставка и оплата
Подготовили корзину и страницу оформления заказа, подключили доставку и оплату. В корзине покупатель проверяет выбранные товары, затем заполняет данные и выбирает способ получения. Стоимость товара и доставки видна при оформлении.
При последующих доработках добавили платёжный виджет на страницу оформления заказа. Это часть развития уже запущенного магазина вместе с обновлением поиска и выбора вариантов.
Мобильная версия
Подготовили основные страницы для небольшого экрана. Структура перестраивается под телефон, чтобы фотографии, сведения о товаре и действия покупателя помещались в последовательную страницу. Отдельно адаптировали контактную информацию.
Дополнительный экран адаптации
Что получил бренд
OTMA получил магазин с каталогом, карточками вариантов, страницами коллекций, корзиной, доставкой и оплатой. Оформление подстроили под фотографии и характер бренда, а после запуска дополнили сценарии поиска, выбора цвета и предзаказа.
Эти работы связаны одним покупательским маршрутом: познакомиться с коллекцией, найти вещь, выбрать нужный вариант и оформить покупку.
Иллюстрации показывают страницы из материалов запуска. Последующие доработки описаны в соответствующих разделах.
Если вы планируете запуск магазина для своего бренда, подробнее об услуге: разработка интернет-магазинов.
