25 способов прокачать карточку товара в интернет-магазине на примере фудтех-проектов

25 способов прокачать карточку товара в интернет-магазине на примере фудтех-проектов

Привет, меня зовут Рябов Иван, я руковожу студией Аметон. Наша специализация – создание сайтов для фудтех-компаний. Среди клиентов: ВкусВилл, Cheese it Bakery, Cantata и другие. В статье я поделюсь 25 способами прокачки карточки товара на примере магазинов по продаже еды. Все примеры я подсмотрел на существующих сайтах как в РФ, так и за рубежом.

Статья будет полезна не только Product Owner-ам, дизайнерам и другим специалистам, работающим в фудтех-проектах, но и вообще всем, кто развивает электронную коммерцию в компании любого направления. Большинство идей из статьи можно использовать и в других отраслях.

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

Итак, поехали.

Для удобства я разбил статью на несколько частей, по блокам на карточке товара

Фотография товара

1. Показывайте фотографию товара сразу в тарелке, а не в закрытой упаковке

Фото товара в тарелке демонстрирует продукт лучше: видна структура блюда, проще оценить объём, количество ингредиентов и так далее. Всё это дает +1 к положительному решению о покупке.

<p>Оформлено правильно, “ВкусВилл”</p>

Оформлено правильно, “ВкусВилл”

<p>Оформлено не правильно, “Дикси”</p>

Оформлено не правильно, “Дикси”

2. Сделайте дополнительные фото товара видимыми

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

<p>Правильно, “Деликатеска”</p>

Правильно, “Деликатеска”

<p>Не правильно, “M2-shop”</p>

Не правильно, “M2-shop”

Информация о товаре

3. Используйте лейблы на товаре правильно

Важно, чтобы значение лейблов считывалось покупателем правильно с ходу или расшифровывались при наведении.

Хороший пример на сайте Metro Cash&amp;Carry. С момента пока я писал статью, сайт METRO уже обновился, но это не отменяет важности расшифровки ваших лейблов
Хороший пример на сайте Metro Cash&Carry. С момента пока я писал статью, сайт METRO уже обновился, но это не отменяет важности расшифровки ваших лейблов
<p>Что значит иконка “листочек” на “Органик Маркет” мне не понятно, но очень интересно</p>

Что значит иконка “листочек” на “Органик Маркет” мне не понятно, но очень интересно

4. Подсветите реальные преимущества товара на основе анализа оценок от покупателей

Всё, что вам нужно – настроить процесс получения отзывов о товаре от реальных покупателей, сделать ML-модель для их анализа и выделения ключевых преимуществ, которые упоминаются в отзывах от покупателей, затем вывести эту информацию на карточку товара. Звучит просто, да? Такой блок повышает конверсию у хороших продуктов – люди доверяют людям.

<p>Пример реализации от американского интернет-магазина SayWeee”</p>

Пример реализации от американского интернет-магазина SayWeee”

5. Внедрите рейтинги и показывайте лидеров

Чтобы подсветить преимущества товара, вы можете разработать и отобразить на карточке рейтинг. Например “топ-1 перезаказываемых йогуртов”, “топ-2 по отзывам среди товаров из раздела свежей выпечки” и так далее. Люди любят рейтинги, главное, чтобы всё было честно: надо считать и обновлять реальные данные.

<p>И снова “Weee”</p>

И снова “Weee”

6. Напишите дату производства товара, если это возможно

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

<p>интернет-магазин “Алёнка”</p>

интернет-магазин “Алёнка”

7. Дайте покупателю оставить пожелание к товару

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

<p>пример реализации на сайте “Catery”</p>

пример реализации на сайте “Catery”

8. Поставьте пометку о возможном изменении цены на весовой товар

Такое напоминание снизит количество обращений на тему “почему бананы стоят на 15 рублей дороже, чем я заказывал”?

<p>Пример реализации от “ВкусВилл”</p>

Пример реализации от “ВкусВилл”

9. Покажите, сколько раз купили ваш товар

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

<p>Реализация от “Деликатески”</p>

Реализация от “Деликатески”

10. Внедрите подписку на скидку

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

<p>Опять “Деликатеска”</p>

Опять “Деликатеска”

Блок с ценой товара

11. Покажите рядом с ценой бонусы, которые получит покупатель после покупки

Многие интернет-магазины предлагают бонусы или кешбэк при покупке, но не все явно пишут о том, сколько конкретно вернется покупателю. Согласитесь, если такая информация есть рядом с ценой, проще принять решение о покупке?

<p>Вот как сделали на сайте “У Палыча”</p>

Вот как сделали на сайте “У Палыча”

12. Расскажите о скидке рядом с ценой товара

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

<p>Пример на сайте “МясновЪ”</p>

Пример на сайте “МясновЪ”

13. Увеличьте средний чек за счёт услуг

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

<p>Отличный пример реализации на сайте “PrimeMeat”</p>

Отличный пример реализации на сайте “PrimeMeat”

14. Покажите покупателю все возможные способы поставки интересующего его товара

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

<p>Карточка товара сайта “Cantata”</p>

Карточка товара сайта “Cantata”

<p>Карточка товара с сайта “Мясницкий Ряд”</p>

Карточка товара с сайта “Мясницкий Ряд”

15. Покажите, как близко покупатель к бесплатной доставке.

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

<p>Пример реализации от “Деликатеска”</p>

Пример реализации от “Деликатеска”

16. Укажите дату, до которой действует скидка

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

<p>Пример реализации на старом сайте “Metro Cash&amp;Carry”</p>

Пример реализации на старом сайте “Metro Cash&Carry”

17. Покажите и докажите, что ваша цена на товар самая низкая

Идеальный пример на старом сайте Metro Cash&Carry. У них не только громкое заявление с “гарантией самой низкой цены” на товар, а прямо детализация по стоимости в разных магазинах.

<p>Пример реализации на старом сайте “Metro Cash&amp;Carry”</p>

Пример реализации на старом сайте “Metro Cash&Carry”

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

18. Расскажите покупателю, как хранить продукт

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

Хороший пример, как может выглядеть такой блок, можно подсмотреть на сайте TastyCoffee
Хороший пример, как может выглядеть такой блок, можно подсмотреть на сайте TastyCoffee

19. Покажите сертификаты ЕАС, если они есть. Особенно если вы продаёте продукты от небольших поставщиков

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

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

<p>Как сертификаты показаны на сайте “Ешь Деревенское”</p>

Как сертификаты показаны на сайте “Ешь Деревенское”

20. Визуализируйте вкус вашего товара

Как на карточке товара рассказать покупателю про вкус? Например сыра, вина, колбасы, кофе да, блин, даже ПО-МИ-ДО-РОВ!

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

Отличный пример визуализации вкусовых качеств продукта я нашел на сайте агрокомплекса РОСТ
Отличный пример визуализации вкусовых качеств продукта я нашел на сайте агрокомплекса РОСТ

21. Выделите КБЖУ визуально

Понятное дело, что почти на всех сайтах можно увидеть КБЖУ продукта. Но не все магазины заморачиваются над визуализацией этого блока. В дополнении можно визуально показать, какой % суточной нормы занимают микроэлементы.

Высший пилотаж был бы рядом отобразить КБЖУ в пересчёте на конечный вес продукта, не только на 100 грамм, но такого примера я не нашел. Если видели – поделитесь ссылкой в комментариях, буду благодарен.

<p>Пример с сайта “Ecomarket”</p>

Пример с сайта “Ecomarket”

22. Покажите лучший отзыв о товаре рядом с описанием/фотографией товара

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

Как определить из всех отзывов самый полезный и сделать это автоматически, без ручной модерации?

Можно попробовать взять только отзывы от покупателей, которые уже совершали покупки и оставляли отзывы к другим товарам. Выбрать самые высокие по оценке и прогнать через фильтр мата (ну а что? всякое бывает). Если в результате отзывов получится несколько – даже лучше, их можно показывать на карточке случайным образом. Если у вас есть другие идеи – буду рад прочитать их в комментариях.

Лучшая реализация, на мой взгляд, на сайте “Деликатески”. Там не только лучший отзыв, а ещё и информация о покупателе, который её оставил. Такое решение снижает возражения из серии “все отзывы купленные”.

<p>Карточка товара сайта “Деликатеска”</p>

Карточка товара сайта “Деликатеска”

23. Публикуйте отзывы о товаре от настоящих людей

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

<p>снова “Деликатеска” показывает нам, “как надо”</p>

снова “Деликатеска” показывает нам, “как надо”

24. Воспользуйтесь внешним сервисом с отзывами о товарах

Если ваши покупатели ещё не успели оставить отзывы о товаре, есть альтернатива – показать отзывы из агрегатора.

<p>Пример со старого сайта “Metro Cash&amp;Carry”</p>

Пример со старого сайта “Metro Cash&Carry”

25. Покажите количество оценок о вашем товаре с визуальной разбивкой

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

<p>Пример с сайта “Впрок”</p>

Пример с сайта “Впрок”

Хотите больше советов? Приходите в телеграм

Уже тут? Значит – дочитали. Спасибо огромное, правда. Когда начинал писать статью – планировал сделать 100+ фишек. Возможно, будет продолжение, но в следующий раз не только про карточку товара. Это моя первая статья на VC.ru, и мне важно ваше мнение о ней в комментариях, я обязательно всё прочитаю. Ну и напоминалка про мой ТГ-канал. Я веду его с сентября прошлого года, и там уже много накопилось интересного про фишки e-commerce проектов в фудтехе.

3030
23 комментария

1. Мне до пизды как выглядит их рекламная тарелка борща не имеющая отношения к реальности, мне нужно фото продукта (упаковка)
Итог:
У вкусвилла неправильно, у Дикси правильно (только ракурс поменять с нечитаемой изометрии на фронт - 2 грани)

Ненавижу когда невесовые (упакованные) товары презентуют в разборе (на доске присыпанной перчиком и тд и тп)

3

Надеюсь эту статью всё-таки не увидят маркетплейсы, потому что любители импульсивных покупок просто обнищают ахахах

Стремные фотки на карточках хоть как-то отталкивают и заставляю подумотьц головушкой

1

Ахаха да кстати

Особенно фото в отзывах, которые снимают на утюг

Очень отрезвляет!

3

Ахахах 😀😀😀 спасибо)

Лайк и подписка! ❤️

Отличная статья! КБЖУ на полный вес продукта есть в Жизньмарт