Карточка товара и обязательный набор блоков

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

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

Карточка начинается с модели данных

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

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

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

Первый экран

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

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

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

Блоки для решения о покупке

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

• Характеристики таблицей. Те же поля, что и в фильтре, в той же формулировке.
• Описание, которое объясняет, а не пересказывает. Для кого товар, в каких условиях работает, чем отличается от соседнего в каталоге.
• Размеры и совместимость. То, из-за чего чаще всего возвращают: не подошло, не встало, не совместилось.
• Документы. Инструкция, сертификат, гарантийный талон, если они есть.
• Условия возврата. Коротко и на самой карточке, а не ссылкой внизу страницы.

Блоки доверия

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

Доверие на карточке строится не словами о надежности, а проверяемыми вещами.

• Реальные отзывы с датой. Пустой блок отзывов лучше не показывать вообще, чем показывать с нулем.
• Фото от покупателей. Работают сильнее студийных, потому что показывают товар в жизни.
• Ответы на вопросы. Публичные, с ответом магазина, а не только звездочки.
• Кто продает. Гарантия, срок работы, способ связаться до покупки.

Сложный товар

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

• Отдельный остаток у каждой вариации. Иначе вы продадите то, чего нет, и придется лично извиняться перед покупателями.
• Цена привязана к вариации, а не к товару. Размер XL часто стоит иначе, и это должно быть в данных, а не в примечании.
• Недоступные комбинации видно сразу. Не после добавления в корзину и не после нажатия «купить».
• Фото меняется вместе с выбором. Человек выбрал синий, а видит красный: дальше он карточке уже не верит.
• Комплектация описана отдельно. Что входит, что докупается, что несовместимо.

Данные для интеграций

Карточка живет не только на сайте. Она едет в учет, в маркетплейс, в рекламный фид, иногда в кабинет поставщика.

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

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

Дополнительные вкладки и длинное описание

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

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

Порядок внутри описания тоже не произволен. Сначала ответ на вопрос «Зачем это мне?», потом «Как это работает?» и только потом «Из чего это сделано?». Магазины обычно пишут в обратном порядке, потому что так выглядит технический паспорт от поставщика.

Товар без наличия

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

• Вернется. Страницу оставляют, показывают честный статус и предлагают уведомление о появлении.
• Снята окончательно. Полезную информацию сохраняют и дают близкую замену по ключевым параметрам.
• Взамен ничего нет. Тогда сервер возвращает код 404 или 410, а сама страница объясняет, что товар снят с продажи, и ведет в категорию. Если на товар вели внешние ссылки, адрес можно перенаправить кодом 301 на ближайшую категорию.

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

Альтернатива должна соответствовать ключевым параметрам. Более высокая маржа не повод показывать несовместимую модель. Человек один раз наткнется на такое и перестанет верить рекомендациям вообще.

Мобильная структура

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

• Кнопка не уезжает за экран. Длинное название не должно выталкивать ее вниз.
• Галерея листается пальцем. А не стрелками, рассчитанными на мышь.
• Характеристики не в горизонтальной таблице. Иначе их придется прокручивать вбок.
• Кнопки выбора вариации крупные. Размеры, в которые трудно попасть, это потерянные заказы.

Скорость карточки

Карточку товара в интернет-магазине открывают чаще всего, и она же обычно самая тяжелая из-за галереи.

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

Как и на любой странице, сначала убирают то, что блокирует появление первого экрана, потом оптимизируют остальное.

Микроразметка

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

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

Рекомендации и сопутствующие товары

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

• Сопутствующее по логике использования. Чехол к телефону, а не второй телефон.
• Похожее по параметрам. Если человек смотрит на что-то и колеблется, рядом должно быть сравнимое.
• Правило проверено на краях каталога. Автоматическая подборка хорошо работает в середине и дает странные результаты в редких категориях.
• У редактора есть право закрепить исключение. Потому что он знает о товаре то, чего не знает правило.

Как передавать шаблон в работу

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

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

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

Чек-лист приемки

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

Доработка карточки в интернет-магазине, который уже работает, входит в кастомную разработку. Точечная правка стоит от $300 до $1 000, а отдельный модуль или интеграция, например выгрузка на маркетплейс с отчетом об отклоненных позициях, от $500 до $2 000. Новый интернет-магазин на готовом шаблоне стоит от $1 500 до $3 000.

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

Выводы

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

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

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