Оставьте заявку!
Заполните контактные данные, мы свяжемся с вами, обсудим ваш проект и задачи.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
разработка

Идеальная карточка товара для интернет-магазина: фишки для повышения конверсии и SEO-оптимизации

Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Правильная карточка товара интернет-магазина - KISLOROD
Хотите запустить удобный и правильный с точки зрения интерфейса интернет-магазин? Или увеличить прибыльность уже работающего ресурса, выжав максимум из карточек товаров?
Мы подготовили исчерпывающее руководство о заполнении карточек товаров для интернет-магазина. Расскажем, какой должна быть карточка товара — о ее обязательных и дополнительных элементах, SEO-оптимизации и адаптации под смартфоны. Поделимся работающими фишками для повышения конверсии.

Назначение карточки товара

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

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

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

Правильная карточка товара — это пропуск в ТОП поисковой выдачи и залог высокой конверсии. Сопровождайте каждое нововведение A/Б-тестами, чтобы понимать, как изменения повлияли на продажи.

Правильная карточка товара: необходимые элементы

1. Название продукта

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

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

Указание бренда в заголовке даст возможность сыграть на его известности, особенно когда бренд проводит рекламную кампанию в СМИ.
Правильное заполнение названия товара в карточке товара - KISLOROD
ФИШКА: создайте шаблон названия

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

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

[Категория товара] — [бренд (линейка)] — [модель (нюансы)] — [опциональные параметры].
Например: Увлажняющий крем от Christina для сухой кожи лица с морковным маслом, коллагеном и эластином (50 мл).

2. Изображения товара

В интернет-магазине нельзя пощупать или понюхать товар, на него можно только посмотреть. Поэтому нужно максимально воздействовать на зрение.

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

3. Наличие товара

Отображайте наличие продукта на складе в карточке товара. Уверенность, что конкретный продукт готов к отправке побуждает к покупке.
Оформление блока о наличии товара в карточке товара - KISLOROD
ФИШКА: не теряйте покупателя, если товара нет в наличии

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

  • если товар недоступен временно — внедрите возможность предварительного заказа. Измените текст на кнопке: вместо «Купить» используйте «Предварительный заказ» или «Сообщить о появлении товара». Когда товар появится, покупатель и менеджер получат уведомления. Если покупка еще будет интересна, покупатель ее совершит.
  • если модель устарела и появилась новая версия — добавьте ссылку на нее в карточке товара. Высока вероятность, что посетитель проявит интерес.
  • если модель устарела и больше не выпускается — добавьте ссылку на аналоги.

4. Стоимость товара

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

5. Торговые предложения и группировка товаров

Если один товар представлен в разных цветах, размерах, объемах, можно не создавать отдельные карточки для каждой вариации товара, а сгруппировать их и использовать выпадающие списки.
Продающая карточка товара с блоком торговых предложений - KISLOROD
Ассортимент цветов желательно отобразить на фотографиях — при изменении цвета в списке, пользователь должен увидеть соответствующую картинку. Одна и та же вещь может совершенно по разному выглядеть в разном цвете — это очень важно для визуалов. С размерами и объемами проще — на картинках трудно понять отличия баночки в 50 или 100 мл, поэтому можно не фотографировать весь ассортимент.

Выбор цвета и размера может осуществляться и с помощью боксов — но они занимают больше места и сдвигают кнопку «Купить» вниз. Кроме того, список всегда будет занимать одно и то же место в карточке товара, независимо от количества размеров. Вы оцените это преимущество при разработке шаблона карточки.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Еще один недостаток боксов — негибкость шаблонов. У разных товаров разное количество размеров. Если разработать шаблон на 8 размеров, а у продукта их будет 4, то на странице останется пространство. Это не эстетично, а наша цель — красивая карточка товара.
ФИШКА: группируйте с осторожностью

Группировать или не группировать? Решение должно быть принято с учетом особенностей целевой аудитории. Смело можно группировать мало отличающиеся визуально мерные товары — с разной длиной и объемом. Осторожнее нужно группировать товары по цвету — из-за особенностей восприятия визуалов.

Еще один неочевидный факт: если в каталоге мало товаров — покупают хуже. У людей есть потребность в наличии большого выбора — даже если нужна всего одна вещь. Если после группировки остается мало товаров — лучше не группировать.

6. Таблица соответствий размеров (для fashion)

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

Не вынуждайте покупателя и скачивать документ — это препятствие к покупке, которое тоже негативно скажется на конверсии.

Пример грамотной реализации таблицы размеров — Wildberries.ru. Таблица не уводит на другую страницу, после закрытия окна покупатель снова видит правильную карточку товара в интернет-магазине:
Фото выбора размера в красивой карточке товара - KISLOROD
Важный нюанс — таблица размеров должна соответствовать продукту — идеально, когда таблицы имеют не только товары для женщин, мужчин и детей, но и товары разных подкатегорий. Например, если в карточке товара — брюки, то показываются только возможные размеры брюк.

7. Артикул товара

Зачем потенциальному покупателю знать артикул товара? Многие любят посещать реальные магазины, осматривать и примерять вещи, консультироваться с продавцами и… заказывать в интернет-магазине, потому что там дешевле. Артикул поможет посетителю быстрее найти приглянувшийся товар.

8. Условия гарантии, возврат

Информацию о доставке лучше указать прямо в карточке товара. Упрощайте клиенту жизнь и путь к покупке.

ФИШКА: внедрите модуль расчета доставки

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

10. Комплекты. Дополните образ (для fashion)

Когда человек уже настроен покупать, не сложно подтолкнуть его к дополнительной покупке. Вещь сама по себе не может быть модной или немодной, модным или немодным может быть образ. Сформируйте комплекты гармонирующих вещей и предложите клиенту, который решил приобрести одну из вещей образа, дополнить его.
Оформление блока с товарами Дополнить образ - KISLOROD
ФИШКА: размещайте составляющие образа в карточке

Не уводите клиента с карточки товара, реализуйте возможность видеть составляющие комплекта сразу. Где они будут отображаться — зависит от дизайна. Разрабатывая концепт для Gloria Jeans, мы добавили товары, в которые одета модель, в правый сайдбар и реализовали возможность добавить весь образ в корзину одним кликом. Это экономит время клиента и увеличивает средний чек.
Скидки на другие составляющие комплекта давать не обязательно, готовый образ сам по себе ценен. Но если все-таки решите давать скидку, показывайте размер экономии.

Создавать комплекты можно не только для fashion — никто не мешает предлагать полезные дополнения к основному товару. Например, если человек покупает посудомоечную машину, можно предложить средства для посудомоечных машин. Если человек заказывает порошок, можно предложить кондиционер.

11. Кнопка призыва к действию

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

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

Как определить, какой призыв добавить на кнопку — «Купить» или «Добавить в корзину»?

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

12. Описание деталей продукта

Потребитель хочет получить максимум информации о продукте. Состав и характеристики товара (вес, размер, инструкции и т.д.) должны быть отражены в карточке товара, а не в отдельном документе.
Дизайн блока характеристик в интернет-магазине - KISLOROD

13. Рейтинг товара и отзывы

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

14. С этим товаром также покупают

Почему бы не попробовать увеличить чек, отобразив товары, которые купили другие посетители, вместе с интересующим клиента продуктом? Вероятность, что покупателя что-то заинтересует высока, поэтому рекомендуем не игнорировать эту возможность при оформлении карточки товара.
Создание блока с этим товаром покупают - KISLOROD

Продающая карточка товара: дополнительные элементы

1. Рич-контент

Почему бы не попробовать увеличить чек, отобразив товары, которые купили другие посетители, вместе с интересующим клиента продуктом? Вероятность, что покупателя что-то заинтересует высока, поэтому рекомендуем не игнорировать эту возможность при оформлении карточки товара.
Пример рич-контента в идеальной карточке товара - KISLOROD
Товар, который красиво «упакован», продается лучше аналога, о котором мало что известно.

Чем цепляет рич-контент:

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

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

2. Ментальные триггеры

Ментальный триггер — импульс, который побуждает человека принять нужное решение, выполнить действие. Один из важнейших для онлайн-продаж триггеров — доверие. Чтобы его заслужить, можно использовать следующие принципы:
Ментальный триггер — импульс, который побуждает человека принять нужное решение, выполнить действие. Один из важнейших для онлайн-продаж триггеров — доверие. Чтобы его заслужить, можно использовать следующие принципы:

  1. принцип авторитета — доверяют экспертам, значит в рекламе стоит опираться на авторитет блогеров, дизайнеров, известных людей.
  2. принцип взаимности — если вы помогли человеку, дали ему что-то полезное, то он вряд ли откажет вам.
  3. принцип симпатии — если дизайн магазина и фотографии товара приятны пользователю, то шансы на покупку выше.
  4. принцип социального доказательства — если товар покупают другие, создан ажиотаж, то само собой всплывает решение «надо брать».
  5. принцип дефицита — страх упустить возможность обладать товаром стимулирует поторопиться с покупкой.
Вот как выглядит идеальная карточка товара с использованием ментальных триггеров:
Идеальная карточка товара с использованием ментальных триггеров - KISLOROD

3. Вопросы и комментарии

Дайте пользователям возможность писать комментарии о товаре в карточке. Будьте готовы, что посетители будут задавать вопросы. Это дополнительная возможность получить обратную связь и лучше понять потребности целевой аудитории.
Блок вопросы и ответы в карточке - KISLOROD
Важно отслеживать комментарии пользователей и отвечать на них. Ответы могут положительно влиять на продажи. «Продавать» могут и отзывы других покупателей в комментариях.

SEO-оптимизация карточки товара

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

1. Микроразметка Product

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

Вот как выглядит сниппет с микроразметкой в поисковой выдаче:
Микроразметка товаров - KISLOROD
Микроразметка schema.org подходит и для Google, и для Яндекс.

Привлекательный сниппет увеличивает кликабельность, поэтому о микроразметке лучше позаботиться на самых ранних этапах SEO-оптимизации.
Стоит указать следующие данные:

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

Адекватность отображения микроразметки можно проверить с помощью сервиса Google.

2. Мета-теги и название товара

Title (название страницы). Отображается в поисковой выдаче и на вкладке браузера. В Title должен входить ключ — обычно это название товара. Также в него может входить бренд производителя, номер модели, локация, важные характеристики и коммерческие вхождения — цена, купить.
Title должен быть уникальным — дубли плохо влияют на продвижение. Сделать Title уникальным легко, если каждый раз добавлять в заголовок номер модели.
Универсальный шаблон для Title можно представить так:

[Название товара] — [производитель] — [номер модели] — [характеристики] — [артикул].
Description (описание страницы). Описание не должно повторять заголовок, призвано расширять его. Максимальная длина — 250 символов. Иногда Description участвует в формировании сниппета.

В Description стоит включить название товара, бренд, номер модели, характеристики, информацию о доставке и гарантиях, CTA, спецсимволы.
Для создания Description тоже можно составить шаблон. Например:

Предлагаем [название товара] [бренд] по цене от __ до __ руб. Бесплатная доставка в [город]. Полный ассортимент товаров на сайте. Закажите [название товара] прямо сейчас по телефону [телефон].
Заголовки Н1-Н6. Заголовок Н1 — главный заголовок текста, Н2-Н6 — подзаголовки. В них стоит вписывать название товара.

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

3. Хлебные крошки

Хлебные крошки — навигационная цепочка страниц, которые прошел пользователь от главной до текущей страницы.

Почему нужно использовать этот элемент:

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

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

Особенности карточки товара на смартфоне

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

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

Позаботьтесь о простоте работы с фильтрами и сортировкой товаров.

Зумировать и листать товары приятнее привычными жестами — реализуйте возможность использовать свайп.

В заключение

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

Еще раз напоминаем о необходимости А/Б тестирования при внедрении новых элементов. Заполнять карточки товаров интернет магазинов бессистемно — неудачная стратегия. Тестирование — основа системной и успешной работы над повышением конверсии интернет-магазина.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи