Объёмная карточка товара с изображением, вариантами и блоками условий покупки
Дизайн и UX

Карточка товара интернет-магазина: что покупатель должен увидеть до заказа

Карточка помогает ответить на вопросы о конкретном товаре и варианте: как он выглядит, подходит ли по характеристикам, доступен ли и на каких условиях его можно получить.

Покажите товар в понятном масштабе

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

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

Свяжите выбор варианта с данными

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

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

Ответьте на вопросы до действия

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

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

Проверьте состояния карточки

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

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

Вопросы и ответы

Сколько фотографий нужно товару?

Столько, сколько нужно для важных ракурсов, деталей и масштаба конкретного товара. Универсального числа нет.

Можно ли показывать одну цену для всех вариантов?

Только если цена действительно одинакова; при отличиях обновляйте её вместе с выбранным вариантом и доступностью.

Получите понятный план следующего шага

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

Написать на почтуhello@iskro.techTelegram
Получить разбор проекта