Електронна комерція,

Сторінка товару: п’ять елементів, що перетворюють відвідувачів на покупців

Сторінка товару виконує більшу частину роботи з продажу у вашому магазині. Ось від чого залежить, чи продасть вона, — на основі понад 200 A/B-тестів.

Сторінка товару TandemShop після редизайну DizArm: набір захисного покриття Raptor з вибором кольору й комплекту, ціною, кнопками «У кошик» і «Купити в 1 клік».
Автор
UX-команда DizArm
Читання
12 хв
Дата
Тип
Електронна комерція, CRO

Маєте таку саму проблему?

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

Надіслати показники

Більшість людей, які відкривають сторінку товару, залишають її без жодної дії. Ось як покупці поводяться на пересічній сторінці:

ідуть до конкурента без жодної дії
40%
середній час на сторінці, 3 с — якщо не зацікавило
23 s
показник відмов, у середньому по галузі
45–60%
вирішують, купувати чи ні, у перші 10 секунд
73%

Добра новина: якісна сторінка товару перетворює ці цифри на продажі. Ми протестували понад 200 сторінок товарів у взутті, меблях, автотоварах, спортивному одязі та електроніці — ті самі п’ять елементів визначали конверсію. Вдалі рішення підвищують її на 15–35%. Невдалі — знижують на 20–40%.

Елемент 01

Фото товару

Із п’яти елементів цей найбільше впливає на конверсію.

Фото — перший контакт із товаром. 65% людей покладаються на фото більше, ніж на опис. З одним фото «купити» натискають 34% користувачів, із кількома — 58%. Фото товару на реальних людях дають на 40% вищу конверсію, ніж студійні.

1. Покажіть щонайменше 6–8 фото

  • 1–2 основні фото на нейтральному тлі
  • 2–3 фото з різних ракурсів
  • 2–3 фото товару на людях: ваших покупцях або з Instagram
  • 1 крупний план матеріалу, швів і фактури
Слабко: 4 фото, усі студійні
Приклад сторінки товару з одним великим студійним фото білого кросівка та чотирма мініатюрами, 1 з 4.
Сильно: 8 фото: ракурси, люди, деталі
Та сама сторінка з вісьмома мініатюрами: студійне фото, різні ракурси, кросівок на людях і крупний план сітки.
Ілюстрація на прикладі вигаданого магазину Stride. Те саме взуття; сильна сторінка додає підошву, фото на людях та крупний план сітки.

Результат тесту

4 фото: конверсія 2,1% до 8 фото: 2,9%

+38%

2. Дайте роздивитися товар: огляд 360° або слайдер

Статичне фото відповідає на одне запитання. Дозвольте покупцям повертати товар до покупки: на мобільних це зменшує повернення на 15–20%.

Інструменти

  • Shopify: Spline, GLightbox
  • WooCommerce: Product 360 Viewer
  • Індивідуальна розробка: Babylon.js, Three.js
Слабко: Одне статичне зображення
Одне статичне фото кросівка без додаткових можливостей.
Сильно: Стрілки, 360° та індикатор позиції
Фото кросівка зі стрілками вліво й вправо, керуванням «360° · потягніть, щоб повернути» та індикатором позиції.
Сильна сторінка показує, що є на що подивитися: стрілки, огляд 360° та індикатор позиції.

3. Чисте тло, нічого зайвого в кадрі

Слабко: неохайне фото на сірій поверхні серед пів сотні інших речей. Сильно: чисте біле тло, у фокусі лише товар. Студійна зйомка дорога; її може замінити ШІ-генерація, або зверніться до нас, щоб уникнути дорогих помилок.

Слабко: Захаращене оточення товару
Білі кросівки на килимі серед взуття, одягу та стільця.
Сильно: Лише товар, біле тло
Білий кросівок на білому тлі без інших предметів.
Для ілюстрації використано стокові фото. На справжній сторінці обидва мали б показувати ваш власний товар.

4. Фото на реальних людях дають найвищу конверсію

  • Просіть покупців надіслати фото в особисті повідомлення Instagram
  • Замовляйте публікації у мікроблогерів від 3 000 підписників: менша аудиторія означає ближчий контакт і більше довіри
  • Надішліть подарунковий набір постійним покупцям і попросіть зняти реакцію. Це приносить трафік та нові замовлення
Слабко: Лише студійні фото
Галерея із шести студійних фото кросівка.
Сильно: Студійні фото та фото покупців
Після студійного фото — «Фото покупців, 24»: три покупці у кросівках із підписами Олена, Київ; Тарас, Львів; Ігор, Дніпро.
Реальні люди в кадрі відповідають на запитання «як це виглядатиме на мені?». Імена в макеті — умовні.

Результат тесту

Лише студійні: 2,1% до студійні + 2–3 фото покупців: 2,75%

+31%

Чому це працює: люди бачать «саме це я купую», і сумнівів стає вдвічі менше.

5. Збільшення для деталей

Дозвольте збільшення до 200–300%. Покупці хочуть бачити шви, матеріал і якість. У Shopify це є за замовчуванням; для WooCommerce потрібен плагін.

Слабко: Мале зображення без збільшення
Маленьке фото товару без функції збільшення.
Сильно: Збільшення до 250% при наведенні
Кругла лупа над кросівком показує сітку зі збільшенням 250%.
Лупа показує сітку зі збільшенням 250% — так стають видимі шви та плетіння.

Елемент 02

Опис товару

Фото відповідає на запитання «що це?». Опис — «чи підходить це мені?».

Скупий опис залишає сумніви, а сумніви стримують конверсію. Опис, що продає, складається із шести частин.

1. Короткий опис: перші 2–3 рядки

Слабко: Характеристики замість відповіді
Картка Stride Run 2, $79, рейтинг 4,8, із рядком «Бігові кросівки. Розмір EU. Білі» над кнопкою «У кошик».
Сильно: Для кого товар і що він вирішує
Та сама картка: «Легкі бігові кросівки, у яких не втомлюються ноги. Амортизація та повітропроникна сітка. Перевірено на забігах 10 км. Підходять за плоскостопості».
Перші рядки — єдина частина, яку читає більшість людей. Сильний варіант пояснює, кому підходить взуття та яку проблему вирішує.

2. Основні переваги: 3–5 пунктів

Назвіть характеристику, а потім поясніть користь для покупця. Сама характеристика змушує людину самостійно шукати цю користь.

Слабко: Лише характеристики
Список «Деталі»: вага 200 г, верх із сітки, проміжна підошва ENERGY FOAM™, ресурс 500 км.
Сильно: Кожна характеристика з поясненням користі
«Чому їх обирають бігуни»: лише 200 г за пару, легші за конкурентів; повітропроникна сітка, ноги не пітніють; амортизація ENERGY FOAM™, комфорт увесь день; 500+ км без зношування, економія коштів; для бігунів на 5–10 км і тих, хто багато ходить.

Результат тесту

Короткий опис: 2,28% до опис із перевагами: 2,71%

+19%

3. Матеріали та конструкція

Люди хочуть знати, що отримують за ціну, яка може бути вищою за схожий товар деінде. Деталі формують довіру.

Сильно: Матеріали короткою таблицею
Таблиця «Матеріали та конструкція»: верх — синтетична сітка 50% + мікрофібра 50%; устілка — ортопедична піна, знімна; підошва — гума, ресурс 500 км; вага — 200 г за пару; вироблено у В’єтнамі.

4. Таблиця розмірів: критично важливо

Додайте таблицю й одну пораду: «між двома розмірами обирайте більший». Недостатньо фото та відсутність таблиці розмірів спричиняють половину всіх повернень.

Слабко: Лише список розмірів
Випадний список «Оберіть розмір» над кнопкою «У кошик».
Сильно: Таблиця та порада
Кнопки розмірів 37–41 з таблицею європейських, американських розмірів і сантиметрів та приміткою «Між двома розмірами? Оберіть більший».

Повернення

Без таблиці розмірів: повернуто 3,2% замовлень до з таблицею: 1,8%

−44%

5. Інструкції з догляду

Люди хочуть, щоб товар служив довго. Правильний догляд довше зберігає його стан, а поради з догляду показують, що ви розраховуєте на його довговічність.

Сильно: Як доглядати та чого не робити
Таблиця «Догляд»: очищення — тепла вода й м’яка щітка раз на 2 тижні; сушіння — за кімнатної температури, не на батареї; зберігання — у сухому місці без вологи; не можна — прати й сушити в машинці.

6. Що кажуть покупці

Завершіть опис щонайменше трьома короткими цитатами покупців. Як їх обирати й показувати — в елементі 04.

Чекліст для опису

  • Перші 2 рядки відповідають на запитання «для кого це?»
  • 3–5 основних переваг
  • Описані матеріали та конструкція
  • Таблиця розмірів із порадою
  • Інструкції з догляду
  • Соціальні докази, щонайменше 3 цитати
  • Усе зрозуміло неспеціалісту
  • Без жаргону або з його поясненням

Елемент 03

Ціна та доставка

Найпоширеніша причина купити й найпоширеніша причина піти.

25% людей закривають сторінку, побачивши вартість доставки. 41% хочуть знати її до оформлення замовлення. Незрозуміла ціна змушує піти 30% користувачів.

1. Ціна залишається видимою під час прокрутки

Слабко: ціна вгорі й зникає, щойно покупець гортає сторінку. Сильно: блок додавання в кошик закріплений на екрані, тому ціна, розмір, кількість і кнопка завжди перед очима.

Слабко: Після прокрутки: немає ціни та кнопки
Сторінку прокручено до опису й відгуків, ціни та кнопки не видно.
Сильно: Ціна, розмір і кнопка залишаються вгорі
Та сама прокручена сторінка з панеллю вгорі: Stride Run 2, $79, EU 39, 1 шт. і «У кошик».
Обидва екрани прокручено до відгуків. На слабкій сторінці для дії потрібно повертатися вгору.

2. Покажіть доставку до оформлення замовлення

Слабко: Доставка з’являється лише під час оформлення
Stride Run 2, $79, «У кошик» і примітка «Доставка розраховується під час оформлення».
Сильно: Кожен варіант із ціною та терміном
Три варіанти доставки з ціною та терміном перед кнопкою «У кошик»: Нова пошта, 2–3 дні, +$5; Укрпошта, 5–7 днів, +$3; самовивіз із магазину, 1 день, безкоштовно.
Сильна сторінка показує реальну суму ще до кліку, тож під час оформлення немає несподіванок.
Наш проєкт: TandemShop після редизайну
Сторінка товару TandemShop після редизайну: колір і комплект, ціна 6 680 грн, «У кошик», «Купити в 1 клік» та «Безкоштовна доставка від 5000 грн» під ціною.
Що показано
  • Ціна, колір і комплект в одному блоці
  • «Купити в 1 клік» поруч із кнопкою «У кошик»
  • «Безкоштовна доставка від 5000 грн» одразу під ціною
Умови доставки — там, де читають ціну, а не в кошику.

Покупці одразу бачать реальну ціну й не залишають оформлення.

3. Покажіть економію, якщо вона є

Слабко: Просто число
Stride Run 2 із ціною $79 без додаткової інформації.
Сильно: Стара ціна, нова ціна, різниця
Stride Run 2 зі старою перекресленою ціною $99, новою $79, міткою −20% та «Ви заощаджуєте $20».

Люди купують економію, а не лише товар.

4. Безкоштовна доставка від певної суми

Напишіть на сторінці: безкоштовна доставка від $100. Із товаром за $79 в кошику покупцеві бракує $21 — він додає ще один товар. Середній чек зростає.

Слабко: Вартість доставки без можливості її уникнути
Приклад кошика: Stride Run 2, $79, доставка $5, разом $84 та кнопка оформлення.
Наш проєкт: Кошик TandemShop, мобільна версія
Мобільний кошик TandemShop українською: поле промокоду, сума 4 190 грн та рядок «додайте ще 810 грн для безкоштовної доставки» над кнопкою оформлення.
Умовний кошик показує лише вартість доставки. У нашому проєкті TandemShop під сумою написано «Додайте ще 810 грн для безкоштовної доставки», тож покупець бачить, скільки бракує до порога.

5. Покажіть комплектацію

Люди мають точно розуміти, за що платять.

Сильно: Вміст коробки списком
Фото коробки зі списком «У комплекті»: кросівки, 1 пара; теплі устілки; мішечок; інструкція з догляду; гарантія 1 рік, обмін у разі браку.

Елемент 04

Соціальні докази

Люди не довіряють незнайомому магазину.

72% людей довіряють оцінкам більше, ніж рекламі. Один помітний негативний відгук знижує конверсію на 30%. А рейтинг 4,8 із 5 працює краще за ідеальні 5,0: бездоганна оцінка здається підозрілою.

1. Рейтинг товару

Слабко: Ідеальна оцінка від трьох людей
Stride Run 2 з рейтингом 5,0 на основі 3 відгуків.
Сильно: 4,8 від 342 покупців
Stride Run 2 з рейтингом 4,8 із 5 на основі 342 відгуків та написом «342 людини купили й рекомендують».
Саме кількість відгуків робить рейтинг переконливим.

2. Письмові відгуки: покажіть три найкорисніші

  • Показуйте місто покупця: люди довіряють місцевим
  • Показуйте «Підтверджена покупка»: це справжні покупці
  • Показуйте ім’я, навіть без прізвища
Слабко: Анонімні однослівні відгуки
Три відгуки: «Чудово!», «Добре» та «ОК», підписані «Анонім» і «Гість».
Сильно: Ім’я, місто, підтвердження покупки
Три відгуки з ім’ям, містом і позначкою підтвердженої покупки, зокрема на чотири зірки: «Трохи великі, але обміняли без проблем. Дякую!»
Відгук на чотири зірки з чесним зауваженням виглядає справжнім і водночас відповідає на запитання про розмір.

Результат тесту

Без відгуків: 2,08% до 3–5 відгуків: 2,62%

+26%

3. Фото й відео покупців

Галерея «Ваші фото» з реальними людьми у товарі та посилання на відео покупців у TikTok і YouTube. Де брати: просити в листі після покупки, шукати #вашмагазин в Instagram або написати в описі «Поділіться фото й отримайте знижку 5% на наступне замовлення».

Сильно: Галерея покупців
«Ваші фото, 27»: фото покупців і ще +23, посилання на TikTok та YouTube і «Поділіться фото й отримайте знижку 5% на наступне замовлення».
Фото покупців також працюють як UGC з елемента 01, але тут розміщені поруч із відгуками.

4. «N людей купили цей товар»

«42 людини купили цей товар за останні 7 днів». Інші купують — отже, товар популярний і мені теж варто його купити.

Слабко: Немає ознак, що товар хтось купує
Stride Run 2, $79 і «У кошик».
Сильно: Нещодавні покупки поруч із ціною
Stride Run 2, $79, «42 людини купили цей товар за останні 7 днів» і «У кошик».
Показуйте лише справжній лічильник. Вигадані цифри швидко викривають і втрачають більше довіри, ніж додають.

5. Гарантії

Люди менше вагаються, коли знають, що товар можна повернути.

Сильно: Гарантії під кнопкою
Під кнопкою «У кошик»: повернення протягом 30 днів без запитань; гарантія якості 1 рік; безкоштовна доставка повернення.

Елемент 05

Кнопка додавання в кошик

Останній крок перед продажем.

Невдала кнопка — і люди не купують. П’ять речей визначають, чи натиснуть її.

1. Розмір: щонайменше 50 × 50 px

На мобільному кнопка має займати щонайменше 60% ширини екрана, щоб у неї було легко влучити великим пальцем.

Слабко: Мала, складно натиснути
Екран телефона з маленькою кнопкою «Додати» поруч із ціною.
Сильно: На всю ширину, висота 52 px
Той самий екран із кнопкою «У кошик» на всю ширину.

2. Контрастний колір

Слабко: сіра кнопка на сірому тлі, яку легко не помітити. Сильно: червона або помаранчева на білому, видима одразу.

Слабко: Сіре на сірому
Сіра кнопка «У кошик» на сірій картці.
Сильно: Помаранчеве на білому
Помаранчева кнопка «У кошик» на білій картці.

Результат тесту

Сіра кнопка до помаранчева кнопка

+5–10%

3. Текст кнопки

«Купити» — нечітко. «У кошик» називає дію. «У кошик — $79» ще й показує вартість.

Слабко: Купити
Помаранчева кнопка з написом «Купити».
Сильно: Додати в кошик
Помаранчева кнопка з написом «У кошик».
Сильно: Краще: із ціною
Помаранчева кнопка з написом «У кошик — $79».

4. Кнопка слідує за прокруткою

Коли покупець гортає до опису, кнопка залишається внизу екрана. Нікому не має бути потрібно повертатися вгору, щоб додати товар у кошик.

Слабко: Прокрутили вниз — кнопка зникла
Екран телефона прокручено до опису та відгуків, кнопки не видно.
Сильно: Кнопка закріплена внизу
Той самий екран із кнопкою «У кошик — $79», закріпленою внизу.

5. Друга дія для тих, хто ще не готовий купити

  • Дозвольте зберегти товар: електронна пошта поповнить вашу базу
  • Дозвольте запитати: чат дасть контакт
Слабко: Купуйте зараз або йдіть
Stride Run 2, $79 і лише одна кнопка «У кошик».
Сильно: Зберегти або спершу запитати
Stride Run 2, $79, «У кошик» і ще дві кнопки: «Зберегти на потім» та «Поставити запитання».

Бонус

Чекліст для сторінки товару

Перевірте за ним одну сторінку товару. Кожен непозначений пункт — місце, де втрачаються покупці.

Фото

  • Щонайменше 6–8 фото
  • 3+ фото товару на людях
  • Огляд 360° або слайдер
  • Видимі деталі: шви, матеріал, фактура
  • Збільшення до 200%

Опис

  • Перші 2 рядки відповідають на запитання «для кого це?»
  • 3–5 переваг, а не характеристик
  • Матеріали та конструкція
  • Таблиця розмірів із порадою
  • Інструкції з догляду
  • 3–5 справжніх відгуків

Ціна та доставка

  • Ціна залишається видимою під час прокрутки
  • Доставка показана до оформлення замовлення
  • Варіанти доставки з цінами
  • Безкоштовна доставка від певної суми, якщо можливо
  • Комплектація

Соціальні докази

  • Рейтинг помітний
  • 3–5 найкорисніших відгуків із фото або ім’ям
  • Позначка «Підтверджена покупка»
  • Фото та відео покупців
  • «42 людини купили цього тижня»
  • Гарантії на видному місці

Кнопка додавання в кошик

  • Щонайменше 50 × 50 px
  • Колір, контрастний до тла
  • Текст: «У кошик»
  • Залишається видимою під час прокрутки
  • Друга дія: «Зберегти на потім» або «Поставити запитання»

Результати

Наскільки зростає конверсія

Типові результати наших тестів з однакової початкової конверсії 2,1%.

Сценарій Раніше після Приріст
1. Фото, зокрема фото покупців 2.1% 2.75% +31%
2. Фото + опис 2.1% 2.85% +35%
3. Фото + опис + доставка 2.1% 2.95% +40%
4. Усі п’ять елементів 2.1% 2.75%Середній чек $67 → $73. Приріст тут — місячний дохід, а не конверсія. +28%

Маєте таку саму проблему?

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

Надіслати показники

Наш проєкт: TandemShop

Ті самі п’ять елементів у справжньому магазині

Раніше
Стара сторінка товару TandemShop: фото, довга назва, сітка кольорів, ціна та одна помаранчева кнопка, без вибору комплекту й умов доставки.
після
Оновлена сторінка товару TandemShop із трьома позначками: 1 — колір і комплект у картці; 2 — «Купити в 1 клік» поруч із «У кошик»; 3 — безкоштовна доставка від 5000 грн під ціною.

До: галерея, назва, ціна та одна кнопка без вибору комплекту чи кольору й умов доставки. Після: колір і комплект у картці, «купити в 1 клік» поруч із «У кошик» та «безкоштовна доставка від 5000 грн» одразу під ціною.

Буду радий надати додаткову інформацію про рішення, розроблені нашою командою, і допомогти у виборі оптимального підходу.

Христина Дідух Бізнес-менеджерка

Резюме

Сторінка товару — головний рушій продажів магазину. Правильне опрацювання п’яти елементів дає вам:

  1. Більше фото: люди довіряють тому, що бачать
  2. Детальний опис: менше повернень
  3. Зрозуміла ціна й доставка: менше відмов під час оформлення
  4. Соціальні докази: люди купують те, що купують інші
  5. Правильна кнопка: легше натиснути
вартість роботи залежно від платформи
$1,000–5,000
конверсія
+20–40%
віддача за 6–12 місяців
800–2000%

CRO-аудит вашого магазину

Дізнайтеся, де сторінка товару втрачає покупців

Конверсія нижче 2%, маркетинг досяг стелі або люди купують лише раз і не повертаються? Ми проведемо аудит сторінки товару й покажемо, де у вашій ніші можна підвищити конверсію на 20–40% за наступні 90 днів.

Дякуємо, ваш запит прийнято. Ми відповімо електронною поштою.
Запит не пройшов. Спробуйте ще раз або напишіть hello.dizarm@gmail.com.
  • Відповідь протягом одного робочого дня
  • Чесне ні, якщо це не збіг

5.0 на Clutch · 15 відгуків Усі п’ятнадцять – п’ятизіркові

ClipSwift · DEOZEN · Тандем · PickUpShoes

Клієнти, яких ми можемо назвати

  • Зчеплення
  • Upwork з найвищим рейтингом
  • GoodFirms
  • DesignRush

Зчеплення Особлива похвала 2024 · 2025 · 2026

Відгуки

5.0

1111111Робота DizArm UX/UI Agency покращила утримання користувачів і навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

Перший крок – це завжди розмова

Заповніть форму сьогодні та отримайте відповідь протягом 1 години. Якщо ми пропустимо це вікно, ви отримаєте безкоштовний аудит продукту або розробку концепції від DizArm.

0/5000
Бюджет* (необов'язково)
0/5000
дякую! Ваше звернення отримано!
Ой! Під час надсилання форми сталася помилка.

Буду радий надати додаткову інформацію про рішення, розроблені нашою командою, і допомогти у виборі оптимального підходу.

Богдан Лищенко
[Генеральний директор] DizArm.Creative
hello.dizarm@gmail.com