Анатомия карточки товара, которая продаёт

Карточка товара — это не описание, а машина принятия решения. Её задача — довести человека от вопроса «то ли это, что мне нужно» до кнопки, ни разу не заставив уходить искать ответ на стороне. Устроена она из слоёв, и порядок слоёв определяет, дойдёт ли человек до конца.

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

Первый экран: узнавание

Верх карточки отвечает на один вопрос — «я туда попал?».

• Название. Точное, с ключевым отличием: размер, объём, возраст, модель.
• Главная фотография. Товар целиком, без обрезки, на фоне, который не спорит с товаром.
• Цена. Видна без прокрутки.
• Состояние. Есть в наличии, под заказ, нет — одним словом, а не иконкой без подписи.

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

Второй слой: варианты

Варианты — размер, цвет, объём, комплектация — устроены сложнее, чем кажется, потому что вариант меняет сразу три вещи: цену, остаток и фотографию.

Правильная механика такая:

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

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

Третий слой: свойства

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

Разница видна на фильтрах. Если цвет хранится строкой, в каталоге появятся «синий», «голубой» и «т-синий» как три разных цвета, и фильтр перестанет работать. Если цвет — значение из справочника, фильтр собирается сам.

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

Четвёртый слой: снятие сомнений

Ниже вариантов человек ищет ответы на свои возражения. Каждое возражение — отдельный блок, и порядок задаётся тем, какие вопросы вам чаще задают.

• Доставка и сроки. Не «доставим быстро», а сроки и стоимость до конкретного города, посчитанные для этого товара.
• Возврат. Условие в одну строку, а не ссылка на юридическую страницу.
• Габариты и совместимость. Всё, что человек иначе пойдёт уточнять в мессенджер.
• Отзывы. Свои, с датой, по конкретной позиции.

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

Пятый слой: объяснение

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

Для таких товаров карточка должна разговаривать. В магазине «Жук и Плут» мы поставили ИИ-консультанта, который отвечает языком методики, а не описанием карточки: покупатель спрашивает про возраст и задачу, а не про артикул. Это то, чего карточка на маркетплейсе не умеет в принципе, и ради этого магазин и делался свой.

Вариант проще и дешевле — блок «с чем берут» и готовые комплекты. Он закрывает ту же потребность, только без диалога.

Шестой слой: действие

Кнопка. Одна главная, крупная, с понятным глаголом. Рядом — второе действие для тех, кто не готов покупать сейчас: «сообщить о поступлении», «спросить в телеграм», «сохранить».

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

Что происходит после нажатия

Карточка не заканчивается кнопкой. Дальше начинается то, что определяет, дойдёт ли заказ до вас:

1. Товар попадает в корзину с выбранным вариантом и правильной ценой.
2. Остаток резервируется на время оформления.
3. Заказ сохраняется с составом, контактами и адресом.
4. Уведомление уходит и покупателю, и сотруднику.
5. Состав заказа передаётся в чек позициями, а не одной суммой.

Пятый пункт — частая точка отказа. Если в карточке была скидка «на весь заказ», а чек собирается по позициям, раскладку скидки придётся делать отдельно, и лучше заложить это до запуска.

Чего в карточке быть не должно

• Характеристик, которые не влияют ни на выбор, ни на фильтр.
• Отсчёта времени до конца скидки, который начинается заново при обновлении страницы.
• Текста, написанного для поиска, а не для человека.
• Кнопки «купить в один клик», которая ведёт в ту же корзину.

Когда карточку можно упростить

Если позиций меньше двадцати и все они очевидные, слои с вариантами, справочниками и объяснением избыточны. Хватит страницы с фото, ценой и формой. Разбор устройства каталога и админки есть в блоге.

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

Как проверить свою карточку за десять минут

Откройте любую позицию на телефоне и пройдите по списку.

1. Понятно ли за две секунды, что это за товар и сколько он стоит.
2. Видно ли, есть ли он в наличии, словом, а не значком.
3. Переключается ли вариант так, что меняются цена и остаток.
4. Показаны ли закончившиеся варианты.
5. Есть ли срок и стоимость доставки до вашего города.
6. Написано ли условие возврата одной строкой.
7. Есть ли ответ на вопрос, который вам чаще всего задают в переписке.
8. Одна ли главная кнопка.

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

Коротко

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