Наскільки б не був функціональним і красивим ваш інтернет-магазин, наскільки б він не був ідеально зверстаний і адаптований під мобільні пристрої, саме картка товару для інтернет-магазину відіграє вирішальну роль. Її дизайн, контент, інформаційне наповнення та оптимізація формують остаточне рішення відвідувача - купити продукт у цьому інтернет-маркеті або подивитися його в іншому, підійшовши тим самим до ваших конкурентів. Подивіться приклади дизайнів сайтів інтернет-магазинів, які можуть забезпечити відмінну конверсію.
Безглуздо бути впевненим у тому, що короткий аби якийсь опис продукції, скопійований з сайту виробника, або взагалі тільки короткий технічний опис і одна лідогенеруюча кнопка - це той максимум, якого цілком достатньо для сторінки картки товару. Щоб переконати клієнта виконати покупку, важливо продумати кожну дрібницю та нюанс, знову і знову аналізувати поведінкові фактори відвідувача, надавати йому не лише технічний та текстовий опис продукції, а й вміти чіпляти його за допомогою різних тригерів. Справді ефективна картка з інформацією про товар – це ціла посадкова сторінка. Про те, як її розробити, оформити та оптимізувати, поговоримо в цій статті.
Сторінка товару + ефектне УТП = продаж
Якщо ви продаєте конкурентний продукт, представлений над ринком у широкому асортименті, то ймовірність його швидкого збуту помітно знижується. Уникнути покладу товару допоможе унікальна торгова пропозиція (УТП). Що це таке? Це невелика пропозиція, яка яскраво та зрозуміло доносить вигоди покупцю. Прочитавши його, споживач розуміє, що йому пропонують, які переваги чи цінності (або і переваги, і цінність) отримає він, купивши продукт у вашому інтернет-магазині.
Без унікальної торгової пропозиції продаж товару приречений на провал. По-перше, у покупця не утворюється емоційний зв'язок із вашим інтернет-магазином. По-друге, якщо УТП не буде, вам доведеться конкурувати за ціною товару, що буває дуже складно та збитково для вас. По-третє, продажі знизяться, оскільки не бачачи своїх вигод, клієнт не буде зацікавлений у купівлі продукції вашого онлайн-магазину. Щоб скласти відмінне УТП, необхідно базуватись на трьох китах:
- Конкретність. Заголовок сторінки товару має бути конкретним та недвозначним;
- Унікальність. Вигода має бути унікальною – тією, яку не пропонують конкуренти;
- Ефективність. Пропонуйте головну цінність - таку, повз яку жоден цільовий споживач не зможе пройти повз.
Унікальна торгова пропозиція має діяти на емоції покупця, викликати не лише непідробний інтерес, а й позитивні емоції. Потенційний клієнт повинен, відчути переваги, які йому важливі, що стане відмінним мотиватором до виконання дії. Для складання відмінного УТП рекомендуємо прислухатися до наступних порад.

Запропонуйте клієнту головну цінність
Конкуренція на ринку України велика, тому дуже важливо запропонувати клієнту перевагу, яка його зацікавить та мотивує до покупки. Це може бути:
- Швидке доставлення;
- Подарунок при купівлі та/або бонуси;
- Можливість купити на виплат або кредит;
- Безкоштовні послуги: сервісне обслуговування, доставлення, консультація спеціаліста (наприклад, дієтолога, косметолога, спортивного тренера тощо);
- Гарантія якості від виробника чи вашого магазину, яка дозволить повернути чи обміняти продукт протягом гарантійного терміну.
- Картка з інформацією про товар



Дуже важливо пропонувати потенційному клієнту те, що ви справді зможете здійснити. Наприклад, не варто обіцяти доставлення замовлення протягом одного дня, якщо у вас є проблеми з логістикою.
Знайдіть свою унікальну перевагу
Перевагою може бути не лише якась послуга вашої компанії, яка демонструє покупцю вигоду. Їм може стати будь-який факт про компанію, завдяки якій клієнт зрозуміє, що він залишиться у виграші, якщо придбає у вашому інтернет-магазині. Наприклад, інформація про те, що ваша компанія – виробник чи офіційний представник торгової марки. Але пам'ятайте, що сучасний інтернет-юзер - людина вибаглива, тому на заїжджені фрази «ми-кращі» або «у нас дешевші» вона навряд чи «поведеться».


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

Правильний та унікальний дизайн картки товару
Юзабіліті та дизайн картки товару впливає на її здатність «продавати» - спонукати людину до дії здійснити покупку товару, який пропонує ваш сайт. Дизайн впливає на психологічне сприйняття користувачем сторінки, тому може мотивувати його до покупки, так і відштовхнути. Тому дуже важливо визначити послідовність розміщення всіх блоків, правильно підібрати кольори, тони та відтінки, знайшовши баланс між психологічним сприйняттям кольорів людиною та відповідністю палітри кольорів між собою. Отже, кілька рекомендацій щодо оформлення дизайну сторінки товару. До речі, рекомендації з дизайну є частиною роботи спеціаліста при складанні технічного завдання на створення сайту. Пізніше прочитайте це, якщо цікаво.

Не знаєте як підібрати поєднання кольорів для сайту? Читайте статтю про те, як подібрати кольори для сайту
Головне – зліва, додаткове – праворуч та ідеальне оформлення картки товару – готове!
Оскільки ми читаємо ліворуч, то інформація краще сприймається саме в цьому порядку. Тому краще оформляти візитну картку у цій послідовності. Зліва краще розмістити фотографію, праворуч – основну інформацію про товар: вартість, умови, вигідні пропозиції. Тут краще розміщувати тригери. Вони повинні виділятися на загальному тлі, тому використовуйте яскравіші кольори, але при цьому поєднуються із загальним стилем сторінки. Якщо ви плануєте розмістити більш докладний опис продукту, краще розміщувати його нижче і розбивати текст підзаголовками, щоб він був зручним для читання. Обсяг опису може бути будь-яким, але рекомендований – до 1500 тисяч. Однак строгих правил за обсягом немає, і якщо ви торгуєте вузькоспеціалізованим товаром, що має ряд технічних особливостей і переваг, що випливають із нього, то не обмежуйтесь обсягом опису. Головне, уникайте водяного тексту. Кожна цінна перевага збільшує шанси конверсії. Дізнайтесь як писати ефективні конкурентні переваги товарів.


Правильно вибирайте кольори картки
Вибір колірного рішення – досить об'ємна тема. Дуже важливо правильно вибрати колір основного тла щодо виду товару, який реалізує ваш інтернет-магазин. Наприклад, якщо ви продаєте дитячі товари, то дизайн всього онлайн-магазину може бути відповідний - з величезним переважанням ніжних тонів рожевого, блакитного, бірюзового. В іншому, краще не хитрувати, і вибрати загальне тло традиційно білого кольору. Звичайно, більшою мірою все залежить від вашої цільової аудиторії та продукції. Ви можете підібрати абсолютно будь-які кольори як основне і додаткове, головне, щоб вони гармонійно поєднувалися і не відволікали увагу людини від основної пропозиції. Пам'ятайте, гармонійна та гарна картка товару – запорука високих продажів. І не забувайте, що адаптивна сторінка товару підвищує можливість конверсії.


Створюйте акценти на конверсійних блоках
Кожну картку товару можна назвати повноцінним лендингом. На ній мають розміщуватися заклики до дії, потрібно оформити сторінку товару з формою зворотний зв'язок. Головні з них – кнопки «Купити» або «Додати в кошик». Це найефективніші конверсійні інструменти. Можуть бути одночасно розміщені у картці, а можуть і окремо на вибір. Яку саме використовувати залежить від передбачуваного середнього чека. Наприклад, якщо продається дорогий товар, то, найімовірніше, він буде придбано в одній позиції. Отже, оптимальнішим буде розміщення кнопки «Купити».
Якщо середній чек передбачає кілька позицій, використовуйте заклик «Додати до кошика».
Оформляти їх необхідно відповідно – за допомогою яскравих кольорів, що привертають увагу. Конверсійні блоки повинні бути помітними, відрізнятися від фону та кольору шрифту, бути великого розміру. Але не перестарайтеся, колір блоків повинен поєднуватися із загальним дизайном.



Створіть зручний функціонал картки товару
Надайте відвідувачу комфорт користування карткою, створивши UX-дизайн. Якщо ваш інтернет магазин продає одяг, розмістіть на картці функцію вибору кольору виробу з автоматичною заміною фотографії при наведенні на неї. По-перше, клієнт зможе переглянути весь асортимент товару за конкретною моделлю. По-друге, вам не потрібно буде створювати картки товарів під кожен її колір.
Передбачте функцію плаваючої лідогенеруючої кнопки «Купити», «У кошик», щоб вона завжди була на увазі у користувача під час перегляду сторінки. Користувач зможе натиснути кнопку в той момент, коли він зважиться на покупку без скролінгу сторінки вгору.


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


Продаючий контент товарної картки
Ні дизайн, ні верстка, ні наявність мобільної версії вашого інтернет-магазину не впливають на рішення споживача замовити товар вашої компанії настільки сильно, наскільки це залежить від контенту картки. Контент на цій посадочній сторінці – її серце. Тому дуже важливо знати та використовувати всі оптимальні для вашого сайту інструменти, які допоможуть користувачеві отримати найповніший обсяг інформації. Перерахуємо головні з них, які мають бути присутніми при оформленні картки товарів.
Барвисті та «смачні» фотографії товару
Фотографії товарів, особливо дуже конкурентних (одяг, електроніка, товари для дому), мають вирішальне значення для зміцнення довіри та надання користувачеві розуміння про те, що він придбає. Знімки товарів повинні бути яскравими та високоякісними, але мати невелику вагу для швидкого завантаження сайту.
Фотографії в галереї повинні відповідати реальному виду товару, інакше ви отримаєте негативні відгуки про свою компанію і втратите клієнта, якщо на руки він отримає не те, що побачив на фото. Надайте відвідувачу можливість переглянути кілька фотографій у різних ракурсах товару, передбачивши цю функцію в інтерфейсі користувача.


За допомогою фотографій можна створити ще один довірчий елемент споживача. Використовуйте унікальні фото – ті, які не розміщені на сайтах конкурентів та не взяті з Інтернету. Для цього скористайтесь послугами фотографа, розмістивши на тлі фотографії логотип свого інтернет-магазину.
Розмістіть відео про товар у картку
Картка товару з відео про нього стане чудовою емоційною складовою, що мотивує споживача до конвертації в клієнта. Відеоролик може містити відгуки реальних покупців, процес розпакування товару, опис особливостей продукції, звернення виробника до свого покупця, експертний огляд продукту та порівняння з конкурентними товарами з демонстрацією його переваг або гарний відеоряд з описом зовнішнього вигляду продукту. Якщо у вас є можливість надати відеоролик на огляд покупцю, обов'язково скористайтеся нею, розмістивши його на сторінці картки товару як блок довіри.

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


Також за допомогою блоку відгуків можна просувати картку за допомогою SEO та підтримувати якісний зворотний зв'язок зі своїми клієнтами, зміцнюючи довіру до себе та демонструючи своє ставлення до них. Відмінним прикладом для вас може стати будь-яка картка товару Яндекс Маркета – вона завжди містить кілька відео та сотні відгуків від клієнтів, що дуже добре працює на довіру потенційного покупця до товару.

Пишіть інформативний та цікавий текст для картки товару
Дозвольте клієнту отримати вичерпну інформацію про товар, який його цікавить. Прочитавши його, у відвідувача не повинні виникнути питання щодо якості або особливостей продукту. Таким чином, ви спростите роботу менеджера, скоротивши кількість дзвінків для отримання уточнюючих питань від клієнта, продемонструєте свою експертність та виключите ймовірність втрати клієнта, який перейде на сайт конкурента з метою пошуку необхідної інформації.
Отже, хороший опис продукту повинен включати:
- Назва продукції та інформація кому вона підходить;
- Опис проблеми споживача та її вирішення за допомогою товару;
- Максимально точні характеристики товару без помилок (наявність помилкових характеристик товару може призвести до великого відсотка його повернення), його переваги;
- Вигоди та користь, які отримає людина, купивши річ.

Залежно від спеціалізації товару опис може доповнюватися покроковим керівництвом до застосування, описом функцій, особливостей, відмінності вашого товару від конкурентів та іншу інформацію, яка дозволить споживачеві зробити покупку тут і зараз. Обов'язково включайте в текст заклики до дії та розмовляйте з відвідувачем мовою його вигод.
Не знаєте, як змусити текст на картці товару продавати? Читайте наші 10+ рекомендацій про те, як написати продаючий текст.
Правильна SEO-оптимізація картки товару в інтернет-магазині
Кожен власник інтернет-магазину бажає, щоб його сайт потрапив до ТОП-10 пошукової видачі. Але досягти цього не так і просто, як може здатися на перший погляд. Місць всього десять, конкуренти - не сплять. Тому, щоб отримати максимальні шанси виведення свого онлайн-магазину в ТОП, потрібна правильна СЕО-оптимізація комерційних факторів, юзабіліті та карток товару. Як це зробити?
Пишіть правильні теги
- Тайтли. Title для картки товару повинен включати основний запит з уточненням, наприклад, кольору, марки, розміру, УТП або заклик до дії. Рекомендований розмір заголовка – до 75 символів;
- H1. Перший заголовок повинен містити повну назву товару, бути коротким та лаконічним;
- Alt. Атрибут для тега img описує картинку у картці товару та допомагає їй ранжуватися у пошуковій системі. Він також повинен містити ключові слова;
- Мета тег description картки товару. З точки зору СЕО дескрипшн принципової ролі не відіграє, але вказівка в ньому унікальної торгової пропозиції або заклику до дії може сприяти збільшенню кліків на посилання у видачі.

Довірте своєму програмісту роботу з автоматичного встановлення ключових слів або LSI слів до основного ключового запиту, використовуючи і російську, і англійську мову (наприклад, вказівку моделі та бренду товару двома мовами). Автоматична підстановка дозволить генерувати тематичні підзаголовки до відповідних блоків. Як додаткові слова можуть використовуватися слова: «ціна», «опис», «технічні характеристики», «відгуки», «відео» та ін. Наприклад, створюється картка товару для мобільного телефону Samsung Galaxy J7 J700/DS Black. Автоматична підстановка ключових слів у заголовки картки товару може мати такі шаблони:
- Технічні характеристики + Назва товару (Технічні характеристики Samsung Galaxy J7 J700/DS Black),
- Відгуки про «Назва товару» (Відгуки про Samsung Galaxy J7 J700/DS Black) тощо.

Для спрощення роботи СЕО-оптимізатора довірте програмісту роботу з автоматичного впровадження шаблонних тайтлів та дескрипшнів у кожну сторінку картки.
Впровадьте мікророзмітку картки товару
Завдяки мікророзмітці пошуковий робот швидше зчитує та правильніше розпізнає картку з інформацією про товар. Мікророзмітка картки товару дуже важлива для пошукової системи Google, тому що відображається в сніпеті пошуковика і робить його більш клікабельним. Тому при просуванні інтернет-магазину в цій системі подбайте про те, щоб розмітка з інформацією наявності та цін була присутня.

Використовуйте валідний код
Під час верстки картки на мові розмітки HTML5 із застосуванням CSS використовуйте валідний код і стежте, щоб синтаксичних помилок було якнайменше. Важливість цього параметра з погляду просування - предмет активних суперечок у SEO-середовищі, але все ж таки краще, якщо на вашому сайті помилок у коді буде менше.
Сторінка товару, якого немає в наявності: видаляти чи залишити?
Рано чи пізно товар на складі закінчується. Зупиняється виробництво певної моделі продукції, виникають проблеми з логістикою, ви розумієте, що вам не вигідно продавати цей товар тощо. Що робити у такій ситуації? Рекомендуємо скористатися такими рекомендаціями.
Сповіщайте клієнта
Як тільки товар закінчується на складі, одразу повідомляйте про це вашого потенційного клієнта. Інформація про відсутність товарної позиції повинна одразу впадати у вічі і знаходиться у видимому полі на сторінці. Не вводьте клієнта в оману, не змушуйте його шукати інформацію про наявність на всій сторінці, втрачаючи на той час. І завжди контролюйте фактичну наявність на складі товару. Клієнт піде з сайту інтернет-магазину розчарованим, якщо в картці товару зазначено, що він є, а за фактом - ні.


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

Створіть конверсійний блок
Бажаєте утримати клієнта? Розмістіть у картці конверсійний блок. Наприклад, кнопку «повідомити про наявність» або «зателефонувати, коли з'явиться». Таким чином, ви отримаєте потенційного замовника, якого зможете конвертувати в клієнта в момент появи товару на складі або за допомогою холодного дзвінка з пропозицією вибору альтернативи.

Виправте мікророзмітку
Зверніть увагу, що в сторінки карток товарів, яких немає, необхідно вносити правки в мікророзмітку, особливо, якщо товар знятий з виробництва. У протилежному випадку валідатор мікророзмітки випустить помилку на таких сторінках. Це, у свою чергу, призведе до того, що мікророзмітка сторінки не сприйматиметься пошуковою системою.
Ми не рекомендуємо видаляти картку товару, якого немає. Не варто також показувати користувачеві сторінку з помилкою 404 або перенаправляти її на головну сторінку інтернет-магазину – це лише спричинить негативні емоції. Приберіть кнопку «Додати в кошик», оформіть фразу «немає» яскравим кольором, запропонуйте клієнту інші варіанти, спробуйте утримати його увагу іншими інструментами.
То яка вона - правильна продаюча картка товару в інтернет-магазині?
Підіб'ємо підсумки про створення ідеальної картки товару, що продає. Вона повинна:
- Бути розроблена у UX-дизайні;
- утримувати повний обсяг цінної інформації, яскраві фотографії, опис, ціну, інформацію про наявність;
- Мати УТП, заголовки, підзаголовки, лідогенеруючі кнопки та заклики до дії;
- Правильно оптимізована;
- Бути функціональною та зручною у користуванні.
Вам надається перелік рекомендацій, що допомагають створити ефективну посадкову сторінку для товару, але тільки ретельне тестування А/Б допоможе вам судити про результати. Присвятіть час тестуванню, проаналізуйте фактори поведінки та дії відвідувача на сторінці. Тільки в цьому випадку ви зможете знайти оптимальну структуру сторінки, розмістивши всі блоки в послідовності, яка є найбільш зручною для ваших клієнтів.
Бажаєте інтернет-магазин під ключ?
Сподобалася стаття? Ставте лайки та підписуйтесь на наш блог.