• Магазини · Figma

Картка товару: сторінка, де людина ухвалює рішення — або йде дочитувати опис до конкурента

До картки товару людина вже дійшла: знайшла категорію, відфільтрувала, обрала. Уся попередня робота магазину зроблена. І саме тут вона найчастіше зупиняється — бо не бачить, скільки коштуватиме з доставкою, не розуміє, чи товар справді є, або не знаходить того єдиного числа, за яким обирає. Картка не має бути красивою. Вона має відповісти на питання в тому порядку, у якому вони виникають.

Подивитись, як це працює
Вартість
після безкоштовного аудиту
Гарантія
30 днів після підписання акта
Спеціалізація
інтернет-магазини, переважно OpenCart
після безкоштовного аудиту
Вартість
30
Гарантія

днів після підписання акта

інтернет-магазини, переважно OpenCart
Спеціалізація
від 10 до 30 робочих днів
Строк
безкоштовний розбір картки
Початок
протягом 2 годин
Відповідь
за письмовим договором
Робота
Що входить

Повний перелік робіт і того, що ви отримуєте на виході

  • порядок блоків, вибудуваний за послідовністю рішень, а не за звичкою платформи
  • видима вартість разом із доставкою, а не сама лише ціна товару
  • характеристики, за якими справді обирають, вище за маркетинговий опис
  • чесний показ наявності й строку замість «є в наявності» на весь каталог
  • робота з варіантами: видно, що є, що під замовлення, а чого вже немає
  • галерея, у якій видно те, що людина хоче роздивитись, а не набір однакових ракурсів
  • картка на телефоні як окреме рішення, а не стиснута до вузького екрана десктопна
  • різні розкладки для товарів із різною логікою вибору, якщо каталог неоднорідний
Коли ця послуга не підходить

Що не входить у роботу — щоб не було сюрпризів на здачі

  • написання описів товарів і предметна зйомка
  • заповнення характеристик у каталозі, якщо їх немає
  • переробка каталогу й фільтрів — суміжна задача з окремою оцінкою
  • обіцянки зростання додавань у кошик
  • оцінка вигляду в категоріях «подобається — не подобається»
Кому підходить

Ситуації, у яких ця послуга дає результат

Сценарій 1 із 4

Магазин технічного товару

Інструмент, техніка, обладнання. Тут обирають за характеристиками, а не за фотографією, і головне число має бути видно без прокрутки.

Розберемо вашу ситуацію на безкоштовному аудиті
Безкоштовний розбір картки

Дивимось вашу сторінку товару й кажемо, що на ній заважає ухвалити рішення. Частина причин лежить не в дизайні.

Що ми міряємо

  • Чи заповнені характеристикиНайчастіша перешкода. Найкраща розкладка не врятує картку, у якій три поля з двадцяти. Дивимось це першим, бо це робота на вашому боці.
  • Чи видно повну вартістьЦіна без доставки — половина відповіді. Людина однаково дізнається другу половину, питання лише в тому, у вас чи в конкурента.
  • Що написано про наявність«Є в наявності» на всьому каталозі означає, що цій позначці не вірять ніде. Це не дизайн, а достовірність даних.
  • Скільки треба прокрутитиМіряємо, де на телефоні опиняється кнопка додавання й головна характеристика. Часто нижче, ніж власник уявляє.
  • Чи однорідний каталогЯкщо в одному магазині фарба, інструмент і кріплення, одна картка на всіх працює погано для кожного з них.
  • Як це зроблено в нішіПорівнюємо з іншими магазинами вашої ніші: іноді ваша картка гірша, а іноді там усе так само погано, і це вже перевага.

Що ви отримуєте

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

Строк: 2–4 робочих дні

Чому це безкоштовно

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

Що далі

Ви отримуєте перелік і оцінку. Далі вирішуєте самі — документ лишається у вас.

Коротка форма: контакт і адреса сайту

  • Договір, акт і гарантія 30 днів

    На кожен проєкт письмовий договір: обсяг, строки, сума, порядок приймання. Після здачі — акт і рахунок, а далі 30 календарних днів гарантії: помилки з нашої вини усуваємо безоплатно. Усне з дзвінка дублюємо письмово того ж дня.

  • ФОП і безготівковий розрахунок

    Виконавець — зареєстрований ФОП. Оплата на рахунок із закривними документами.

  • Права й доступи — ваші

    Код, дизайн і матеріали переходять до вас після повної оплати. Домен, хостинг, репозиторій, аналітику оформлюємо на вас.

  • Портал клієнта замість переписки

    На час роботи ви отримуєте доступ до порталу: договори, рахунки, акти й стан проєкту в одному місці.

  • Замовники з Європи

    Серед робіт — проєкти для Норвегії, Болгарії, Молдови та Іспанії.

  • Цифри, які можна перевірити

    Кожен кейс у портфоліо — з посиланням на живий сайт і технічним виміром.

  • Спершу аудит, потім сума

    Прайсу на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази.

  • Кажемо «ні», коли не впевнені

    Якщо задача не наша або строк нереальний — скажемо одразу.

Що впливає на вартість

Чому дві однакові на вигляд задачі рахуються по-різному

  • Кількість типів товаруОдна логіка вибору — одна картка. Каталог, де техніку обирають за потужністю, а фарбу за кольором, вимагає кількох розкладок.
  • Варіанти й модифікаціїКольори, розміри, комплектації. Показати наявність по кожному поєднанню — окрема логіка, а не просто перемикач на сторінці.
  • Стан характеристикЯкщо дані є й вони впорядковані, картку робимо на них. Якщо ні, спершу треба вирішити, що показувати, — і це найчастіша затримка.
  • Розрахунок доставкиПоказати повну вартість просто, коли доставка фіксована. За вагою й габаритами це вже звертання до перевізника прямо з картки.
  • Технічна основаСтандартний шаблон платформи міняти простіше, ніж тему, яку допилювали роками поверх один одного.
  • Глибина переробкиПереставити блоки й правити верстку — одне. Переробити картку разом із варіантами, галереєю й наявністю — інша за обсягом задача.
Кейси

Задачі та результат у цифрах — усі показники зняті нашим виміром

вибірка з 41 українських інтернет-магазинів

Задача
Перевірити, наскільки повні картки товару в магазинів: чи є фільтри за характеристиками, порівняння й показані оцінки — усе це росте з якості самих даних про товар.
Рішення
Зовнішній вимір головної й однієї товарної сторінки з карти сайту: сліди функцій у HTML, розмітка товару, ціни й характеристик. Наявність сліду, не якість реалізації.
Результат
Вимір 2026-08-08, 39 магазинів: Фільтр за характеристиками: 9 сайтів із 30; Порівняння товарів: 9 сайтів із 30; Розмітка рейтингу: 3 сайти із 30.

меблевий інтернет-магазин для іспанського ринку

Задача
Запустити меблевий магазин під ринок Іспанії: повністю іспаномовний інтерфейс, каталог із фільтрами за типом меблів, матеріалом і кольором, великі галереї зображень для кожної позиції.
Рішення
Магазин на OpenCart 3 (тема oct_deals, LiteSpeed, PHP 7.3.33). Іспаномовна версія з валідним hreflang=es. Каталог із фільтрами й галереями високої якості. Оплата карткою онлайн (Visa/Mastercard) і банківським переказом. Підключено GTM (GTM-MFJCPXW7), Instagram, TikTok.
Результат
76 товарів у каталозі — цифра збіглася в двох незалежних джерелах: /sitemap-products.xml містить рівно 76 <loc>, а пошук OpenCart без пагінації дає ті самі 76 позицій; разом sitemap — 88 URL (76 товарів + 1 категорія + 10 інфосторінок + головна). TTFB 0,35 с і повне завантаження HTML 0,52 с при 374 КБ розмітки. Виміряно 31.07.2026.

Не знайшли свій випадок?

Опишіть, як це влаштовано у вас, — відповімо, чи підходить «Дизайн картки товару» і що це означає у вашій ситуації. Без брифу й без дзвінка: одне питання, одна відповідь.

Етапи роботи

Прозорі етапи з погодженням на кожному кроці

Загальний строк:10–30 днів

  1. Розбір рішення

    2–4 робочих дні

    Зʼясовуємо, за чим у вашому товарі справді обирають і які питання ставлять менеджеру. Ці питання і є порядком блоків на картці.

  2. Стан даних

    1–3 робочих дні

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

  3. Розкладка

    3–8 робочих днів

    Збираємо порядок блоків окремо для широкого й вузького екрана. Мобільна версія проєктується самостійно, а не стискається з десктопної.

  4. Варіанти й наявність

    2–6 робочих днів

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

  5. Верстка й перевірка

    3–8 робочих днів

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

  6. Запуск і спостереження

    1–3 робочих дні

    Викочуємо, ставимо події аналітики на додавання в кошик і прокрутку. Далі діє гарантія 30 днів з дня підписання акта.

Технології та інтеграції

На чому будуємо і з чим це з'єднується

Стек

  • Figma
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • React
  • Next.js
  • Twig
  • PHP
  • OpenCart
  • WooCommerce

Інтеграції

  • Google Analytics 4
  • Google Tag Manager
  • Schema.org Product
  • Hotjar
  • Clarity
Картка під вашу логіку вибору чи стандартна з теми

Чим цей варіант відрізняється від альтернативи

Порядок блоківза послідовністю рішень покупця
Повна вартістьвидно разом із доставкою
Різні типи товарусвоя розкладка там, де логіка вибору інша
Вартістьокрема робота
Коли стандартної доситьнадлишок для однорідного простого товару
Що потрібно від вас

Без цього не почнемо — краще підготувати заздалегідь

  1. які питання найчастіше ставлять менеджеру про товар до покупки
  2. за якою характеристикою у вашій ніші справді обирають
  3. чи заповнені характеристики в каталозі й наскільки повно
  4. чи достовірна позначка наявності
  5. які типи товару вимагають різного показу
  6. хто з вашого боку приймає роботу

Якщо чогось із цього немає — скажіть, підкажемо, як зібрати або зробимо самі окремою задачею.

Часті питання

Те, що питають найчастіше — з конкретними відповідями

З чого починається робота над карткою?

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

У нас не заповнені характеристики. Це заважає?

Заважає більше, ніж будь-яка вада дизайну. Картка з трьома заповненими полями з двадцяти не працюватиме в жодній розкладці. Ми скажемо це на розборі: спершу дані, потім вигляд. Починати можна з найходовіших категорій, а не з усього каталогу.

Чому ви наполягаєте на вартості з доставкою?

Бо це те саме питання, яке людина однаково поставить, — різниця лише в тому, де вона отримає відповідь. Ціна без доставки виглядає привабливіше рівно до кошика. Далі або замовлення, або відчуття, що цифру приховали, і воно переноситься на весь магазин.

Мобільну картку робите окремо?

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

Чи потрібні різні картки для різних товарів?

Якщо каталог неоднорідний — потрібні. Техніку обирають за одним числом, фарбу за кольором, кріплення за розміром і сумісністю. Одна картка на всіх обслуговує кожен випадок посередньо. Але робити пʼять розкладок там, де досить двох, теж не варто — вирішуємо на розборі.

Це збільшить додавання в кошик?

Цифр не називаємо. Що можна сказати чесно: якщо люди доходять до картки й не додають товар, причина зазвичай перелічувана, а не містична. Ми ставимо події аналітики на додавання й прокрутку до правок, щоб різницю ви побачили за своїми даними, а не з наших слів.

Скільки це триває?

Від 10 до 30 робочих днів. Розкладка й верстка передбачувані; час забирають варіанти з наявністю й перевірка на крайніх товарах — із порожнім фото, довжелезною назвою чи двадцятьма характеристиками. Саме на них зазвичай і ламається гарна картка.

Ви пишете описи й робите фото?

Ні. Це окремі роботи з іншими виконавцями, і ми не беремось за них, щоб не робити погано. Що ми робимо — кажемо, який опис і які фотографії потрібні картці, у якій кількості й у якому порядку, щоб ви поставили задачу тому, хто це зніме й напише.

Подивімось, що на вашій картці заважає рішенню

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

З виміряних кейсів76 товарів у каталозі

Дивитись кейси
  • Відповідь протягом 2 годин
  • Без зобов’язань
  • Працюємо за договором

Прайса на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази, і цифра «від» у такому разі нічого не пояснює. Спершу безкоштовний аудит — рахуємо ваші сторінки, дублі й швидкість, — потім називаємо суму й строк і фіксуємо їх у договорі.