Шаблон карточки товара: как создать правильную карточку товара? 

Эффективная карточка товара — это «продавец-консультант» вашего интернет-магазина. Она содержит ответы на все ключевые вопросы клиента по товару и помогает совершить покупку.

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

Стоит отметить, что у разных сфер бизнеса показатель «нормы» для конверсии будет отличаться, поэтому дополнительно нужно рассматривать показатель отказов. Но, как правило, здесь всё просто — чем меньше отказов, тем лучше.

Что в карточке товара ещё может повлиять на отказ пользователя от покупки и снижение конверсии?

• Обязательная регистрация на сайте, особенно если она предполагает множество обязательных полей для заполнения, а не быструю возможность входа через почтовый аккаунт или соцсеть.
• Долгая и неудобная доставка товара либо же отсутствие адреса пользователя в зонах доставки.
• Отдельно рассчитываемая и заранее неизвестная стоимость доставки либо же отсутствие условий по снижению цены, например покупка от какой-либо стоимости. Если цена доставки превышает стоимость товара, логично, что его не приобретут.
• Отсутствие условий доставки, оплаты и возврата либо их сложное расположение. Лучшее решение – сделать небольшой блок с этой информацией или ссылку с переходом на соответствующую страницу. Что еще важно учесть — информация должна быть понятной.
• Сюда же относим и сам факт возврата товара – возможно ли это вообще? При каких условиях? В течение какого времени? Что для этого нужно предпринять? И если сделать это будет сложно, то пользователь может передумать совершать покупку.
• Сложный и долгий процесс оформления заказа утомляет пользователя – продумайте интерфейс таким образом, чтобы максимально облегчить и упростить процесс.

Почему это актуально как никогда?

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

Какие цели выполняет карточка товара?

• Побуждает к покупке
• Привлекает внимание
• Дает максимально полную и точную информацию о товаре
• Закрывает вопросы покупателя и возможные возражения

Так что же необходимо сделать, чтобы карточка товара стала идеальной, а конверсия увеличилась? Рассказываем.

4 аспекта идеальной карточки товара

1. SEO

Мы уже не раз рассказывали о различных этапах и сферах применения методов SEO-продвижения на сайте. Здесь данный аспект не будет исключением, наоборот — стоит уделить этому максимум внимания. Ниже перечислены пункты, которые должны быть соблюдены.

Наименование:

• Страница содержит тег h1, где указано наименование товара.
• Не забывайте о длинных и полных названиях и не бойтесь их.
• Лого бренда в карточке товара – это хорошо, но и текстовое название также не мешает добавить.
• Укажите краткую и одну из определяющих характеристик: если это крем, то он может быть увлажняющим или питательным, если телефон, необходимо указать объем памяти.

Фотографии:

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

Краткое описание:

Важная для индексации часть текста в карточке товара или в категориях. Нужно указать наиболее значимые данные по товару.

Подробное описание:

• Пропишите максимально подробно всю необходимую информацию товара, можно частично взять данные из характеристик и добавить к описанию.
• Текст должен быть уникальным
• Добавьте заголовки h2
• Если произошло так, что текст повторяется, так как компания-поставщик предоставляет один текст-описание, добавьте либо дополнительную информацию, либо продублируйте описание товара.

Характеристики:

• Сгруппируйте данные в табличный вид
• Заголовки также необходимо проставить
• Соблюдайте удобство для пользователя: слева характеристика, а напротив значение

Стоимость:

• Указывайте актуальную стоимость товара
• Валюта должна указываться по местоположению пользователя
• Если товар под заказ и его стоимость зависит от характеристик, комплектации и так далее — пропишите цены от какой-то определенной суммы

Оптимизация:

• Микроразметка JSON-LD и Schema.org
• Протокол Open Graph — собственно, это определение и внешний вид ссылок при расшаривании для соцсетей и мессенджеров, а также рекомендуем подправить непонятный текст и прописать для картинки анонс и читабельное название. О других видах семантической разметки написано тут.

Это лишь часть важных SEO-параметров – в карточку товара входит куда больше аспектов, но в остальном, все правила точно такие же, как и для всего сайта.

2. Контент

Для карточки товара оптимизированный текст важен не меньше, чем текст, размещаемый на страницах сайта. Основные правила:

• Проведите подбор ключевых фраз для карточки товара
• Текст разрабатывается с учетом подобранных ключевых фраз.
• Текста должно быть достаточно. Но при этом не нужно писать научную диссертацию — это чревато санкциями от поисковых систем. Правда есть случаи, когда специфика товара обязывает писать много и подробно. В таком случае сделайте текст максимально полезным, лишенным воды и содержащим списки и/или таблицы.
• Укажите title, description для карточки, название товара должно быть с тегом h1

Более подробно о составлении текстов для карточек товара с заботой о покупательских глазах и нервах мы написали здесь. Это стоит того, чтобы прочесть. :)

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

3. UX-прототипирование и Дизайн

Сначала немного цифр:

И вот еще одна очень занимательная инфографика:

Обязательные элементы карточки товара:

Об элементах и правильном оформлении карточки товара мы рассказывали вот тут, настоятельно рекомендую ознакомиться – очень полезная статья!

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

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

4. Техническая работа элементов

От технической работы специалистов зависит, случится ли покупка и вернётся ли пользователь на сайт. Подсказки, кнопки целевого действия, возможность покупки товара в 1 клик, уведомления пользователя о том, что заказ совершен – все взаимодействия потенциального клиента должны иметь обратную связь. Что для этого нужно?

• Ховеры. Обязательно следите, чтобы все активные элементы подсвечивались или меняли свой цвет при наведении на них мышкой – это показатель возможности взаимодействия
• Уведомления о совершенных действиях. К примеру, если пользователь добавляет товар в список желаемого, должно всплыть уведомление, что товар был действительно добавлен – не оставляйте пользователя без информации
• Адаптивность карточки. Адаптивная вёрстка для всех популярных устройств и разрешений – настоящий must have, так как сейчас большая доля трафика приходится на мобильные устройства
• Правильная работа модулей и виджетов – тщательно следите за тем, чтобы все установленные дополнения работали корректно. Это же относится и к платежным системам.
• Подсказки. Добавьте иконку с вопросиком в тех местах, где пользователю может понадобиться помощь. При наведении или клике должно всплывать сообщение с объяснениями, иначе если пользователю будет непонятно, он попросту уйдет.
• Фокусы на элементе. Они необходимы, чтобы пользователь мог взаимодействовать с сайтом с помощью клавиатуры
• Возможность переключения товаров с разными характеристиками. Иначе говоря, это объединение одинаковых групп товаров, которые отличаются друг от друга такими свойствами, как цвет или размер
• Увеличение изображения товара. Удобство для пользователя, возможность детального рассмотрения. Сюда относится как увеличение изображения из миниатюры, так и так называемая «лупа». Будет плюсом, если вы добавите обзор на 360 градусов.
• Оптимизация изображений. Необходима для того, чтобы изображения товара отображались корректно, меньше весили, а значит, быстрее грузились. Также это благоприятно влияет не только на пользователей, но и на поисковые системы.

Следите за тем, чтобы всё работало, как часы – благодаря этому конверсия продаж увеличится.

Пример идеальной карточки товара

Покажу вам интересную и яркую карточку товара, которая может послужить образцом:

В чем преимущества такой карточки товара?

• Удобная структура карточки товара и её минимализм — качественно выделены именно те элементы, на которые и следует обратить внимание, а все блоки логично расположены
• Отдельный плюс за версию для слабовидящих людей
• Блок доставки расположен сразу, но при этом не перетягивает внимание на себя — очень удобно и сразу же понятно, что есть разные способы доставки, а также фильтрация ассортимента по местоположению
• Безумно крутая боковая корзина (при желании ее можно скрыть), в которой можно посмотреть, что вы уже взяли, поэтому лишних действий и переходов с карточки товара не будет
• Блок с информацией о товаре: тут и удобная иконка о размере скидки на товар, и бонусные рубли, и выгодно выделяющаяся новая стоимость товара, все нужные кнопки под рукой, такие как корзина, избранное. Также есть информация о доставке конкретно этого товара.
• Фотографии отменного качества, даже имеется инструкция по применению. Это крутое преимущество, если пользователь торопится, а вся нужная информация уже есть в первом экране

Вместо вывода

Карточка товара – это немой продавец, который будет куда говорливее многих менеджеров. :) Из карточки товара пользователь должен получить максимум полезной информации, чтобы принять решение: покупать товар или нет.

Если вы хотите разработать функциональную и удобную карточку товара или решили апгрейдить ту, которая уже есть, напишите нам — мы будем рады помочь и сделать всё в лучшем виде :)