На карточку товара приходится основная часть решений о покупке. Сюда попадают из каталога, из поиска, из рекламы, с маркетплейсов и рассылок — и здесь же посетитель решает, нажать кнопку «В корзину» или закрыть вкладку. Мы разобрали десятки карточек в собственных проектах и на аудитах и собрали элементы, которые реально влияют на продажи, вместе с ошибками, которые повторяются чаще всего.
Что видит покупатель в первые секунды
Первый экран карточки — это то, что видно без прокрутки. На десктопе туда помещается заметно больше, чем на телефоне, но задача одинаковая: за пару секунд ответить на четыре вопроса посетителя. Что это за товар? Сколько стоит? Есть ли в наличии? Как купить? Если хотя бы на один вопрос нужно искать ответ, часть посетителей уходит.
Обязательный набор первого экрана: название товара, основное фото с возможностью листать галерею, цена (и старая цена при скидке), статус наличия, кнопка добавления в корзину и выбор варианта, если товар продаётся в разных размерах или цветах. Желательно — краткая информация о сроке доставки и рейтинг с количеством отзывов. Всё остальное — описание, характеристики, похожие товары — можно разместить ниже.
Частая ошибка — переполненный первый экран. Дизайнер добавляет блоки «Поделиться», «Сравнить», «В избранное», «Купить в один клик», «Узнать о снижении цены», «Задать вопрос», баннер акции и иконки преимуществ. Каждый элемент по отдельности полезен, но вместе они перетягивают внимание с главной кнопки. Мы оставляем в первом экране одно основное действие и одно-два второстепенных, остальное убираем ниже или в иконки.
Фотографии и видео
Покупатель не может потрогать товар, поэтому фотографии заменяют ему примерку и осмотр. От их качества зависит не только конверсия, но и количество возвратов: если фото не дают понять размер, фактуру или цвет, человек получает не то, что ожидал.
Минимальный набор для большинства товаров — 4–6 фотографий: общий вид на белом фоне, вид с разных сторон, крупный план деталей и материала, товар в интерьере или в использовании, фото, показывающее масштаб. Для одежды обязательны фото на модели с указанием её роста и размера. Для мебели — фото в интерьере и схема с габаритами. Для техники — разъёмы, кнопки и комплектация.
- Фото одинакового формата и пропорций, без «прыгающей» галереи.
- Зум или полноэкранный просмотр с хорошим разрешением.
- Фото каждого цветового варианта, переключающиеся при выборе цвета.
- Сжатые изображения в современных форматах — галерея не должна тормозить страницу.
- Короткое видео для товаров, где важна работа или посадка: 15–30 секунд без звука.
Отдельно о свайпе на мобильных: пользователи привыкли листать галерею пальцем, а не нажимать маленькие стрелки. Если галерея на телефоне не листается свайпом, часть людей просто не увидит второе и третье фото.
Цена, наличие и кнопка покупки
Цена должна быть самым заметным числом на странице. Если есть скидка, показываем старую цену зачёркнутой рядом и, по возможности, размер выгоды в рублях — «−1 500 ₽» воспринимается конкретнее, чем «−12%» на недорогих товарах, а процент работает лучше на дорогих. Для товаров, которые часто покупают в рассрочку, полезна строка с ежемесячным платежом.
Статус наличия — не формальность. «В наличии» без уточнений вызывает меньше доверия, чем «Осталось 3 шт.» или «На складе в Москве, отправим сегодня». Если товара нет, не прячьте карточку: покажите статус, предложите подписаться на поступление и сразу выведите похожие товары в наличии. Иначе посетитель из поиска упрётся в тупик.
Кнопка покупки — главный элемент интерфейса карточки. Она должна быть контрастной, крупной и понятной: «В корзину» или «Купить». На мобильных удобно закреплять кнопку внизу экрана, чтобы она оставалась доступной при прокрутке описания. После нажатия покупатель должен видеть явное подтверждение: изменившийся вид кнопки, счётчик в корзине или всплывающее окно с предложением перейти к оформлению.
Проверьте простую вещь: что происходит, если нажать «В корзину», не выбрав размер? В удачной реализации система подсвечивает выбор размера и подсказывает, что нужно сделать. В неудачной — выдаёт ошибку вверху страницы, которую на телефоне никто не видит, или вовсе ничего не делает.
Варианты товара и выбор параметров
Если товар продаётся в нескольких вариантах — размер, цвет, объём, комплектация, — выбор должен быть максимально наглядным. Цвета — цветными кружками или миниатюрами фото, размеры — кнопками, а не выпадающим списком. Недоступные варианты лучше показывать перечёркнутыми, чем скрывать: покупатель видит, что размер в принципе существует, и может подписаться на поступление.
При смене варианта должны меняться фото, цена, артикул и наличие — без перезагрузки страницы. Для одежды и обуви незаменима таблица размеров с понятной инструкцией, как снять мерки. Хорошо работает подсказка «маломерит на размер» на основе отзывов и возвратов: она снижает количество обменов.
Если вариантов десятки — например, у краски сотни оттенков, — нужен отдельный удобный выбор: палитра с поиском, фильтр по группам цветов, возможность увидеть оттенок крупно. Как такие задачи решаются на уровне каталога, мы описывали в статье о структуре каталога.
Описание, характеристики и доставка
Описание и характеристики — разные блоки с разными задачами. Характеристики отвечают на вопрос «подходит ли мне товар технически»: размеры, вес, материал, мощность, совместимость. Их удобнее всего показывать таблицей с группировкой — «Габариты», «Питание», «Комплектация». Описание отвечает на вопрос «зачем мне это и чем оно лучше»: для кого товар, в каких ситуациях пригодится, чем отличается от похожих.
Копировать описание производителя — плохая идея: такой же текст есть у сотни конкурентов, он ничего не добавляет и не помогает в поиске. Лучше короткий собственный текст на 500–1 500 знаков, который отвечает на типичные вопросы покупателей. Источник этих вопросов — менеджеры, которые принимают звонки, и отзывы.
Информация о доставке и оплате
Покупатель хочет знать, когда и за сколько получит товар, ещё до корзины. Блок «Доставка» прямо в карточке — один из самых недооценённых элементов. Идеальный вариант — автоматическое определение города и расчёт срока и стоимости: «Курьером завтра — 350 ₽, в пункт выдачи послезавтра — бесплатно». Как это технически устроено, рассказываем в статье о расчёте доставки на сайте.
Рядом стоит кратко указать способы оплаты и условия возврата. Фраза «Вернём деньги в течение 14 дней, если товар не подошёл» снимает часть сомнений лучше, чем отдельная страница с правилами.
Отзывы, вопросы и социальное доказательство
Отзывы — один из самых сильных факторов доверия. Покупатель охотнее верит другим покупателям, чем описанию продавца. В карточке нужно показывать средний рейтинг рядом с названием, количество отзывов и сам блок отзывов с фильтрами: по оценке, с фото, по варианту товара.
Отрицательные отзывы не стоит удалять. Карточка с одними пятёрками выглядит подозрительно, а взвешенный негативный отзыв с ответом магазина показывает, что продавец живой и решает проблемы. Хорошо работает блок «Вопросы и ответы», где покупатели спрашивают, а магазин отвечает: он закрывает возражения для следующих посетителей и даёт уникальный текст на странице.
Когда отзывов пока нет, их можно стимулировать: письмо после доставки с просьбой оценить покупку, небольшой бонус за отзыв с фото. Подставные отзывы — путь, который рано или поздно вскрывается и подрывает доверие ко всему магазину.
Типичные ошибки на карточке товара
Собрали ошибки, которые встречаем на аудитах чаще всего, и способы их исправить.
| Ошибка | Чем вредит | Как исправить |
|---|---|---|
| Цена «по запросу» на розничном товаре | Большинство посетителей уходит сравнивать к конкурентам | Показывать цену или хотя бы диапазон «от» |
| Одно маленькое фото | Недоверие, больше вопросов и возвратов | Минимум 4–6 фото с зумом |
| Характеристики сплошным текстом | Сложно найти нужный параметр | Таблица с группировкой |
| Нет информации о доставке | Покупатель уходит выяснять в корзину или к конкуренту | Блок с расчётом срока и стоимости по городу |
| Кнопка покупки теряется среди других | Снижается доля добавлений в корзину | Одна контрастная главная кнопка, закреплённая на мобильных |
| Тупик для отсутствующего товара | Потерянный трафик из поиска | Похожие товары в наличии и подписка на поступление |
Отдельно стоит сказать о скорости. Карточка с большой галереей, видео, отзывами и блоками рекомендаций легко становится самой тяжёлой страницей сайта. Ленивая загрузка изображений ниже первого экрана, сжатие фото и отложенная загрузка виджетов помогают сохранить быстрый первый экран.
Как улучшать карточку на работающем магазине
Если магазин уже работает, начинать стоит с данных. Посмотрите в аналитике, какой процент посетителей карточек добавляет товар в корзину. Для большинства ниш нормальные значения — от 5 до 15%. Если показатель ниже, проблема, скорее всего, в самой карточке. Записи сессий покажут, куда смотрят и где спотыкаются посетители, а поиск по сайту — какие слова они ищут, не находя ответа на странице.
Меняйте элементы по одному и измеряйте результат. Например, в магазине инструментов перенос блока с расчётом доставки в первый экран и добавление фото комплектации увеличили долю добавлений в корзину с 6,1 до 7,8% — без изменения цен и рекламы. Такие изменения дешевле, чем привлечение нового трафика, и эффект от них сохраняется надолго. Если карточки требуют системной переработки вместе с дизайном всего магазина, это повод задуматься о редизайне.
Главное о карточке товара
Карточка продаёт, когда быстро и честно отвечает на вопросы покупателя: что это, сколько стоит, есть ли в наличии, когда приедет и подойдёт ли мне. Фотографии заменяют возможность потрогать товар, характеристики — консультацию продавца, отзывы — совет знакомого, блок доставки — звонок менеджеру.
Держите первый экран чистым, с одной заметной кнопкой. Показывайте наличие и сроки конкретно. Пишите собственные описания, которые отвечают на реальные вопросы. Не оставляйте тупиков на отсутствующих товарах. И улучшайте карточку итеративно, опираясь на цифры, а не на вкус: каждый процент конверсии на этой странице умножается на весь трафик магазина.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
