Starting a new project?
отримати консультацію
Залиште свої контактні дані, наш менеджер передзвонить вам.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Картка товару - сторінка з детальною інформацією про продукт та інші супутні послуги, що надає магазин. Товарна карта покликана привернути увагу відвідувачів, переконати їх залишитися на сайті та зробити покупку.
Картка товару - фінальний вирішальний крок користувача в воронці продажів. В момент перегляду сторінки людина і приймає рішення про покупку. За наявністю однакової ціни, умов оплати/доставки/повернення покупки, покупці частіше обирають той магазин, в якому інформація щодо продукту повна - т. я. вона закрила його потребу в обізнаності.
Які питання користувачів вирішує картка товару:
Схема здійснення повторної покупки
Правильно оформлена товарна карта - інструмент відкладених конверсій. Користувач швидше повернеться до чіпляючої сторінки, що запам'яталася (дизайном, зрозумілим описом продукту, зручним сервісом).
Потреби власників магазинів, досягненню яких сприяє продуктова карта:
З чого починається заповнення картки товару? З впровадження SEO-рекомендацій. Так сторінки товарів відразу будуть оптимізовані та готові до просування. Розглянемо основні блоки товарної карти.
1) URL – людинозрозуміла адреса сторінки.
Складові URL:
Рис. 1 – Приклад людинозрозумілої адреси
Для кожного товару своя унікальна адреса URL.
2) Хлібні крихти.
Це навігаційний ланцюжок користувача від Головної сторінки до шуканого товару.
Рис. 2 – Приклад хлібних крихт
3) Назва (h1).
Місце розташування – зліва над фото продукту (пам’ятаємо про F та Z патерни перегляду сторінки).
Що пишемо?
Маска для назви:
Назва товару – Бренд – Колекція/Підвид/Модель – Тех. характеристики (не обов’язково) – Колір – Артикул (опціонально)
Рис. 3 – Приклад маски для назви товару
1 – назва товару “Конструктор”;
2 – бренд “Lego”;
3 – колекція “Duplo”;
4 – тип “Поезд Считай и играй 23 детали”;
5 – артикул товарної одиниці.
4) Title, Description та мікророзмітка в сніпеті
Title дублює назву продукту.
Description може бути єдиним, а назва продукту може змінюватися. На ранжування це не впливає.
Рис. 4 – Приклад вірної мікророзмітки в сніпеті
Що вказується в метаописі:
Мікророзмітка обов’язково використовується для сниппету, адже так пошукові системи одержують більше інформації про сайт. А це позначається на SEO-просуванні.
Вимоги до зображень:
Рис. 5 – Приклад відображення наявності відеоконтенту в картці товару
Рис. 6 – Приклад використання лупи для товару
Рис. 7 – Наявність різних ракурсів предмету
Загальний вигляд:
Рис. 8 – Приклад перегляду товару в панорамному режимі
І режим 360:
Рис. 9 – Приклад перегляду в режимі 360
Рис. 10 – Приклад деталізації перегляду виробу
Рис. 11 – Варіанти зображення товару кожного представленого кольору
Сервіси, які допоможуть стиснути зображення:
З боку юзабіліті:
Рис. 12 – Приклад поліпшення юзабіліті карти товару
Рис. 13 – Приклад відеоогляду UGC в карті товару
Рис. 14 – Приклад демонстрації товару
Попутно для більшої наочності до сумки чи заплічника можна помістити будь-які повсякденні речі: телефон, гаманець, ключницю, блокнот, косметичку, пляшку води та ін.. Або вказати поруч цю інформацію.
Рис. 15 – Приклад демонстрації місткості товару
Відео:
Рис. 16 – Загальна тривалість відеодемонстрації
У відеоогляді перераховані характеристики товару, а також одразу видно, як кеди виглядають на нозі.
Техніка:
Рис. 17 – Реалізація демонстрації реального масштабу товару
Детальніше про важливість наявності відеоконтенту ми писали в статті “Як наявність відео впливає на просування“.
Розташовується праворуч від фотографії.
Це ті параметри, які відразу впадають в очі при відкритті сторінки:
Рис. 18 – Приклад реалізації калькулятора вироби
Рис. 19 – Приклад продуманої карти товару
Рис. 20 – Приклад реалізації терміну закінчення акції
Що стосується ціни з т. з. юзабіліті:
Рис. 21 – Інформація з повідомленням про наявність товару
Це були бажані пункти для включення до короткої інформації про товар.
Якщо процедура замовлення передбачає вибір кольору/розміру і т. д. виробу, інформація може надаватися наочно.
Поруч розміщені кнопки “Купити/Додати до кошика”.
Причому кнопку СТА добре видно, вона легко візуалізується на сторінці та зручна для кліку.
Рис. 22 – Продумане меню зі швидким замовленням
Процедура замовлення проста й легка. Після кліка на кнопку “Додати товар до кошика” може спливати вікно “Продовжити покупки” або “Оформити замовлення”.
Рис. 23 – Варіанти подальшого кроку користувача
У цьому пункті робимо упор на надані варіантів швидкої угоди або наступного кроку відвідувача для завершення замовлення.
Опис продукту – актуальний та правдивий.
Обсяг – на розсуд підприємця. Технічна продукція може мати громіздкий опис.
Відносно унікальності – в описі технічної складової товарів вкрай важко добитися 100% унікальності, та це й не потрібно (як перевірити унікальність, читайте тут). Важливо, щоб інформація про продукт була зрозуміла цільовому клієнту – написана в його світі. Тобто, умовно “смартфон має 3 камери” для клієнта означає “фото вийдуть відмінної якості”.
В ідеалі – ви збираєте питання користувачів та даєте на них розгорнуті відповіді.
С т. з. юзабіліті:
Рис. 24 – Приклад використання інфографіки в карті товару
Рис. 25 – Реалізація фічі “Читати далі”
Ось що відкрилося при натисканні на “Show more”:
Рис. 26 – Реалізація “Читати далі”
Якщо в блоці “Коротка інформація про товар” ви не вказали дані про способи оплати та доставки, умови повернення та інші доп. послуги, то можна помістити їх в розділ “Опис”.
Часто ці параметри розміщують у вкладках розділу.
Рис. 27 – Меню з характеристиками продукту
Це були основні моменти по розміщенню опису товару. Якщо опис вашого товару займає велику частину сторінки, краще запровадити кат або зробити верхнє підміню, щоб не розтягувати сторінку.
Результативний механізм роботи блоку – текст + фото/відео клієнтів.
Призначений для користувача контент підвищує довіру відвідувачів (докладніше про UGC ми писали в статті про генерацію користувацького контенту). І не забудьте про преміювання покупців за відгуки (балами, бонусами, додатковою знижкою).
А підключення e-mail-маркетингу після здійсненої конверсії допоможе досягти більшого ефекту після покупки.
Форма відгуку містить:
Також поруч з відгуками про товар часто додають вкладку “Питання”.
Реалізація будь-яка – або 1на вкладка, або 2.
Рис. 28 – Реалізація форми відгуків
І ще один приклад блоку в інтернет-магазині:
Рис. 29 – Подвійне меню для відгуків
Обирайте ту структуру, яка краще підходить вашій тематиці.
1) Up-sell та cross-sell (допродаж)
Вигідніше збільшити середній чек постійного клієнта, ніж залучити нового.
За цю функцію відповідає динамічно підвантажуємий блок “З цим товаром купують”/”Схожі товари”/”Ви недавно переглядали”, і т. д..
Приклад допродажу (up-sell):
Рис. 30 – Приклад реалізації допродажу в картці товару
Для магазинів побутової техніки актуально запропонувати техобслуговування або встановлення приладу.
Приклад крос-продажу:
Рис. 31 – Реалізація “З цим товаром купують”
У магазинах дитячих товарів відвідувачам, як правило, пропонуються просто інші товари для дітей. Вони можуть бути навіть з іншої тематики (як це показано вище на малюнку – ви купуєте автокрісло, а замість запасних ременів-кріплень вам пропонують пеленальний столик).
Нагадування про переглянуті продукти:
Рис. 33 – Блок “Ви переглядали”
Блоки вкрай зручні – зберігається інформація про переглянуті товари, яка може знадобитися користувачам.
2) Порівняння товарів
Крім того, що це вкрай зручна функція, вона покращує UX (користувацький досвід). Актуальна для магазинів побутової, мобільної та портативної техніки.
Рис. 34 – Приклад порівняння товарів
Функція порівняння товарів – мастхев для інтернет магазинів побутової техніки. Відвідувач швидко і наочно може порівняти конфігурацію потрібних йому моделей.
3) “Список бажань”/”Вибране”
Якщо на сайті передбачена опція “Додати товар до виш-листа”, то зазвичай для посилення до неї додають email-повідомлення – нагадують користувачеві, що товар занадто довго висить у списку бажань (+ можна додати знижку на позицію та підвищити ймовірність здійснення конверсії).
Рис. 35 – Опція “Додати до вибраного”
Вішлист – ідеальний інструмент для створення списків динамічного ремаркетингу. Після перегляду карток товари будуть бігати за користувачем по всьому інтернету та нагадуватимуть про його нездійсненні бажання.
4) Телефон та графік роботи
Як правило, ці дані вказані у вкладці “Контакти” + розміщені зліва чи справа вгорі кожного вікна.
Рис. 36 – Контакти компанії на сайті
Зручно те, що вони завжди на виду – на будь-якій картці товару та категорії.
5) Кнопка зворотного дзвінка та вікно чату
Статистика сервісу ringostat.ua говорить, що підключення віджету Callback підвищує кількість дзвінків до 48%. А встановлення спливаючого чату збільшує кількість конверсій до 40% (дані дослідження ApexChat).
Рис. 37 – Віджет callback на сайті
І загальні рекомендації:
Не обов’язково включати в картку товару всі 7 пунктів. Для кожної ніші є свій оптимальний комплекс елементів.
Просто пам’ятайте, що коли користувач заходить на сторінку товару, він очікує отримати повну відповідь: назву, фото та ціну обраного продукту. Його характеристики та переваги перед подібними товарами. Відгуки реальних клієнтів та користувачів виробів.
Чим на більшу кількість запитань цільових замовників ви дасте відповідь, тим імовірніше відвідувач сторінки стане вашим клієнтом.
2 важливих бонуса для користувача: фото або відеоконтент від самих користувачів та відгуки.
Практичну частину з оптимізації картки товару в т. ч. ми описували в кейсі роботи з інтернет-магазином штор.
Перший етап формування картки товару – рекомендації UI/UX-дизайнера та SEO-фахівців.
На їх основі створюється шаблон сторінки та заповнюються розділи з інформацією про продукт.
Що важливо передбачити?
Пам’ятайте про силу UGC – відгуки реальних покупців з графічним підтвердженням.
І тестуйте макети продуктових карток – практика покаже, який варіант сторінки обирають користувачі.
Конверсійних вам карток товарів!
А якщо потрібна допомога в оптимізації інтернет-магазину, звертайтеся до наших фахівців.
Ви вже підписані на нашу розсилку!
Підтвердіть свій email для завершення підписки.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.