Блог

Правила заполнения карточек товара для интернет-магазина

14 сентября 2022 г.

Правила заполнения карточек товара для интернет-магазина #1

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

Идеальная карточка товара выполняет такие функции:

  • привлекает внимание клиента к товару;
  • вызывает желание обладать товаром;
  • отвечает на вопросы о товаре;
  • снимает возражение;
  • побуждает к покупке.

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

Формирование правильной структуры страницы

Золотого стандарта расположения элементов карточки товара не существует. Каждый магазин самостоятельно решает, какую информацию подсвечивать. Но есть привычные покупателям паттерны: сверху — название товара, слева — фото, справа — самая важная информация, цена и кнопка «Купить». Размещая любую информацию на странице, помните: пользователь читает слева направо.

Правила заполнения карточек товара для интернет-магазина #2
Пример расположения основных элементов карточки товара

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

Не забудьте добавить блок с отзывами. По данным компании Podium 93 % пользователей ориентируются на отзывы, принимая решение о покупке. Лучше всего, если в блоке с отзывами будет возможность добавить фото и видео — такие комментарии о товаре вызывают больше доверия. Стимулируйте покупателей оставлять отзывы, не пишите их сами. И всегда отвечайте на негативные комментарии.

Правила заполнения карточек товара для интернет-магазина #3
Раздел с отзывами в карточке товара

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

Правила заполнения карточек товара для интернет-магазина #4
Пример реализации кросс-продаж на странице товара

Всегда отображайте на странице просмотренные товары и добавьте блок «С этим товаром покупают». Эти блоки повышают конверсию и удерживают пользователей на вашем сайте. 

Дизайн и удобство карточки товара

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

Самые главные элементы — название товара, фото, цена и кнопка «Купить». Они должны быть самыми заметными на странице. 

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

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

Кнопки. Добавьте понятный призыв к действию на каждую кнопку на странице товара.   
Кнопка «Купить» — это легкий способ добавить товар в корзину, она будет самой заметной на странице. Сделайте кнопку «Купить в один клик» для тех, кто не хочет возиться с регистрацией и корзиной. Потенциальному покупателю понравился товар, но он не готов пока сделать заказ? Дайте ему возможность добавить товар в избранное. Если позиции нет в наличии, замените призыв к действию «Купить» текстом «Забронировать» или «Сообщить о наличии».

Правила заполнения карточек товара для интернет-магазина #5
Пример карточки товара, которого нет в наличии

Описание товара

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

Название. Это один из самых крупных элементов на странице. Добавьте в него название товара, бренд и модель. 

Правила заполнения карточек товара для интернет-магазина #6
Пример оформления названия товара

Цена. Выделяйте стоимость товара крупным жирным шрифтом. Это первое, на что смотрит пользователь, попадая на страницу товара. По данным сервиса Hubspot для 80% покупателей именно цена становится решающим фактором, когда они принимают решение о покупке. Если на товар действует акция, укажите также регулярную стоимость, но сделайте ее менее заметной, чтобы не путать покупателя.

Если товар предлагается в разных размерах или объемах, обозначьте цену для каждой позиции в одной карточке — не заставляйте пользователя ходить для этого по разным страницам.

Правила заполнения карточек товара для интернет-магазина #7
Выбор цвета и модели в карточке товара

Фото. У каждого товара должно быть несколько качественных фото с разных ракурсов. Отсутствие фото воспринимается пользователем как отсутствие товара на складе. Продаете одежду? Добавьте несколько фото на модели и без нее. Обязательно проиллюстрируйте выбор цвета и покажите товар в каждом из оттенков.

Правила заполнения карточек товара для интернет-магазина #8
Пример выбора и иллюстрации конфигураций товара 
Правила заполнения карточек товара для интернет-магазина #9
Пример выбора и иллюстрации конфигураций товара 

Добавляя фото товара, убедитесь, что они:

  • соответствуют реальности; 
  • не содержат лишних элементов и водяных знаков;
  • достаточно большого размера и высокого качества.

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

Как усилить впечатления от товара и сделать фото информативнее:

  • Дать возможность пользователю приблизить изображение и рассмотреть каждую деталь.
  • Добавить на фото пояснения об особенностях товара.
  • Загрузить фото крупным планом.
  • Показать товар в контексте — мебель в интерьере, одежду в целостном образе.
  • Если фото вертикальные, объединить их в коллаж по две штуки.
  • Добавить обзор на 360 градусов.  
     
Правила заполнения карточек товара для интернет-магазина #10
3D-обзор в карточке товара

Характеристики товара. Укажите самое важное рядом с фото — цвет, материал, преимущества или детали, которые могут привлечь пользователя. Например, в горнолыжной куртке можно сразу описать степень защиты от влаги и от ветра, а в ювелирном изделии — вид металла и вес. 

Правила заполнения карточек товара для интернет-магазина #11
Описание основных характеристик изделия на странице товара

Остальные характеристики выносите в отдельный блок, сгруппировав их по общим критериям для удобства покупателя.

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

Правила заполнения карточек товара для интернет-магазина #12
Описание условий доставки в карточке товара

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

Правила заполнения карточек товара для интернет-магазина #13
Примеры триггеров, которые стимулируют к покупке

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

Правила заполнения карточек товара для интернет-магазина #14
Инструмент для подбора размера одежды по личным параметрам на странице товара

SEO-оптимизация страницы 

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

Микроразметка по HTML. Она помогает товару правильно и красиво отображаться в поисковике. Пользователь в выдаче будет сразу видеть основную информацию о товаре — название, цену, наличие, рейтинг, отзывы. Для разметки товарных карточек используют инструмент schema.org. Проверить разметку можно с помощью сервиса Google.

Правила заполнения карточек товара для интернет-магазина #15
Так выглядит микроразметка по HTML в Гугле

Понятные URL. Сформируйте ссылки для страниц так, чтобы сразу было понятно содержимое страницы. Так покупателю будет удобнее пользоваться сайтом. Если добавить в URL ключевые слова, у страницы появится больше шансов попасть в выдачу по определенным запросам пользователей. Пример человекопонятной ссылки: /catalog/smartfon/iphone/smartfon-apple-13-pro-max-256gb-black/.

Метатеги. Пропишите Title и Description, заголовки Н1-Н6, добавив в них ключевые слова. 

Title — это название страницы, которое отображается в выдаче поисковика и на вкладке браузера. Его нужно сделать уникальным. Для этого можно добавить в заголовок название модели.

Description— это описание страницы до 250 символов. Этот текст может попадать в выдачу, поэтому лучше сделать это читабельным. Хороший Description должен включает название товара и бренда, модель, информацию о доставке, некоторые характеристики и призыв к действию. Пример: Покупайте Apple iPhone 13 Pro Max 256Gb по цене 53 000 грн. Бесплатная доставка по Киеву. Кредит под 0%. Гарантия 2 года. Заказывайте Apple iPhone 13 Pro Max 256Gb в один клик на сайте.

Н1 — это основной заголовок сайт, все Н2-Н6 — подзаголовки. В них стоит вписывать название модели товара.

Атрибуты Alt и Title для картинок. Alt — это описание изображения, которое видит пользователь, если картинка не загрузилась. Title же появляется, когда юзер наводит курсор на картинку. При корректной настройке оба атрибута позволяют повысить трафик на сайт. Делайте их лаконичными и человекопонятными, не забывая добавить ключевые слова.

Правила заполнения карточек товара для интернет-магазина #16
Пример оформления Title изображения на странице товара

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

Правила заполнения карточек товара для интернет-магазина #17
Хлебные крошки на странице товара

Короткое уникальное описание товара. Старайтесь не копировать информацию о товаре с сайта производителя, а составить собственное короткое описание. Используйте ключевые слова, но не забывайте о пользователе. Пусть написанный текст ответит на самые волнующие его вопросы и предоставит полную информацию о продукте.

Скорость открытия карточки. Чем она выше, тем больше трафика и потенциальных покупателей придет на сайт. Проверить этот показатель можно с помощью сервиса Google Page Speed.

Элементы оформления для роста конверсии

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

  • Отметки «Бестселлер», «Хит продаж» — упрощают выбор и привлекают внимание к товару
  • Акция с ограниченным сроком действия — элемент срочности с таймером обратного отсчета или датой окончания специального предложения побуждают купить товар немедленно
  • Скидка — яркая заметная иконка дисконта служит дополнительным триггером к покупке
  • Рейтинг и отзывы — социальные доказательства популярности товара, которые стимулируют клиента тоже заполучить его
  • Отметки «Заканчивается» или «Осталось мало на складе» — дефицит товара включает страх упустить его и стимулирует поторопиться с покупкой

Заключение

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

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