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

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

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

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

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

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

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

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

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

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

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

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

Дизайн сайта

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

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

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

LookBook

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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