0

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

Роксолана Петрусенко
  • 695
  • 2

Цели и задачи проекта:

  1. Создать интернет-магазин одежды и обуви с удобным интерфейсом, позволяющий быстро найти и купить товар
  2. Реализовать дополнительный функционал, необходимый для продажи одежды и обуви
  3. Разработать сайт, который легко будет продвинуть в ТОП поисковых систем



Общее описание проекта

 

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

 

А что с SEO-продвижением?

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

 

Выбор CMS для реализации проекта или на какой платформе создать интернет-магазин одежды?

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

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

Интернет-магазин одежды был запущен в течение месяца, уже с внутренней оптимизацией. Далее внедряли новые доработки и усовершенствования, в том числе и для SEO.   



Как создать интернет магазин одежды с нуля

Как создавали интернет-магазин одежды и обуви Hype?

Дизайн сайта

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

Сайт адаптирован под все устройства.

 

Технические и маркетинговые решения

 

LookBook

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

Часто для лучшего представления товара используют LookBook.

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

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






На бекэнде это реализовано следующим образом:

В админпанели на баннере отмечаются нужные товары и вставляются ссылки, которые на фронте превращаются в предпросмотр товара.





Таблица соответствия размеров

Вторым по значению фактором для покупателя является правильный подбор размера, так как этот страх преследует всех покупателей онлайн: «Подойдет ли мне купленный товар по размеру?». Каждый бренд отшивает вещи по-своему, и часто размеры либо маломерные, либо большемерят. Важно понимать, на что ориентироваться.

Для этого реализована возможность в каждом бренде добавить свою размерную сетку вместе с таблицей соответствия.





Поиск по цвету

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

Для свойства "Цвет" мы реализовали возможность выбора любого цвета с помощью colorpicker. Это свойство может использоваться в фильтре. Чтобы сформировать URL для страницы фильтра, дополнительно нужно ввести название цвета.

Выбор цвета в карточке товара в админпанели:





Отображение цвета в фильтре:





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





Покупатели, вбив в поиск: "Бирюзовые кроссовки", получат именно страницу с товарами нужного цвета, а не страницу категории, где есть модели разных цветов. 



Быстрая покупка с перечня товаров

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

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





Расчет процента скидки

У каждого товара может быть старая и новая цена. Например: цена была 100$, сделали скидку и теперь товар стоит 80$. На фронтенде это отображается в виде перечеркнутой старой цены и новой цены красного цвета рядом.  

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





Каталог товаров

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

  • Размер
  • Цвет
  • Бренд
  • Коллекция
  • Цена

 

Все фильтры формируют страницы, доступные для индексирования и продвижения по НЧ-запросам типа категория + бренд, категория + цвет, категория + размер.

Например: Кроссовки мужские размер 40

При выборе фильтра автоматически формируется meta title, h1, description.

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





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

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

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



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

Удобное оформление заказа

Самое важное - оформление заказа происходит на одной странице.

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

Интегрирован популярный в Украине способ доставки "Новой Почтой" через API. Это позволяет выбрать город и нужное отделение.

 

Языковые версии сайта

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



Что есть для SEO:

  • Автоматическое заполнение метаданных в товарах
  • Автоматическое формирование метаданных страниц фильтров
  • Возможность добавлять описание на любых страницах, в том числе для фильтров
  • Актуальный на момент формирования sitemap.xml
  • Редактируемый из админпанели robots.txt
  • Удобное подключение счетчиков аналитики и других сторонних скриптов, онлайн-помощников, ремаркетинга, Фейсбук-пикселя из админпанели
  • Корректное формирование ЧПУ



Что в итоге получилось

После реализации основного задуманного функционала интернет-магазин одежды и обуви Hype был запущен. И на сегодняшний день вышел на стабильные показатели прибыли.

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

Работы по проекту ведутся и сегодня, постепенно улучшая магазин и его маркетинговые показатели.

Рассказать друзьям:


Написать комментарий

captcha

okay_user
SimplaMarket
20.09.2018, 16:17
https://simplamarket.com/
okay_user
Александр
20.09.2018, 16:16
Классный сайт. А можно узнать, кто разработчик?

Также советуем посмотреть

7 способов повысить конверсию интернет-магазина
Роксолана Петрусенко

Project Manager

22.08.2017

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

  • 1227
Читать далее
11 ошибок в электронной коммерции, которые вы совершаете
Катя Собинова

Marketing Manager

23.10.2017

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

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

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

  • 2737
Читать далее
30 UX-советов: Как улучшить страницу оформления заказа
Катя Собинова

Marketing Manager

06.10.2017

Существует множество вариантов того, как человек попадает на сайт интернет-магазина: кто-то вводит в адресной строке записанную где-то ссылку, кто-то кликает по появившейся внезапно рекламе товара, кто-то переходит на карточку с товаром из результатов поиска. Точек входа множество, и чтобы она не стала автоматически и точкой выхода, необходимо постоянно апгрейдить сайт: улучшать его юзабилити (удобство для пользователя), обновлять контент. Сегодня же речь пойдет не о стартовой странице онлайн-магазина, а о финальной точке знакомства, которая должна принести долгожданную конверсию — странице оформления заказа.

  • 4765
Читать далее