Разработать адаптивный интернет-магазин на современном готовом решении
Торговая компания «Аркада-маркет» работает на рынке города Брянска и соседних областей с 2004 года, занимаясь продажей современных кровельных и отделочных материалов.
Преимуществом является собственное производство изделий из тонколистового металла, изготавливаемых на оборудовании высокого класса, что позволяет жестко следить за качеством выпускаемой продукции.
Старый сайт-каталог был разработан еще в 2015 году.
Главная страница старого сайта
За это время он морально устарел, а для органического продвижения сайта в поиске существовала серьезная проблема: он не был адаптивен для мобильных устройств.
При этом большая часть трафика шла именно со смартфонов:
Это означало, что для большей части аудитории сайт не подстраивался под устройство, и им было неудобно пользоваться:
Старый сайт АРКАДЫ с мобильного устройства
Это не только потерянный трафик, но и потерянные заказы: как розничные, так и оптовые.
Кроме того, клиент давно хотел реализовать возможность онлайн-оплаты и автоматической выгрузки товаров. На старом решении сделать это было трудоемко и проблематично из-за устаревшего функционала.
Это стало основой для поиска нового современного решения:
Мы остановили свой выбор на решении АСПРО: Максимум. Оно отлично подходит для быстрого запуска интернет-магазина.
Почему мы выбрали именно это решение?
Адаптивная верстка сайта – один из самых популярных способов сделать так, чтобы сайт красиво выглядел на всех мобильных устройствах сразу. Благодаря гибкому макету адаптивный сайт корректно выводится как на смартфонах, так и на планшетах. Размер экрана при этом вообще не играет никакой роли.
Почему адаптивность необходима любому современному сайту:
Как выглядит новый сайт на разных устройствах:
Cannot find 'block_with_pictures' template with page ''
Cannot find 'block_with_pictures' template with page ''
Cannot find 'block_with_pictures' template with page ''
Есть возможность собрать главную страницу под свои предпочтения – мы включили только нужные блоки, настроили порядок их отображения и выбрали подходящий дизайн.
Так на главной появились: большие рекламные баннеры, тизеры с преимуществами, популярные категории разделов и товаров, акции и краткая информация о компании.
Cannot find 'block_with_pictures' template with page ''Чтобы мотивировать посетителей сайта к покупке, разместили блок с Лучшими предложениями и Акциями:
Блок «Лучшие предложения»
Блок «Выгодные предложения» (Акции)
Посетители сайта обращают внимание на скорость загрузки проекта в первую очередь. Если на телефоне сайт загружается более 3 секунд, то 53% клиентов покинет страницу. Такие данные приводит Google.
Также скорость влияет на ранжирование в поисковых системах.
За быструю загрузку в решении Аспро: Максимум отвечает технология LazyLoad. Она направлена на загрузку изображений и блоков сайта по мере просмотра. Сначала загружается только та часть, которую увидит пользователь на первом экране. А по мере пролистывания страниц – остальной контент.
Важнейшая часть интернет-магазина – это каталог. Он должен быть удобным как для пользователя (понятная навигация), так и для владельца сайта (удобная выгрузка и наполнение).
Каталог на старом сайте. Все разделы каталога можно было посмотреть только из меню сайта:
А сами разделы каталога товаров имели сложную и запутанную структуру:
Как выглядит каталог на новом сайте
Интуитивно понятный каталог:
Основные разделы каталога
Есть подразделы со списком товаров на одном экране:
Товары
Карточки товаров на старом сайте
Как таковых их не было. Вместо карточек товаров были статьи с общим описанием без конкретных характеристик и цен:
Чтобы узнать цены на товары пользователю нужно было скачать файл xls в разделе «Цены». Нужно было регулярно следить за актуальностью файла:
Возможности купить товар онлайн не было, для заказа нужно было позвонить или написать на почту.
Карточки товаров на новом сайте
Отдельная карточка на каждый товар с ценой и возможностью купить онлайн:
Карточка товара
Для каждого товара предусмотрены вкладки:
Товары можно добавить в Избранное или добавить в Сравнение. Также есть возможность оформить заказ по одному клику.
Товары в разделе «Сравнение»
Была реализована удобная и многофункциональная корзина, в которой есть маркетинговые инструменты для повышения продаж:
возможность внедрить промокоды
наглядная демонстрация выгоды от покупки:
умные персональные рекомендации:
Для нового сайта выбрали вид корзины «В шапке». Иконка корзины располагается в соответствующей области с правой стороны. Клик по иконке перемещает посетителя, готового оформить заказ, на страницу с выбранными товарами.
Корзина
При оформлении заказа вся необходимая информация по выбору способа оплаты и доставке у покупателя «под рукой»:
С понятным интерфейсов в процессе оформления заказа:
Оформление заказа
Так, в результате проделанной работы, мы разработали многофункциональный современный интернет-магазин с большим потенциалом для развития:
1. Мультирегиональность» – для каждого города своя информация. Отдельное SEO-продвижение для каждого региона.
Посетители интернет-магазина увидят актуальную информацию для их города: контакты, каталоги, остатки товаров, баннеры, цены, акции и другой контент. При этом геолокация определится вручную. А если ее нужно будет изменить, можно воспользоваться удобным выбором города.
2. Умное SEO – широкий выбор инструментов для оптимизации сайта и привлечения трафика из органической выдачи:
Чтобы выгружать большой ассортимент товаров автоматически, нам нужно было наладить выгрузку товаров из базы данных поставщика; из баз данных клиента и поставщиков. Для реализации мы использовали API – инструмент для взаимодействия нескольких программ.
Далее мы разработали личный кабинет для заказчика. При авторизации появляется функционал скачивания файлов по API.
Функционал выгрузки по API
Суть данного функционала в том, что у поставщика есть интерфейс в котором хранится вся база данных о товарах: характеристики, количество на складе и т.д. Заказчик из личного кабинета отправляет по API запрос в интерфейс поставщика и получает обратную информацию о товарах.
После чего эта информация обрабатывается на программном уровне. Затем, с помощью определенных команд, программный код преобразуется в два структурированных, отдельных файла:
С помощью модуля, каталог загружается на сайт в две итерации: разделы и товары.
Для удобства мы настроили 3 вида выгрузки:
Благодаря системе API и разработанному личному кабинету больше не нужно добавлять товары вручную, обновление происходит за счет выгрузки. Что сильно облегчает работу с наполнением сайта и поддержанием актуальности товарной линейки.
Для большого количества товаров пока нет картинок в карточках товаров. Мы использовали скрипт, который выводит на первые места товары, которые имеют картинки. Так разделы выглядят более наполненными, а сайт презентабельным.
Пример заполнения раздела
1. Разработали интернет-магазин адаптивный под разные устройства:
2. Сформирована структура сайта и заполнены разделы
3. Оформлена главная страница
4. Переработан каталог и настроена карточка товаров
5. Настроена корзина и маркетинговые инструменты
6. Настроили выгрузку каталога на основе API системы
7. Добавлен скрипт для товаров без картинок
8. Настроили 3 вида выгрузки товаров
Была выполнена объемная работа по созданию и настройке интернет-магазина, которую клиент высоко оценил и оставил классный отзыв:
Мы ответим в течение 1 часа (в рабочее время) и расскажем, как мы сможем решить ваши задачи!
