Кейс: Як створити інтернет-магазин одягу та спортивного взуття з нуля

Цілі і завдання проекту:

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

Загальний опис проекту

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

А що з 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 був запущений. І на сьогоднішній день вийшов на стабільні показники прибутку.

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

Роботи по проекту ведуться і сьогодні, поступово покращуючи магазин і його маркетингові показники.