Разработка дизайна карточки товара сайта
Страница карточки товара — конверсионная точка. Именно здесь пользователь принимает решение о покупке. Дизайн должен устранить все препятствия между «мне интересно» и «добавить в корзину»: дать полную информацию, показать товар со всех сторон, ответить на вопросы до их возникновения.
Анатомия страницы товара
Верхняя часть (above the fold)
Зона максимального внимания. Должна содержать всё необходимое для принятия решения без прокрутки:
- Галерея изображений (основное + миниатюры)
- Название товара (H1)
- Рейтинг и количество отзывов (с якорем на блок отзывов)
- Цена (текущая + зачёркнутая + размер экономии)
- Доступность и срок доставки
- Выбор вариантов (цвет, размер, объём)
- Кнопка «Добавить в корзину»
- Кнопка «Купить сейчас» (ускоренный checkout)
- Иконки доверия (безопасная оплата, возврат, гарантия)
Ниже fold — информационные блоки
- Полное описание (структурированное, с характеристиками)
- Таблица характеристик
- Отзывы с рейтингами
- Вопросы и ответы
- Похожие товары
- Комплектация / аксессуары
Галерея изображений
Галерея — самый важный элемент. Пользователи не покупают то, что не могут рассмотреть.
Десктоп: основное изображение 600–800px + вертикальный стрип миниатюр слева (или горизонтальный снизу). Zoom при hover (lens zoom или lightbox). Поддержка видео в галерее.
Мобайл: горизонтальный swiper с точками-индикаторами. Pinch-to-zoom по тапу. Полноэкранный просмотр по свайпу вверх.
Типы контента в галерее:
| Тип | Назначение |
|---|---|
| Studio shot (белый фон) | Детали, официальный вид |
| Lifestyle фото | Контекст использования |
| 360° вид | Полный осмотр |
| Видео-обзор | Демонстрация в работе |
| Zoom-детали | Текстуры, швы, материалы |
| Фото с размерами | Помогает с габаритами |
Выбор вариантов товара
Цвет — визуальные свотчи, не дропдаун. Недоступные варианты зачёркнуты диагональной линией, не скрыты. Hover показывает превью смены фото.
Размер — кнопки-таблетки. Ссылка на таблицу размеров открывает модальное окно, не новую вкладку. Недоступные размеры показаны серым (не скрывать — пользователь должен знать что размер существует).
Другие варианты (объём, комплектация) — дропдаун или радио-кнопки в зависимости от количества.
При выборе варианта обновляются: цена, наличие, изображения (показывается фото нужного цвета), SKU.
Блок цены и акций
Было: 15 990 ₽ [−25%]
Сейчас: 11 990 ₽
Экономия: 4 000 ₽
Акция заканчивается через: [02:14:38]
При оплате картой Сбера: 10 790 ₽ (-10%)
Баллы кешбэка: до 590 баллов
Скидочный таймер уместен только при реальных временных акциях — fake urgency разрушает доверие и нарушает законодательство о рекламе.
Блок доставки и наличия
Динамический блок, который меняется по геолокации или введённому городу:
✓ В наличии (142 шт.)
Доставка курьером: завтра, 14 марта
— При заказе до 18:00
— Бесплатно от 5 000 ₽, иначе 299 ₽
Пункты самовывоза: 38 точек в Москве
Почта России: 3–7 дней, от 199 ₽
Введите ваш город: [Москва ▾]
Описание и характеристики
Описание должно быть структурированным, не одним блоком текста:
Вкладочная структура:
- «Описание» — маркетинговый текст + ключевые особенности списком
- «Характеристики» — таблица параметров
- «Отзывы (48)» — UGC контент
- «Вопросы (12)» — Q&A
Таблица характеристик:
Производитель Apple
Модель MacBook Pro 14"
Процессор Apple M3 Pro, 11 ядер
Оперативная память 18 ГБ
Накопитель 512 ГБ SSD
Экран 14.2", 3024×1964, 120 Гц
Батарея 70 Вт·ч, до 18 часов
Масса 1.61 кг
Гарантия 1 год
Блок отзывов
Критический элемент доверия. Структура:
- Общий рейтинг крупно + распределение по звёздам (горизонтальные бары)
- Фильтры: по количеству звёзд, с фото, верифицированные
- Карточки отзывов: имя, дата, рейтинг, текст, фото/видео, «Полезно?»
- Пагинация или «Показать ещё»
Форма отзыва: доступна авторизованным покупателям. Поля: оценка (звёзды), заголовок, текст, загрузка фото.
Sticky CTA на мобайле
На мобильных устройствах кнопка добавления в корзину должна быть sticky-элементом внизу экрана при скролле ниже основной зоны товара:
.product-cta-sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: #fff;
box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
z-index: 100;
display: flex;
gap: 8px;
}
/* Скрыть когда основная кнопка видна */
.product-cta-sticky.is-hidden {
transform: translateY(100%);
}
Связанные товары
Три паттерна с разной механикой:
- «Похожие товары» — из той же категории с близкими характеристиками
- «С этим покупают» — collaborative filtering по данным заказов
- «Вы смотрели» — история просмотров из localStorage
Карусель, не сетка — не уводит от основного товара.
Структурированные данные
{
"@context": "https://schema.org",
"@type": "Product",
"name": "MacBook Pro 14\" M3 Pro",
"image": ["https://example.com/images/mbp-1.jpg"],
"description": "Ноутбук Apple MacBook Pro",
"sku": "MRXU3LL/A",
"brand": { "@type": "Brand", "name": "Apple" },
"offers": {
"@type": "Offer",
"price": "189990",
"priceCurrency": "RUB",
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "142"
}
}
Сроки
Дизайн карточки товара (десктоп) с базовой галереей и описанием — 3–4 дня. Полный дизайн: десктоп + мобайл, все состояния вариантов, отзывы, sticky CTA, cross-sell блоки — 6–10 дней.