Оставьте свои контактные данные, наш менеджер перезвонит вам.
Спасибо! Скоро с Вами свяжется наш менеджер.
Спасибо! Скоро с Вами свяжется наш менеджер.
Карточка товара - страница с детальной информацией о продукте и прочих сопутствующих услугах, которые предоставляет магазин. Товарная карта призвана привлечь внимание посетителей, убедить их остаться на сайте и совершить покупку.
Карточка товара - финальный решающий шаг пользователя в воронке продаж. В момент просмотра этой страницы человек и принимает решение о покупке. При наличии одинаковой цены, условий оплаты/доставки/возврата покупки, покупатели чаще выбирают тот магазин, в котором информация о продукте полная - т. к. она закрыла его потребность в осведомленности.
Какие вопросы пользователей решает карточка товара:
Схема осуществления повторной покупки
Правильно оформленная товарная карта - инструмент отложенных конверсий. Пользователь скорее вернется к цепляющей странице, которая запомнилась (дизайном, понятным описанием продукта, удобным сервисом).
Потребности владельцев магазинов, достижению которых способствует продуктовая карта:
С чего начинается заполнение карточки товара? С внедрения 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) “Список желаний”/”Избранное”
Если на сайте предусмотрена опция “Добавить товар в виш-лист”, то обычно для усиления к ней добавляют e-mail-уведомления — напоминают пользователю, что товар слишком долго висит в списке желаний (+ можно добавить скидку на позицию и повысить вероятность осуществления конверсии).
Рис. 35 — Опция “Добавить в избранное”
Вишлист — идеальный инструмент для создания списков динамического ремаркетинга. После просмотра карточек товары будут бегать за пользователем по всему интернету и напоминать о его неосуществленном желании.
4) Телефон и график работы
Как правило, эти данные указаны во вкладке “Контакты” + размещены слева или справа вверху каждого окна.
Рис. 36 — Контакты компании на сайте
Удобно то, что они всегда на виду — на любой карте товара и категории.
5) Кнопка обратного звонка и окно чата
Статистика сервиса ringostat.ua говорит, что подключение виджета Callback повышает количество звонков до 48%.
А установка всплывающего чата увеличивает количество конверсий до 40% (данные исследования ApexChat).
Рис. 37 — Виджет callback на сайте
И общие рекомендации:
Не обязательно включать в карту товара все 7 пунктов. Для каждой ниши есть свой оптимальный комплекс элементов.
Просто помните, что когда юзер заходит на страницу товара, он ожидает получить полный ответ: название, фото и цену выбранного продукта. Его характеристики и преимущества перед сходными товарами. Отзывы реальных клиентов и пользователей изделия.
Чем на большее количество вопросов целевых заказчиков вы дадите ответ, тем вероятнее посетитель страницы станет вашим клиентом.
2 важных бонуса для юзера: фото или видеоконтент от самих пользователей и отзывы.
Практическую часть с оптимизацией карточки товара в т. ч. мы описывали в кейсе работы с интернет-магазином штор.
Первый шаг формирования карточки товара — рекомендации UI/UX-дизайнера и SEO-специалистов.
На их основе создается шаблон страницы и заполняются разделы с информацией о продукте.
Что важно предусмотреть?
Помните про силу UGC — отзывы реальных покупателей с графическим подтверждением.
И тестируйте макеты продуктовых карт — практика покажет, какой вариант страницы выбирают пользователи.
Конверсионных вам карточек товаров!
А если нужна помощь в аудите или оптимизации интернет-магазина, обращайтесь к нашим специалистам.
Вы уже подписаны на нашу рассылку!
Подтвердите свой Email для завершения подписки.
Спасибо! Скоро с Вами свяжется наш менеджер.