Карточка товара – своеобразный мини-лендинг. Она решает те же задачи: рассказывает потенциальному покупателю о продукте и подводит его к заказу.
Чтобы выполнять свою функцию, карточка товара должна:
- Отвечать на вопрос покупателя «Зачем мне это?»
- Фокусировать внимание на товаре.
- Закрывать возражения.
- Делать процесс покупки простым, быстрым и понятным.
- Удерживать покупателя на сайте.
- Помогать с выбором.
Все это нужно учитывать, продумывая структуру и внешний вид страницы. Наш список поможет выбрать элементы, подходящие для вашей ниши, и не упустить важные детали.
Название товара
Называйте товары в карточке четко, емко и понятно для потребителя. Между простыми общеупотребительными словами и сложными профессиональными терминами выбирайте первые. Исключение: ваши клиенты – профессионалы, которые точно поймут эти термины.

Если товар активно ищут в интернете, стоит учитывать также поисковые запросы, чтобы не терять трафик с Яндекса/Google.
Часто в название целесообразно включить ключевую информацию о товаре: наименование бренда, марку, модель и важные технические характеристики. Если в каталоге несколько одинаковых товаров, отличающихся одним параметром, можно указать его для удобства покупателей.
Изображения и видео
Главное изображение товара должно быть в большом разрешении и хорошем качестве, на светлом или контрастном фоне. Позаботьтесь, чтобы покупателю было хорошо видно все важные детали. Для этого удобно использовать увеличение при наведении.
Если товар слишком большой, можно добавить одну общую фотографию и несколько изображений с отдельными частями. Галереи часто используют, чтобы показать продукт с разных сторон и в разных ситуациях.

В формате видео удобно добавлять к карточке обзоры товаров или показывать их в действии. Это работает не только на сайтах, но и при продвижении товаров на Wildberries, OZON, Яндекс.Маркете.
Цена
Тут все понятно – мало кто будет заказывать товар в интернет-магазине, не зная, сколько он стоит ;-) Цену лучше выделить крупным и/или контрастным шрифтом, разместить рядом с кнопкой CTA (call-to-action – призыв к действию).

Описание
Описание в карточках товаров частенько пишут в угоду требованиям SEO-специалиста, который работает на проекте. Это нормально, если требования адекватные и соответствуют рекомендациям поисковых систем.
Однако не стоит забывать о пользе для покупателя. Описание должно четко отвечать на вопрос «Зачем мне это?», раскрывать важные особенности и/или сценарии использования товара.

Характеристики
Вписывать параметры и характеристики товара в абзацы описания не стоит – это неудобно для посетителя. Позаботьтесь о нем и выведите все важное в наглядную и простую для восприятия таблицу.

Если это возможно, добавьте к цифрам и обозначениям пояснения на языке потребителя. Например, мне не совсем понятна характеристика «Оперативная память 16 Гб», поэтому в карточках ноутбуков было бы весьма кстати пояснение «Быстро работает даже с 20 открытыми вкладками в браузере».
Преимущества
Делать отдельный блок преимуществ для каждого товара в каталоге на тысячи позиций – нецелесообразно с точки зрения временных затрат. Однако отразить в карточке преимущества покупки именно в вашем магазине бывает полезно.

Кнопка с призывом к действию
Стандартные для интернет-магазинов призывы к действию – «Добавить в корзину» и «Купить».
Думаю, никому уже не надо напоминать, что CTA-кнопка должна быть яркой, крупной, заметной и на первом экране. Иногда в качестве альтернативного действия добавляют кнопку «Купить в один клик» – чуть менее яркую и заметную.

Информация о наличии
О том, что товара нет в наличии, лучше сообщить клиенту до того, как он начнет оформлять заказ.
Некоторые магазины ограничиваются меткой «нет на складе» для отсутствующих товаров, другие указывают наличие для всех, третьи – прописывают, сколько штук есть в каждом городе, районе или торговой точке.

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

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

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

Способы оплаты
Как и с доставкой – размещать подробное описание способов оплаты в карточке не нужно. Обозначьте популярные способы и дайте ссылку на страницу с полной информацией. Так вы снимете еще одно возражение.

Гарантии
Гарантии повышают доверие потенциальных клиентов. Подумайте, что вы можете гарантировать покупателю.
Это зависит от ожиданий и опасений целевой аудитории, конкретных товаров и ваших возможностей. Так «М.Видео» гарантирует лучшую цену и обмен «без проблем» в течение 30 дней.

Не путайте гарантии, которые вы даете покупателю, с гарантией производителя. И то, и другое важно и работает на доверие, но последнее от вас не зависит.
Условия возврата
Гарантированные покупателю условия возврата прописаны в законе «О защите прав потребителей». Однако не все его знают и соблюдают.
Лучше не заставляйте человека гадать – а не придется ли ему потом 2 месяца с вами судиться. Сразу четко обозначьте, при каких условиях деньги можно вернуть. Особенно это касается дорогих покупок.

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



Покупатель сразу видит выгоду, и это влияет на решение о покупке
Маркетинговые метки
Этот элемент призван привлечь внимание покупателей к отдельным товарам в каталоге. Однако в карточке тоже не будут лишними метки «Бестселлер», «Новинка», «Хит продаж» и другие.

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

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

Рекомендации
Блоки «Рекомендуем» или «С этим товаров также покупают» задерживают посетителя на сайте и увеличивают средний чек.
Если человеку подходит этот конкретный товар, в таких блоках он может присмотреть что-то еще. Если нет – найти подходящий продукт.

Недавно просмотренные товары
Блок «Вы только что посмотрели» не дает покупателям забыть, зачем они вообще пришли. Он обеспечивает быстрый переход к интересующим товарам, тем самым повышая вероятность покупки.

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

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

Отзывы
Покупателям важно знать, что о товаре думают те, кто им уже пользовался. Особенно это касается неопытных пользователей, которые покупают что-то в первый раз.
При этом все мы понимаем, что идеала не бывает. Поэтому в отзывах ищем не хвалебные оды магазину/производителю, а нюансы и детали, о которых хотелось бы знать заранее. То, что один покупатель посчитал недостатком, для второго может не иметь такого значения.
Хороший пример: техника и электроника. Одним пользователям важны мощная видеокарта и профессиональный звук. Для других – главное, чтобы надолго заряда хватало.

Не стоит писать отзывы самому или заказывать их, чтобы были. Это всегда заметно и не приносит пользы ни покупателям, ни магазину.
Сравнение с другими товарами
Возможность выбрать несколько товаров и сравнить их характеристики – это удобно. Особенно для товаров, у которых много технических нюансов: компьютеров, смартфонов, телевизоров и т. д.

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

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