Разработка интернет-магазина по продаже кровельных материалов

s

Задача

Разработать адаптивный интернет-магазин на современном готовом решении


Период: 2022

Какие велись работы

Ссылка на проект

arkada32.ru

О клиенте

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

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

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

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

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

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

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

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

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

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

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

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

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

   

Реализация

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Товары

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

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

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

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

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

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

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

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

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

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

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

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

  • возможность внедрить промокоды

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

  • умные персональные рекомендации:

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

Корзина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример заполнения раздела

Краткие выводы о том, чтобы было сделано

    1. Разработали интернет-магазин адаптивный под разные устройства:

       

    2. Сформирована структура сайта и заполнены разделы

    3. Оформлена главная страница

    4. Переработан каталог и настроена карточка товаров

    5. Настроена корзина и маркетинговые инструменты

    6. Настроили выгрузку каталога на основе API системы

    7. Добавлен скрипт для товаров без картинок

    8. Настроили 3 вида выгрузки товаров

Была выполнена объемная работа по созданию и настройке интернет-магазина, которую клиент высоко оценил и оставил классный отзыв:

Вы хотите быть сильнее своих конкурентов?

Обеспечим стабильный рост и развитие вашего бизнеса в Интернете!

Получить персональное коммерческое предложение

Готовы начать?

Позвоните нам:
+7 (499) 686-01-14

Или оставьте заявку на сайте
и мы свяжемся с Вами.

s

Лев?..

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

Специалисты «Веб-Центра» сильно увеличат приток клиентов и обеспечат вашему проекту мощную отдачу интернет-рекламы! ×
Наши менеджеры готовы прямо сейчас обсудить ваши задачи!
Петр

Петр

Позвоните нам или оставьте заявку на бесплатную консультацию,
мы ответим в течение 1 часа (в рабочее время) и расскажем, как мы сможем решить ваши задачи!

Обсудить задачу
СПАСИБО!

Благодарим за доверие и подписку на рассылку Веб-центра"


Будем рады видеть тебя в наших друзьях в группе VK. Там мы обсуждаем материалы и отвечаем на вопросы о продвижении в интернете.

Поздравляем!
Ваш приз: Учебник по внедрению CRM

Держи телефон рядом!
Мы позвоним и расскажем, как получить подарок!

Наш менеджер свяжется с вами и объяснит как забрать подарок
Испытайте свою удачу
Раскрутите барабан и получите приз
*вращать барабан можно только 1 раз
Отправляя форму, вы соглашаетесь на обработку персональных данных, защищенных политикой конфиденциальности и обрабатываемых для выполнения заявки.