Как мы разработали адаптивный интернет-магазин кровельных материалов Аркада Маркет. Читайте в кейсе от агентства «Веб-Центр»

О клиенте

Торговая компания «Аркада-маркет» работает на рынке города Брянска и соседних областей с 2004 года, занимаясь продажей современных кровельных и отделочных материалов.

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

Задачи проекта

Старый сайт-каталог был разработан еще в 2015 году.

Главная страница старого сайта

За это время он морально устарел, а для органического продвижения сайта в поиске существовала серьезная проблема: он не был адаптивен для мобильных устройств.

При этом большая часть трафика шла именно со смартфонов:

Это означало, что для большей части аудитории сайт не подстраивался под устройство, и им было неудобно пользоваться:

Старый сайт АРКАДЫ с мобильного устройства

Это не только потерянный трафик, но и потерянные заказы: как розничные, так и оптовые.

Кроме того, клиент давно хотел реализовать возможность онлайн-оплаты и автоматической выгрузки товаров. На старом решении сделать это было трудоемко и проблематично из-за устаревшего функционала.

Это стало основой для поиска нового современного решения:

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

Реализация

Мы остановили свой выбор на готовом решении АСПРО: Максимум. Оно отлично подходит для быстрого запуска интернет-магазина.

Почему мы выбрали именно это решение?

1. Адаптивная версия «Под большой палец»

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

Почему адаптивность необходима любому современному сайту:

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

Как выглядит новый сайт на разных устройствах:

Отображение старого сайта на мобильных устройствах

Отображение нового сайта на мобильных устройствах

Отображение старого сайта на планшете

Отображение нового сайта на планшете

Отображение старого сайта на компьютере

Отображение нового сайта на компьютере

2. Большой выбор элементов для оформления главной страницы

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

Так на главной появились: большие рекламные баннеры, тизеры с преимуществами, популярные категории разделов и товаров, акции и краткая информация о компании.

Чтобы мотивировать посетителей сайта к покупке, разместили блок с Лучшими предложениями и Акциями:

Блок «Лучшие предложения»

Блок «Выгодные предложения» (Акции)

3. Быстрая скорость загрузки

Посетители сайта обращают внимание на скорость загрузки проекта в первую очередь. Если на телефоне сайт загружается более 3 секунд, то 53% клиентов покинет страницу. Такие данные приводит Google.

Также скорость влияет на ранжирование в поисковых системах.

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

Важнейшая часть интернет-магазина – это каталог. Он должен быть удобным как для пользователя (понятная навигация), так и для владельца сайта (удобная выгрузка и наполнение).

Как мы реализовали каталог и карточки товаров на новом сайте

Каталог на старом сайте. Все разделы каталога можно было посмотреть только из меню сайта:

А сами разделы каталога товаров имели сложную и запутанную структуру:

Как выглядит каталог на новом сайте

Интуитивно понятный каталог:

Основные разделы каталога

Есть подразделы со списком товаров на одном экране:

Товары

Карточки товаров на старом сайте

Как таковых их не было. Вместо карточек товаров были статьи с общим описанием без конкретных характеристик и цен:

Чтобы узнать цены на товары пользователю нужно было скачать файл xls в разделе «Цены». Нужно было регулярно следить за актуальностью файла:

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

Карточки товаров на новом сайте

Отдельная карточка на каждый товар с ценой и возможностью купить онлайн:

Карточка товара

Для каждого товара предусмотрены вкладки:

описание
характеристики
отзывы
как купить
оплата
доставка

Товары можно добавить в Избранное или добавить в Сравнение. Также есть возможность оформить заказ по одному клику.

Товары в разделе «Сравнение»

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

возможность внедрить промокоды
наглядная демонстрация выгоды от покупки:
умные персональные рекомендации:

Для нового сайта выбрали вид корзины «В шапке». Иконка корзины располагается в соответствующей области с правой стороны. Клик по иконке перемещает посетителя, готового оформить заказ, на страницу с выбранными товарами.

Корзина

При оформлении заказа вся необходимая информация по выбору способа оплаты и доставке у покупателя «под рукой»:

С понятным интерфейсов в процессе оформления заказа:

Оформление заказа

Так, в результате проделанной работы, мы разработали многофункциональный современный интернет-магазин с большим потенциалом для развития:

1. Мультирегиональность» – для каждого города своя информация. Отдельное SEO-продвижение для каждого региона.

Посетители интернет-магазина увидят актуальную информацию для их города: контакты, каталоги, остатки товаров, баннеры, цены, акции и другой контент. При этом геолокация определится вручную. А если ее нужно будет изменить, можно воспользоваться удобным выбором города.

2. Умное SEO – широкий выбор инструментов для оптимизации сайта и привлечения трафика из органической выдачи:

Что еще интересного мы реализовали для интернет-магазина

1. Каталог выгружается на основе API системы

Чтобы выгружать большой ассортимент товаров автоматически, нам нужно было наладить выгрузку товаров из базы данных поставщика; из баз данных клиента и поставщиков. Для реализации мы использовали API – инструмент для взаимодействия нескольких программ.

Далее мы разработали личный кабинет для заказчика. При авторизации появляется функционал скачивания файлов по API.

Функционал выгрузки по API

Суть данного функционала в том, что у поставщика есть интерфейс в котором хранится вся база данных о товарах: характеристики, количество на складе и т.д. Заказчик из личного кабинета отправляет по API запрос в интерфейс поставщика и получает обратную информацию о товарах.

После чего эта информация обрабатывается на программном уровне. Затем, с помощью определенных команд, программный код преобразуется в два структурированных, отдельных файла:

1 файл содержит полностью структуру разделов,
2 файл содержит полностью все карточки товаров (около 100 000).

С помощью модуля, каталог загружается на сайт в две итерации: разделы и товары.

Для удобства мы настроили 3 вида выгрузки:

новые товары отдельно, без затрагивания старых,
обновление цен полностью на всю номенклатуру товаров,
обновление разделов – если у поставщика появились новые разделы (либо удалялись старые).

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

2. Скрипт для товаров без картинок

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