Как сделать продающую карточку товара для интернет-магазина

Содержание

Фотография товара

В карточке товара фотография играет большую роль для его продаж: в отличие от оффлайн-магазина, где товар можно потрогать и посмотреть со всех сторон, при онлайн-покупке представление о товаре можно получить лишь из фотографий и описания

Поэтому важно не забывать об этой составляющей страницы каталога

Где же взять изображение товара для сайта? Есть несколько способов:

  • Самостоятельно делайте снимки товаров с разных ракурсов, чтобы у покупателей была возможность получить полное представление о том, как выглядит тот или иной товар. Это идеальный вариант, рекомендуем делать именно так.
  • Фотографии можно взять с каталога или сайта производителя, но учитывайте, что для продвижения в поисковых системах это не очень хороший способ.

Отсутствие фотографии в карточке товара сказывается на его продажах: никто не захочет покупать «кота в мешке», когда не понятно, как будет выглядеть товар, какого он цвета или размера.

Также можно размещать фотографии товара в использовании, либо делать видеообзоры.

Характеристики товара

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

Многие полагают, что характеристики важны только для техники, но и у многих других товаров вы также можете указать, например, производителя, размер (габариты), состав и т.д.

Ниже представлены два примера карточки товара «шкаф-зеркало». На одной из них представлены основные характеристики, размеры, а на другой — только производитель и артикул. Даже без тестирований и систем статистики можно однозначно сказать, что товар с характеристиками купят охотнее, чем без них, так как они позволяют покупателю понять, подходит ли им данный шкаф по размерам, материалу и другим параметрам.

Привлекательный внешний вид

Обычно карточный дизайн сильно полагается на визуальные элементы. Изображения — это сильная сторона такого дизайна

Дизайн-студии подтверждают, что использование изображений поднимает дизайн сайта или приложения на новый уровень — ведь они мгновенно и эффективно привлекают внимание. Упор на изображения автоматически делает карточный дизайн более привлекательным для пользователей

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

Сайт Dribbble.

Как спроектировать карточку

Карточки в пределах одного лейаута должны быть одинаковой ширины, а вот высота может быть разной. Максимальная высота карты ограничена доступным пространством платформы, но может быть временно увеличена (к примеру, чтобы отобразить поле с комментариями).

Высота карточки может быть фиксированной или переменной. Источник изображения: Intercom

С точки зрения дизайна, у карточки должны быть скругленные уголки и короткая тень. Благодаря скругленным уголкам карта выглядит как отдельный блок контента, а тени создают ощущение глубины.

Эти элементы привнесут в дизайн легкую визуальную пикантность, не отвлекая пользователя от содержимого. Кроме того, благодаря им карточка будет словно выпрыгивать со страницы. Также можно применить эффекты анимации и движения.

Источник изображения: Behance

Цена и кнопка «Купить»

Цены на товары обязательно должны присутствовать на сайте, и они должны быть заметны в первые секунды. Используйте крупный шрифт и контрастный цвет, который не будет теряться на общем фоне страницы.

Цену можно поместить рядом с кнопками «Купить» или «В корзину»: обычно они привлекают большое внимание, поэтому расположение стоимости рядом с ними будет наиболее выигрышным. Еще один хороший вариант, чтобы разместить цены, – это место прямо под названием

Посетители в первую очередь обращают внимание на верхнюю часть страницы, поэтому наименование товара – это первое или второе, что они увидят. А сразу после него заметят и цену

Еще один хороший вариант, чтобы разместить цены, – это место прямо под названием

Посетители в первую очередь обращают внимание на верхнюю часть страницы, поэтому наименование товара – это первое или второе, что они увидят. А сразу после него заметят и цену

Сравните отображение цен на двух разных сайтах:

В первом варианте цена выглядит более выигрышно.

Главная цель карточки товара – заставить посетителя сайта нажать на кнопку «Добавить в корзину», поэтому этот элемент должен быть доминирующим на странице.

Покупатели должны знать, каков будет следующий шаг, если они захотят купить продукт, а заметная кнопка «В корзину» – отличный способ подтолкнуть клиента в правильном направлении.

Как должна выглядеть эта кнопка? Используйте для нее контрастный цвет. Основное правило при выборе оттенка – это использование цвета, который контрастирует с текстом и фоном страницы.

Используйте заметную кнопку и текст: сделайте элемент достаточно большим, чтобы его можно было легко заметить, но не переусердствуйте, чтобы он не выглядел нелепо.

Проверьте правильность оформления карточки – если кнопку «В корзину» нельзя обнаружить в течение 3 секунд, значит, она недостаточно большая или контрастная.

Карточки административной панели (аналитика)

Дизайн панелей администратора различен, но одно едино: все админ-панели состоят из карточек. В зависимости от типа административной панели, в карточки включаются следующие элементы.

  1. Информация профиля.
  2. Уведомления.
  3. Быстрые ссылки.
  4. Элементы навигационного дизайна.
  5. Ключевые метрики.
  6. Графики и таблицы агрегированных данных.

Убедитесь, что для каждого для каждого из элементов создается соответствующий тип карточки.

Карточка приборной панели помогает пользователю решить, на каких данных сосредоточиться. С помощью понятного пользовательского интерфейса становится легче контролировать, какие именно данные должны быть на главной странице админ-панели.

Включайте только самую необходимую для пользователей информацию, по крайней мере на начальном экране. Если у вас есть наборы данных, которые легче понять, если рассматривать их вместе, то представьте их в одной карточке, но будьте осторожны, чтобы не запутать пользователя.

HTML код

Тег section здесь нужен только для выравнивания карточки относительно окна браузера. Сама карточка – это тег div с классом card. Разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. Только вот на полноценной странице сайта, будет много тегов div, поэтому привыкаем присваивать классы.

Куртка джинсовая

Выполнена из денима и декорирована искусственным мехом.

Далее, внутри карточного блока, прописываем все теги по порядку, двигаясь сверху вниз. Пришли мы вот к этому.

А теперь будем наводить красоту, а поскольку восприятие красоты очень индивидуально, то сделаем хотя бы аккуратно и опрятно.

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Как мы смотрим сайты

Эксперты в области юзабилити-тестировании проводили много опытов. Они использовали технологию eye-tracking. Это наблюдение за движением глаз пользователя, когда он смотрит сайты или работает с какой-то программой. На экране есть области, в которых глаз человека останавливается надолго, а есть слепые зоны, которые сознание пользователя не воспринимает.

Специалисты выделили две схемы: F- и Z-паттерны.

F-модель просмотра сайта

При такой схеме глаз человека заостряется не некоторых областях страницы. Они образуют контур буквы F.

Исследование провел в 2006 году Я. Нильсен. Оно отвечает на вопрос о том, как человек просматривает страницы сайта, но не относится к текстовому контенту, не учитывает клики человека по меню навигации или хлебным крошкам.

Человек не вчитывается в текст при таком просмотре страницы. Но если мы расположим важные элементы — фото продукта, преимущества или информацию о скидке — с учетом F-паттерна, человек даже при беглом просмотре карточки продукта получит те сведения, которые мы хотим до него донести.

Z-модель просмотра сайта

Другой метод просмотра сайта — Z-паттерн

Точки, привлекающие внимание пользователя, располагаются в форме буквы Z

Зона 1 получает больше всего внимания человека, а зона 4 — меньше всего.

Согласно исследованию Нильсена, Z-паттерн справедлив для первого экрана. Дальше пользователь изучает сайт, идя вдоль вертикальной оси буквы F. Кроме того, метод описывает метод просмотра для сайта, контент на котором располагается в форме сетки.

Это упрощенная схема, которую, однако, легко применить при дизайне конкретной карточки товара.

Почему важно располагать элементы в верном порядке

Человек — ленивое существо. Мы не будем искать информацию на неудобном сайте. Мы не станем вчитываться в текст описания товара, который набран 9 размером шрифта. Мы не будем ломать глаза, пытаясь рассмотреть фотографию с низким разрешением.

Поисковые системы заставляют веб-мастеров делать сайты удобными для посетителей. Поэтому информативная карточка товара — это залог и видимости сайта в поисковиках, и хорошего пользовательского опыта.

Подробное описание товара (преимущества товара)

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

Описание продукта не только способно заинтересовать посетителя и подтолкнуть его к покупке, но и является хорошим фактором для поискового продвижения товара.

Не нужно размещать на странице полотно SEO-оптимизированного текста: кратко и понятно опишите, что собой представляет ваш товар, из чего состоит, какие у него свойства, для чего используется. Информация должна быть полезной для пользователя и отвечать на его возможные вопросы

Подумайте, что обычно важно для покупателей того или иного товара

На примерах ниже показаны карточки одного и того же товара, но на разных сайтах. Слева мы видим полотно нечитаемого текста, справа же информация представлена не только кратко и понятно, но еще и структурирована, чтобы текст был легко читаем.

Область действия

Наличие

Представьте, какое разочарование. Вы искали товар, сравнили несколько магазинов и нашли самый выгодный сайт. Оформили заказ и узнали, что, оказывается, товара сейчас нет, а будет он неизвестно когда.

Некоторые магазины автоматически затемняют фотографии тех товаров, которые пока недоступны. Вы можете рассказать, какое количество товаров на складе, а можете сказать: «Сейчас в наличии 27 телевизоров. Каждый готов к отправке в ваш город».

Кастомизация продукта

Например, системные блоки для компьютера пользователь может кастомизировать под себя — выбирать цвет, форму, расположение кнопок.

Сделайте селектор, который покажет человеку, как будет выглядеть его покупка в итоге.

Этот пример я взял со всем известного китайского сайта.

Таблицы с размерами

Если человек не уверен в размерах, самое время ему помочь и подсказать. Заработаете еще пару классов для своего бренда и вызовете доверие.

У Wildberries таблица размеров выглядит так:

Можете сделать ссылку на отдельную таблицу со всеми размерами, которая открывается в новом окне. Так человек останется в карточке товара.

Выбор нужных опций

В том числе, и размеров. Есть два вида реализации:

  • выпадающий список — человек раскрывает его и выбирает нужный вариант;
  • вариант с ответами — фиксированный блок, пользователь отмечает галочкой нужный вариант.

Многие спорят, какой вариант лучше. Например, при чек-боксе призыв к действию помещается ниже. Да и если один товар имеет 5 вариаций, другой — всего две, если вы используете готовый шаблон для карточки товара, размер бокса будет фиксированным. И вариант с 2 опциями будет смотреться нелепо.

Amazon использует оба варианта — зависит от продукции. Вам же стоит учесть, что пользователи пока что охотнее предпочитают списки.

Призыв к действию

Работает тот же принцип, что и на посадочных страницах. Сделайте призыв пользователя к покупке заметным. Выделите кнопку другим цветом.

А если на товар распространяется акция — так и скажите: «Купить со скидкой».

Таким образом, кнопка добавления товара в корзину:

Кнопка «Купить в 1 клик»

Люди могут отложить покупку просто потому, что им лень оформлять заказ, вводить свои данные. Даже простой переход в корзину уже отсеивает некоторых покупателей.

Такая возможность упростит процесс заказа и сохранит вам покупателей.

Популярные статьи

  • 24.4K
  • 13 мин.

Честно про контент-маркетинг: примеры, методы продвижения, сроки и цены

Контент-маркетинг – это то, что мы сами используем и вам советуем – иначе потеряете новых клиентов. Люди выберут тех, кто с ними разговаривает: делится полезными советами, дает рекомендации по выбору и рассказывает о себе. Давайте разбираться, как работа с контентом помогает привлечь и удержать целевую аудиторию.

  • 19 июня 2018
  • Контент-маркетинг
  • 11 января 2018
  • Контент-маркетинг
  • 18.6K
  • 14 мин.

20 примеров рекламы от брендов-гигантов, за которую пришлось судиться

Усаживайтесь поудобнее – вас ждет подборка из 20 примеров рекламы от брендов, за которую им пришлось отвечать рублем.

  • 10 февраля 2021
  • Контент-маркетинг

Как создать карточку

Шаг 1) добавить HTML:

Пример

<div class=»card»>  <img src=»img_avatar.png» alt=»Avatar»
style=»width:100%»>  <div class=»container»>   
<h4><b>HTML CSS</b></h4>     <p>Architect & Engineer</p>
  </div></div>

Шаг 2) добавить CSS:

Пример

.card {    /* Add shadows to create the «card» effect */    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   
transition: 0.3s;}/* On mouse-over, add a deeper shadow */.card:hover {    box-shadow:
0 8px 16px 0 rgba(0,0,0,0.2);}/* Add some padding inside the card container */.container {   
padding: 2px 16px;}

С закругленными углами:

Пример

.card {    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);   
transition: 0.3s;    border-radius: 5px; /* 5px rounded corners */}/* Add rounded corners to the top left and the top right corner of the image */img {   
border-radius: 5px 5px 0 0;}

Совет: Перейдите в наш CSS Shadow Effects Учебник, чтобы узнать больше о тенях.

❮ Назад
Дальше ❯

Сколько вешать в граммах: определяем объем текста для карточек товаров

Как и любое другое дело, подготовку контента лучше начинать с анализа. Без него даже суперкрутой и опытный копирайтер точно не скажет вам, сколько символов текста нужно написать на страницу новенького айфона, муссового пирожного или пневматического гайковерта.

В интернете вы можете столкнуться с мнением, что для карточки товара достаточно 500–1 000 символов. Иногда да, но все-таки порой этого мало, а порой много. Вопрос состоит в том, о каком именно товаре идет речь: допустим для откидного болта DIN 444 с ушком достаточно только технических характеристик, цены и фотографии – тексты никто читать не будет. А вот для флагманского смартфона Samsung Galaxy S20 нужен практически целый лендинг – чтобы красиво презентовать все его преимущества, которые помогут сделать пользователю выбор.

Поэтому при определении объема и содержания текста карточки товара следуйте простой инструкции:

Выберите товар, для которого вы планируете подготовить текст. Пускай в нашем случае это будет смартфон Xiaomi Mi 10 Ultra

Посмотрите результаты поисковой выдачи по запросам с названием товара – «Xiaomi Mi 10 Ultra», «купить Xiaomi Mi 10 Ultra», «Xiaomi Mi 10 Ultra цена». Не забывайте, что нас интересует прежде всего не контекстная реклама, а органическая выдача – с этими сайтми вы будете конкурировать

Оцените обстановку – откройте 3–5 сайтов, чтобы узнать, как вообще обстоят дела с карточками товаров

Обратите внимание на три важных момента: объем и содержание текстов, функционал и дизайн страницы. Ведь чтобы хотя бы приблизиться к ТОПу, ваша карточка Xiaomi Mi 10 Ultra должна быть не хуже, чем у прямых конкурентов

Допустим, если у конкурентов в карточках товаров почти по 1 000 символов – то вам нужен текст такого же либо чуть большего объема. Что касается содержания, то ситуация аналогичная – смотрим и повторяем.

Таким образом, для страницы Xiaomi Mi 10 Ultra нужен текст объемом 1 000 символов, в котором будут кратко описаны преимущества смартфона с точки зрения выгодны покупателя

Важно указать подробные технические характеристики товара, крайне желательно предусмотреть поле для отзывов и вопросов, а также описать условия доставки

По аналогии с телефоном можно определить объем и содержание текста для карточки совершенного любого товара.

Что делать, когда товаров очень много

Бесспорно, если будете смотреть сайты конкурентов даже по каждому из пятисот товаров, станете заниматься этим примерно пару недель, а может и целый месяц. Когда позиций в каталоге еще больше, то временные затраты даже представлять страшно.

Можно обойтись и без таких жертв. Проанализируйте по 1–3 товарам из каждой категории, этого будет вполне достаточно, чтобы уловить суть.

Хорошая карточка дает исчерпывающую информацию о товаре

Иначе говоря, отвечает на все возможные вопросы потенциального покупателя. Поэтому если для дорогой двуспальной кровати с мягкой дизайнерской спинкой нужно 4 000 символов, чтобы рассказать обо всех ее преимуществах – подготавливайте текст именно такого объема. А если для подарочного пакета достаточно буквально одного предложения, то обойдитесь им – не заставляйте копирайтера писать бессмыслицу на 1 000 символов.

CSS стили

Всегда следует обнулять марджины и паддинги, так мы берем их под контроль.

Это мой любимый способ выравнивания элементов на странице точно по центру, идеально подходит, когда неизвестна заранее высота и ширина размещаемых элементов.

section position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); >

Создание тени (box-shadow) вокруг карточки, хороший способ обрамить карточку, выделить её из остального контента. Первые четыре цифры задают ширину тени, начиная сверху и двигаясь по часовой стрелке. Цвет тени, мы здесь задаем в формате rgba, ради значения 0.2 у альфа канала, чтобы тень была полупрозрачная, едва заметная и мягкая.

.card box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 200px; /* Ограничение ширины */ margin: auto; text-align: center; font-family: sans-serif; >

Фотография на 100% по ширине заполняет свой родитель – карточный блок.

Зададим названию карточки товара фиолетовый цвет.

В параграфе стилизуем описание: создаем поля вокруг текста по 4 пикселя, чтобы не прилипал к краям карточки, размер и цвет шрифта.

p padding: 4px; font-size: 14px; color: #757575; >

Цвет шрифта и размер для цены, выносим в отдельный параграф с классом price.

.price color: #d32f2f; font-size: 18px; >

Кнопку «В корзину», делаем самой заметной, но без фанатизма, убираем внешнюю и внутреннюю рамки (border, outline), выравниваем текст по центру (text-align) и растягиваем кнопку на всю ширину карточки (width: 100%). Так, чтобы кнопка была единым целым с карточкой товара, так смотрится гармоничнее, чем целая куча маленьких кнопочек на странице. Ведь карточка товара, обычно не в одном экземпляре находится на сайте.

.card button border: none; outline: 0; padding: 10px; color: #fff; background-color: #f44336; text-align: center; cursor: pointer; width: 100%; font-size: 18px; >

  1. Главная
  2. Шаблоны Bootstrap
  3. Магазин

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Отличная метафора

Карточки в интерфейсе — это отличная метафора, поскольку они очень напоминают настоящие, осязаемые карты. До появления мобильных устройств, они были повсюду: визитки, бейсбольные карточки, игральные карты и т.д. Карточки, как модель взаимодействия, получили достаточно широкое распространение. Поэтому пользователи на интуитивном уровне понимают, что карточка несет в себе.

Карточки — отличный способ передачи быстрых историй. Хороший пример из реальной жизни — бейсбольные карточки. С обеих сторон небольшой карточки содержится вся ключевая информация об игроке, которая вам нужна.

Каждая карточка представляет игрока. Источник картинки: liveauctiongroup

Карточки eCommerce (товары)

Правильный дизайн карточки товара очень важен, ведь он помогает конвертировать посетителя в покупателя. Правильная карточка товара обладает следующими свойствами.

Привлекает внимание.
Вызывает желание приобрести товар.
Мотивирует людей на покупку.
Продвигает сайт в результатах поиска.

Название товара размещается на самом видном месте: посетитель сразу поймет, что он пришел по адресу.

Если на товар действует специальное предложение, то укажите в ценовом блоке не только акционную цену, но и обычную, а также сумму экономии для покупателя.

Хорошее изображение расскажет покупателю всю важную информацию о товаре, поэтому для идеальной карточки товара необходимо высококачественное изображение.

Карточка товара на сайте: необходимые элементы

В первую очередь определимся, какая информация и какие элементы должны быть размещены на странице. Параллельно будем рассматривать, как правильно их презентовать клиенту.

Фотографии товара. Лучше представить несколько фотографий с разных ракурсов, чтобы пользователь смог полностью рассмотреть объект. Оформить изображения рекомендуем в виде слайдера. На примере ниже лампа показана как отдельно, так и в интерьере:

Расположить такой блок лучше в начале страницы, слева. Изображения необходимо добавлять высокого качества, рекомендуем сделать возможность просмотра увеличенной версии фотографии. Самый удобный вариант: после клика на фото выводить всплывающее окно с полной версией и возможностью ее закрыть:

Так пользователь сможет рассмотреть все детали товара и быстрее принять решение о покупке.

Краткая информация о товаре

То есть те параметры, на которые пользователь обращает внимание в первую очередь: название, статус о наличии продукции, основные характеристики, стоимость. Здесь же можно указать об участии товара в акции и добавить небольшое описание о нем

Располагать информацию лучше справа от фотографии товара:

Запомните, отсутствие цен отталкивает пользователей. Согласны, что не во всех тематиках можно указывать цены, но если пользователь сможет найти данную информацию у конкурентов, то он и уйдет к ним. Указывайте хотя бы примерные цены или расскажите, из чего складывается стоимость.

Выбор характеристик товара и форма заказа. Если у товара можно выбрать какую-либо характеристику, то нужно наглядно представить выбор вариантов, например:

Располагаем подобные кнопки рядом с краткой информацией.

И ниже, конечно же, стоит добавить форму заказа или кнопку добавления в корзину. Кнопка должна быть заметной и удобной для клика:

Процесс добавления товара в корзину должен быть заметен пользователю. Например, после клика по кнопке можно выводить всплывающее окно с предложением перейти в корзину:

Или поменять надпись на кнопке и добавить ссылку на корзину:

Главное, чтобы пользователь не пропустил данное изменение интерфейса и мог быстро перейти в корзину.

Какой должна быть форма заказа и страницы корзины, мы уже рассказывали в нашем блоге.

Для сложных тематик, где пользователю может понадобиться помощь специалиста, стоит добавить форму заказа консультации. Располагать ее лучше отдельно от формы заказа:

Основная информация. Во втором экране следует разместить полную информацию о товаре: описание, подробный список характеристик, обзоры, сертификаты, гарантии т.д.

Дополнительно стоит добавить краткую информацию о способах оплаты, доставки, условиях возврата и дополнительных услугах. Весь этот объем информации лучше разделить на части и разместить в виде вкладок. Так пользователю будет легче перемещаться по контенту, да и блок не займет много места:

Если вы можете рассчитать стоимость доставки и указать примерную дату получения товара, то вместо вкладки эту информацию нужно показать в кратком описании товара:

Отзывы клиентов. Подходит в основном для B2C-тематик. Если вы решили добавить на сайт систему отзывов и рейтингов, обязательно продумайте поощрение для активных клиентов и рассылки-напоминания после заказов. Иначе есть риск получить пустые блоки с отзывами.

О том, какими должны быть отзывы и где их лучше разместить, рассказали тут.

Или список похожих товаров:

Или блок с рекомендованными товарами:

Допускается показать все три вида подборок, но лучше выбрать одну-две, чтобы сильно не удлинять страницу.

И уже как элемент навигации внизу страницы стоит разместить блок с ранее просмотренными товарами:

Как НЕ надо делать: лишняя информация в карточке товара

А теперь перечислим то, что стоит убрать на странице.

Боковое меню. Пользователь уже выбрал интересующую его категорию и просматривает товары внутри нее, поэтому нет смысла дублировать меню

Лучше сосредоточить внимание на товаре, а выбрать другую категорию пользователь сможет в основном меню сайта:

Преимущества и текст о компании. Не стоит на страницах товара дублировать информацию с Главной, чтобы не нагружать их. Разрешается показать небольшой блок с преимуществами:

Новости, статьи. Если это не ссылки на подборки с товаром или рекомендации по его выбору, то лучше данные блоки оставить для Главной. Например, экспертная статья на странице фотоаппарата совсем не кстати:

Всплывающие кнопки

Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом , скрыта с помощью и немного сдвинута вниз за счет . При наведении курсора на карточку товара стили кнопки меняются следующим образом.

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер абсолютно позиционирован в блоке и равен родителю по ширине и высоте.

Далее мы стилизуем псевдоэлемент таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .

Благодаря правилу у псевдоэлемента , кнопки расположены ниже основного контента, и блок занимает всю площадь карточки.

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

Какой контент должна содержать карточка товара?

Один из важных моментов в создании успешной страницы – понимание того, какой визуальный стимул помогает привлечь целевых клиентов, заставить их реагировать так, как вы хотите. Пользователю достаточно всего 5–7 секунд, чтобы принять решение «Да, я здесь останусь» или «Нет, я уйду».

Поэтому не нужно забывать о таких важных моментах, как:

  • Принцип прототипичности – соответствие паттерному восприятию.
  • Интуитивность – понимание процесса принятия решения пользователем.
  • Убедительность – дизайн и контент страницы (в том числе стоит учитывать «психологию цвета»).

Удачная карточка товара включает в себя подробную и достоверную информацию о продукте. На странице обычно присутствуют:

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

Но, как вы понимаете, простое наличие этих элементов на товарной странице не означает ее высокой степени конверсии. Для 100% успеха потребуется соблюсти ряд правил и рекомендаций.

Ниже мы представили наиболее успешные факторы, которые станут отправной точкой в вашей работе над улучшением карточки товара. Однако советуем не забывать, что конечный результат зависит от типа вашего сайта и бизнеса. Все вносимые изменения и внедряемые методы стоит проверять при помощи А/В-тестирования, которое потребуется для дальнейшей оптимизации сайта.

Триггеры доверия

Гарантия возврата

Я лично до сих пор с сомнением отношусь к покупкам в интернете. Поэтому для меня гарантия того, что я могу возвратить товар, если он мне не понравится, существенна.

Поместите на первый экран информацию о том, что в какой бы город вы не отправили покупку, человек всегда сможет вернуть товар. Даже если в других разделах сайта вы пишите подробную информацию, что делать, если товар не подошел покупателю, обязательно продублируйте это в карточке товара.

Условия гарантийного обслуживания

Особенно важно для бытовой техники, смартфонов и гаджетов. Если дорогостоящий товар подлежит гарантийному обслуживанию, сообщите об этом

Человек проще совершит дорогую покупку, потому что у него будет больше уверенности — если вдруг с покупкой что-то случится, он может бесплатно выяснить и, возможно, вернуть деньги

Если дорогостоящий товар подлежит гарантийному обслуживанию, сообщите об этом. Человек проще совершит дорогую покупку, потому что у него будет больше уверенности — если вдруг с покупкой что-то случится, он может бесплатно выяснить и, возможно, вернуть деньги.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения