Что показать в карточке товара до покупки

Первый экран отвечает на вопрос «это мой товар?»

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

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

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

Как показать товар на фотографиях

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

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

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

Что делать с вариантами и наличием

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

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

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

Условия покупки в нужный момент

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

Характеристики лучше давать короткими понятными строками. У лампы это мощность, высота, тип крепления, длина кабеля и материалы. Рядом можно объяснить сложное условие простыми словами. Например, «крепится к столешнице толщиной до 45 мм». Такое уточнение помогает проверить совместимость. Для магазина полезно согласовать единицы измерения и источник данных, чтобы таблица не расходилась с описанием и фильтрами.

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

Разбор карточки лампы

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

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

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

Как принять готовый шаблон

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

• Покупатель узнаёт товар, цену и доступный вариант на телефоне.
• Фотографии показывают форму, детали и масштаб.
• Характеристики совпадают с данными каталога и фильтров.
• Переключение варианта обновляет цену, наличие и изображение, где это нужно.
• Условия оплаты и доставки понятны до подтверждения.
• У кнопки есть ответы при успехе, ожидании и ошибке.
• Редактор может добавить новую позицию без перестройки шаблона.

Проверь данные перед массовым наполнением

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