Картка товару, що продає: структура, фото і кнопка під мобайл (Хорошоп)

Реклама привела людину на товар, вона глянула й пішла. Картка товару — остання сторінка перед кошиком і найчастіший обʼєкт правок, бо саме тут трафік перетворюється на замовлення або витікає. Гарне фото й ціна нижче — цього мало: важить порядок блоків, де стоїть кнопка, скільки ракурсів у галереї та що написано під ціною. Нижче — анатомія картки, яку зводять усі перевірені джерела, з поправкою на український мобайл і платформу Хорошоп.

Канонічний порядок блоків: від фото до кнопки без відволікань

Horoshop, Brander, WayUp, Impulse, Baymard сходяться на одній логіці: вести погляд від фото до кнопки, а все, що вимагає читання й роздумів, — нижче. Верхня частина картки веде до однієї дії — покласти в кошик. Опис, характеристики й відгуки чекають своєї черги під нею.

Перший екран мобайла: ціна і кнопка над лінією згину

У зоні згину мобайла (орієнтовно перші 600–700 px — практичне допущення, перевіряйте за GA4 своїх топ-пристроїв) мають бути головне фото, назва, ціна й доступ до кнопки. Фото забирає не більше 40–50% висоти згину, інакше ціна їде вниз. Кнопка — контрастна, на всю ширину, тач-таргет від 44 px (оптимум 60–72 px за висотою); вторинні дії («в обране», «1 клік») візуально тихіші, щоб не відбирати увагу в головної.

У мобільному стовпці ціна, назва й кнопка не влазять в один екран згину. Тому вниз ставлять sticky-бар: мініатюра, ціна й «В кошик» зʼявляються при скролі й тримають кнопку під рукою на будь-якій глибині сторінки.

Фото: скільки і які ракурси

Магічного числа немає, але межа сходиться: мінімум 4–5 фото. Prom дає платформенну статистику — для «Одягу та взуття» 3+ фото приносять удвічі більше продажів, ніж одне, а товар без жодного фото втрачає рейтинг. Baymard: фото — точка входу для 56% користувачів, 42% намагаються зрозуміти розмір саме по фото, тому фото «в масштабі» (на моделі, в руці, в інтерʼєрі) обовʼязкове.

Мікрокопія кнопки і блок довіри

Текст кнопки покупець читає за пів секунди й вирішує, чи тиснути. «В кошик» та «Додати в кошик» працюють для додавання, «Купити» й «Оформити» — для переходу до замовлення. «Купити зараз» частина аудиторії читає як тиск, тож у дефолт його не ставлять — лише в A/B. Після кліку кнопку варто перемкнути: «Додаємо…» → «✓ У кошику», щоб зняти сумнів «а спрацювало?» і повторні тапи.

Під ціною й кнопкою — рядок зняття заперечень: «Нова Пошта 1–2 дні», «Оплата при отриманні», «Повернення 14 днів», «Гарантія». Для українського покупця опція післяплати часто вирішальна: без можливості оглянути товар до оплати частина людей у незнайомому магазині просто не купує. Комісія Нової Пошти за післяплату — близько 2% + 20 грн, її закладають у юніт-економіку.

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