• Магазини · Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

Що ми міряємо

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

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

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

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

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

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

Що далі

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

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

Працюємо офіційно

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

Нам довіряють6 брендів

Нам довіряють: Kvant Energy, GYPSUN, Naturel Cosmetics, Pancer Protection, LUGI, BeeTech

Умови, зафіксовані письмово8 пунктів

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

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

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

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

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

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

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

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

  • Сайти в дев'яти країнах

    Наші сайти працюють у дев'яти країнах: крім України — Польща, Німеччина, Австрія, Англія, Норвегія, Болгарія, Молдова, Іспанія.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Сайти в дев'яти країнах

    Наші сайти працюють у дев'яти країнах: крім України — Польща, Німеччина, Австрія, Англія, Норвегія, Болгарія, Молдова, Іспанія.

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

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

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

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

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

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

NDA підписуємо на запит. Після завершення співпраці наші доступи до ваших сервісів видаляємо самі.

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

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

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

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

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

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

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

Задача
Запустити меблевий магазин під ринок Іспанії: повністю іспаномовний інтерфейс, каталог із фільтрами за типом меблів, матеріалом і кольором, великі галереї зображень для кожної позиції.
Рішення
Магазин на OpenCart 3 (тема oct_deals, LiteSpeed). Іспаномовна версія з валідним hreflang=es. Каталог із фільтрами й галереями високої якості. Оплата карткою онлайн (Visa/Mastercard) і банківським переказом. Підключено GTM, 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 робочих днів. Розкладка й верстка передбачувані; час забирають варіанти з наявністю й перевірка на крайніх товарах — із порожнім фото, довжелезною назвою чи двадцятьма характеристиками. Саме на них зазвичай і ламається гарна картка.

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

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

Демо

Ваш каталог на екрані телефона

Так може виглядати ваш магазин у телефоні: банер колекції, популярні товари й кошик, до якого один дотик. Натисніть «Додати в кошик» — лічильник у шапці оновиться, як у справжньому магазині.

  • Банер колекціїПерший екран показує новинку, а не логотип.
  • Картки товарівФото, ціна й кнопка — без переходу на окрему сторінку.
  • Кошик в один дотикЛічильник у шапці оновлюється одразу, як у справжньому магазині.
Магазини в портфоліо
Це демо-інтерфейс, а не магазин клієнта. Живі роботи — в портфоліо.
SHOP
Нова колекціяОсінь / ЗимаПереглянути
ПопулярнеВсі товари ›
  • Худі Essentials1 290 ₴
  • Рюкзак Urban1 490 ₴
  • Кепка Classic690 ₴
  • Футболка Basic590 ₴
  • Кросівки Street2 390 ₴
  • Шорти Active890 ₴

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

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

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

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

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