Розробка дизайну карточки товара для вебсайту
Сторінка карточки товара — конверсійна точка. Саме тут користувач приймає рішення про покупку. Дизайн повинен усунути всі перепони між «мені цікаво» та «додати в кошик»: дати повну інформацію, показати товар зі всіх сторін, дати відповіді на питання до їх виникнення.
Анатомія сторінки
Верхня частина (above the fold)
Зона максимальної уваги. Повинна містити все необхідне для прийняття рішення без прокрутки:
- Галерея зображень (основне + мініатюри)
- Назва товара (H1)
- Рейтинг і кількість відгуків (з якорем на блок відгуків)
- Ціна (поточна + зачеркнута + розмір економії)
- Доступність та строк доставки
- Вибір варіантів (колір, розмір, обсяг)
- Кнопка «Додати в кошик»
- Кнопка «Купити зараз» (прискорений checkout)
- Іконки довіри (безпечна оплата, повернення, гарантія)
Нижче fold — інформаційні блоки
- Повний опис (структурований, з характеристиками)
- Таблиця характеристик
- Відгуки з рейтингами
- Питання та відповіді
- Схожі товари
- Комплектація / аксесуари
Галерея зображень
Галерея — найважливіший елемент. Користувачі не купують те, що не можуть розглянути.
Десктоп: основне зображення 600–800px + вертикальна стрічка мініатюр зліва (або горизонтальна знизу). Zoom при hover (lens zoom або lightbox). Підтримка відео в галереї.
Мобайл: горизонтальний swiper з крапками-індикаторами. Pinch-to-zoom по тапу. Повноекранний перегляд по свайпу вверх.
Типи контенту в галереї:
| Тип | Призначення |
|---|---|
| Studio shot (білий фон) | Деталі, офіційний вид |
| Lifestyle фото | Контекст використання |
| 360° вид | Повний огляд |
| Відео-огляд | Демонстрація в роботі |
| Zoom-деталі | Текстури, шви, матеріали |
| Фото з розмірами | Допомагає з габаритами |
Вибір варіантів товара
Колір — візуальні свотчи, не dropdown. Недоступні варіанти зачеркнуті діагоналлю, не сховані. Hover показує превю зміни фото.
Розмір — кнопки-таблетки. Посилання на таблицю розмірів відкриває модальне вікно, не нову вкладку. Недоступні розміри показані сірим (не ховати — користувач повинен знати що розмір існує).
Інші варіанти (обсяг, комплектація) — dropdown або radio-кнопки залежно від кількості.
При виборі варіанту оновлюються: ціна, наявність, зображення (показується фото нужного кольору), 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": "...",
"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 днів.