10
лет в электронной коммерции
8 800 3020 886
ГлавнаяБлогИдеальная карточка товара: 12 обязательных элементов и правила для мобильных устройств

Идеальная карточка товара: 12 обязательных элементов и правила для мобильных устройств

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

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

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

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

1. Заголовок с названием товара

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

Дизайном предусмотрите достаточно крупный блок для названия, чтобы даже длинный заголовок корректно отображался. Это необходимо, так как часто требуется поместить в заголовок много информации: название, бренд, модель, размер, цвет и тому подобное. Во-первых, чем более детальная информация в заголовке, тем проще найти товар через поиск на сайте. Во-вторых, покупателю не придется искать важную информацию — все есть в заголовке. В-третьих, указание бренда позволит сыграть на его популярности, особенно когда он проводит рекламную кампанию в СМИ.

Например, хорошие заголовки в интернет-магазине «Сотовик-М»: есть упоминание популярного бренда и отличительных особенностей товара. Заголовок крупный и заметный на странице.

Заголовок карточки товара в магазине Сотовик-М

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

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

У покупателя должна быть возможность рассмотреть товар:

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

Чтобы это сделать, есть несколько вариантов: добавить детализированные фото товара, возможность зуммировать изображения, настроить просмотр на 360 градусов, добавить фотографии товара «в деле» (например, фотографии одежды на модели, кухонных принадлежностей в интерьере, продуктов в сервировке стола и тому подобное).

Вот такую фотография своих конфет разместил экомагазин Humble Market: 

Фотографии товара в магазине Humble Market

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

В CS-Cart по умолчанию можно добавлять несколько изображений к товару, каждое из которых покупатель сможет приближать. Если двухмерных изображений недостаточно, можно установить модуль «Просмотр товара на 360 градусов» и вывести карточку товара на новый уровень детализации.

3. Наличие в магазине

На карточке товара обязательно надо проинформировать покупателя о наличии товара на складе. Так покупатель будет уверен, что ему не придется долго ждать поставки. 

Например, интернет-магазин Humble Market, упомянутый выше, просто информирует покупателей, что товар есть в наличии:

Наличие товара в магазине Humble Market

Более продвинутый вариант у Ozon: указано количество товара на складе и есть предупреждение об ограниченности предложения: 

Наличие товара в магазине Озон

Что делать, если товара нет в наличии, и вы не хотите из-за этого упустить покупателя? 

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

Для CS-Cart есть модуль «Пользовательские статусы наличия товаров»: можно настроить любой текст для информирования покупателей о статусе товара. 

4. Скидки и акции

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

Цена в магазине Вега
Интернет-магазин «Вега»

Недавно мы запустили новый модуль «История стоимости товара», который позволяет повысить доверие к магазину и увеличить базу подписчиков как раз за счет того, что выводит на карточку товара график изменения цены:  

История изменения цены

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

Если покупатель не готов покупать товар прямо сейчас, он может подписаться на снижение цены определенного товара и получать уведомления на e-mail.

5. Выбор опций 

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

Опции в магазине Спортмастер
Интернет-магазин «Спортмастер»

Но есть одно важное уточнение. Рассмотрим его на примере магазина одежды, где  одна модель может быть представлена в разных цветах. Если оставить только одну карточку товара с блоком выбора цвета, то покупатель, просматривая каталог, может подумать, что нужного цвета нет или что ассортимент скудный. Так что лучшим решением будет оставить в каталоге карточки товаров на каждый цвет, а на страницу каждого товара добавить блок выбора цвета или блок «Посмотрите в другом цвете». 

Преимущества этого способа:

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

Вот как это реализовано в интернет-магазине Wildberries, раздел «Женские платья».

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

Каталог в магазине Wildberries

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

Выбор доступных цветов в магазине Wildberries

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

6. Таблица размеров 

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

На примере Wildberries.ru посмотрим, как должна выглядеть грамотная таблица размеров. Ее легко найти, она не уводит на другую страницу. Свой размер можно выбрать, не закрывая ее:

Таблица размеров в Wildberries

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

7. Условия 

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

Условия доставки и гарантии в магазине Озон
Интернет-магазин Ozon

Клиент хочет знать не только о сроках доставки, но и о ее стоимости. Чтобы не рисковать тем, что покупатель не вернется после посещения сайта почтовых и курьерских служб, лучше всего сразу внедрить калькулятор расчета доставки. Это увеличит вероятность заказа. Для CS-Cart хорошо подходит модуль «Расчет стоимости доставки»: на детальной странице товара появится кнопка, после нажатия на которую откроется окно с доступными вариантами доставки, сроками и стоимостью: 

Расчет стоимости доставки для CS-Cart

8. Дополнительные блоки

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

Вот пара примеров:

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

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

Например, вот как это сделано на Loverepublic.ru:

Лукбук в Loverepublic со страницы товара

На карточке товара есть блок с образами, при нажатии открывается окно с описанием образа и чем можно дополнить выбранный товар: 

Лукбук в Loverepublic

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

Если у вас интернет-магазин на CS-Cart, с помощью модуля «Лукбук» можно составлять не только образы для интернет-магазинов одежды, но и комплекты товаров для любой другой сферы: например, предложить вместе мобильный телефон и гарнитуру, посудомоечную машину и подходящее средство для мытья посуды. 

9. Кнопка «купить» 

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

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

СТА в Аddidas
Так расположил кнопку «Добавить в корзину» интернет-магазин Adiddas.

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

10. Детальное описание или характеристики

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

Детальные характеристики товара в DNS
Интернет-магазин DNS

11. Рейтинги и отзывы

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

На Ozon.ru к каждому товару идет блок с рейтингом и отзывами. Можно убедиться, что товар нравится тем, кто его приобрел. 

Рейтинги в магазине Озон

12. Обратная связь

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

Например, активно разделом «Вопрос / ответ» пользуются покупатели интернет-магазина DNS: уточняют комплектацию, задают вопросы о программном обеспечении для компьютеров. Консультанты в ответ не только делятся полезной информацией, но прикрепляют ссылки на другие товары интернет-магазина, стимулируя продажи.

Обратная связь в магазине DNS

Мобильная версия карточки товара: основные правила

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

Первый вариант — использовать адаптивную верстку, как в платформе CS-Cart (и в модулях для CS-Cart). Это означает, что размеры страниц, в том числе карточка товара, автоматически подстраиваются под экран устройства, с которого заходит посетитель. Функциональность и юзабилити при этом не страдает. 

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

Какой бы вариант вы ни выбрали, следует придерживаться нескольких правил, чтобы не терять покупателей с мобильных устройств: 

  1. Не жертвуйте информацией о товаре. Если покупатель не найдет на карточке товара важной информации, он уйдет в тот интернет-магазин, где ее легко найти. Поэтому даже для такого ограниченного пространства, как экран мобильного телефона, надо сохранить основные элементы: размеры и вариации товара, цвета, фотографии, подробное описание, наличие на складе, сроки доставки. 
  2. Проверьте, чтобы фильтрами и сортировкой товаров было удобно пользоваться даже через небольшой экран. С телефона не всегда удобно вводить данные, поэтому полезно добавить автозаполнение или чек-боксы для выбора характеристик. Тогда пользователь сможет пользоваться интернет-магазином даже на ходу и когда торопится. 
  3. Добавьте возможность свайпать. Покупатель привык к этому при работе со смартфоном, поэтому если и в интернет-магазине он сможет пользоваться привычными жестами — будет намного удобнее.

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

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

Получите консультацию специалиста по вашему проекту

  • Содержание
Команда Cart-Power
Все статьи автора
Чек-лист будет отправлен на указанный Вами e-mail
Пожалуйста, заполните форму