Карточка товара это страница с основной информацией о товаре, включая, полное описание товара, набор кнопок управления (купить, добавить в корзину, похожие товары, выбор цвета т.п.). В этой статье я подробно расскажу обо всех элементах карточки товара. Наглядными примерами послужат карточки товаров крупных on-line продавцов.
Повторюсь, карточка товара или страница товара должна содержать максимально полную информацию о товаре, его фото, описания, комментарии и полный набор функциональных кнопок (купить, в корзину, выбор цвета и т.п.) и модулей навигации по сайту магазина.
Неся полную информацию о товаре. Карточка товара должна:
Согласно теории Якоба Нильсена о юзабилити Интернет ресурсов, другим исследованиям и технологиям позволяющим определить, как покупатель смотрит на страницу сайта, можно сформулировать два принципа оформления карточки товара:
Все содержание карточки товара должно «кричать» покупателю, «тебе это нужно» и мотивировать посетителя на покупку.
Мотивировать посетителя на покупку именно в вашем магазине должны отзывы о товаре, разнообразные правдивые фото товара, картинки призывы о качестве доставки и низких ценах, а также гарантии магазина, возможности возврата, скидки на доставку или бесплатная доставка и т.п. элементы раскрутки Интернет магазина.
Перейдем к практике размещения основных элементам карточки товаров. Для удобства разделим карточку товаров на 4 блока, по предполагаемой траектории движения взгляда посетителя.
На рисунке я показал идеальный шаблон карточки товара. Вверху название Интернет магазина (header), далее основные разделы принадлежности товара: категория, подкатегория товара.
А вот дальше давайте детально разберем каждый блок, о которых шла речь выше.
Блок 1 :Верхняя левая область страницы в активном окне
Хлебные крошки или Breadcrumbs это навигационная цепочка показывающая покупателю, где он находится в магазине относительно домашней страницы.
Поясню, зачем нужен этот элемент на карточке товара. Если Breadcrumbs есть на странице, то покупатель легко вернется на один, два, три, шага назад без лишнего поиска навигации, что, несомненно, удобно. Например, покупатель выбирает телевизоры. После долгого поиска, он оказался на странице с телевизором 42 дюйма, в разделе «Sony». Пользуясь Breadcrumbs, покупатель может вернуться, как в раздел «Sony», так и в раздел «42 дюйма» и продолжить поиск нужного товара.
Отсюда правило. Breadcrumbs должен быть виден на странице, и лучшее место для него, под header страницы, в блоке 1.
Лучшее размещение названия товара над картинкой или вверху страницы слева от картинки. Посетитель смотрит страницу сверху, слева направо и его взгляд попадает сразу на название товара. Тем самым он понимает, что попал именно тута куда нужно.
Здесь нужно понимать, что название товара на карточке товара несет еще и SEO нагрузку. Нельзя, ограничится в названии общим названием, например «Рубашка». Название товара на карточке нужно заключить в теги <h1></h1>. Во-первых, оно должно быть уникальным, во – вторых, оптимизировано: например: « Рубашка из хлопка фирмы Пронька, цвет синий, со склада в Москве». ( Более подробно об особенностях SEO оптимизации Интернет магазина читайте в статье сайта).
Здесь работает правило: Лучше смотреть, чем читать. Успех в привлечении покупателя к товару, или хотя бы, остановить покупателя на этой карточке товара это размещение высококачественной фотографии товара и галереи товара. Картинки должны полностью показывать товар, со всех сторон и если надо, показывать, как использовать товар.
Совет 1: Используйте картинки высокого качества и большого размера. Обязательно установите расширение для детализации товара (эффект лупы).
И опять SEO. Не забывайте тег img картинки на карточке товара, оформлять атрибутами title и alt.
<IMG SCR=»/images/…/…..gif» title=»Товар альфа» alt=»Товар альфа» />
И помните, поисковики учитывают текст в атрибутах alt и title, только картинок- ссылок.
Ссылка добавить в избранное может стать эффективным инструментом для привязки покупателей и их дальнейших покупок. Для грамотной монетизации инструмента «Добаить в избранное» нужно ориентироваться на следующие действия:
С кнопками социальных сетей «Поделись» на страницах Интернет магазина, я придерживаюсь следующий теории. При желании совершить покупку в Интернет магазине покупатель проходит две стадии. Первая, это намерение совершить покупку. Выражено в изучении товаров, изучении цен и контента магазина. Вторая, это лояльность или эмоциональная привязанность. Эта стадия наступает после совершения покупки и 20% покупателей хотят поделиться своей привязанности к купленному бренду.
Отсюда простой вывод, социальные кнопки «Поделись» размещайте на страницах подтверждения покупки (оплаты). Здесь они будут иметь больший успех. Правда стоит отметить, на практике кнопки социальных сетей размещают на всех страницах магазина.
Еще одно. Если на карточке товара есть видео, дайте покупателю возможность поделится этим видео. Так же если у вас качественное фото, можно разместить социальные кнопки сразу под фото товара. Это актуально при продаже одежды, особенно женской.
На этом верхняя левая область карточки товара оформлена. Переходим на верхнюю правую область внутри активного окна.
Блок 2. Верхняя правая область активного окна
Примечание: Некоторые модули блока 2 могут смещаться по шаблону карточки товара. Однако наличие их в шаблоне обязательно.
Для товара, если есть возможность, укажите две цены. Рекомендуемую розничную цену (РРЦ) и текущею цену продажи, если она конечно есть. Соответственно, при наличии двух этих цен укажите сэкономленные средства.
Совет: Исследования Amazon доказывают, что указание сэкономленных средств при покупке товара с сайта, значительно повышают вероятность покупки товара. Надпись о том, что вы экономите 20% при покупке данного товара с сайта Интернет магазина, стимулирует к покупке.
Эта функция также «подсмотрена» на Amazon.com. Она проста и вам знакома. Это возможность каждого покупателя проставить оценку товару по пятибалльной системе. Проставленные оценки «хорошо» и «отлично» подсознательно увеличивают доверие к товару.
В рассматриваемом блоке товарной карточки поместите ссылку на страницу с комментариями. «Живые» отзывы покупателей, гораздо интереснее для покупателя, чем сухие характеристики товара. По статистике:
Здесь важно еще одно. Не делайте искусственных комментариев и не убирайте негативные отзывы. Все на карточке товара должно быть натуральным, а не напоминать разыгранную пьесу.
Для создания отзывов, стимулируйте покупателей опросами, клиентскими вопросами и т.п. Выстраивайте с покупателями двустороннее общение.
Этот модуль поможет покупателю понять, что этот товар именно то, что он искал. Чем товар лучше аналогичных и почему покупателю стоит его купить.
Этот модуль необходим при торговле одеждой и обувью. Применяется этот метод не часто, но, по-моему, он интересен. В этом небольшом модуле укажите размеры одежды, которая одета на модель на фото. Например, вы торгуете куртками. Мужчина на фото демонстрирует эту куртку. Напишите, что «На модели на фото, одета куртка 50 размера, рост модели: 180 см, объем груди- 100 см и т.д.
Без информации о доставке не обойтись. На карточке товара кратко скажите о доставке и дайте ссылку на расширенную страницу о доставке.
Краткая информация о доставке избавит вас от претензий покупателей, а ориентировочная стоимость доставки сразу даст возможность покупателю подсчитать итоговую цену.
Вообще, чем покупателю проще просчитать итоговую стоимость, тем лучше. Если это удастся сделать на странице карточки товара, это будет очень хорошо. И еще одно, бесплатная доставка значительно поднимает конверсию товара.
Область покупки на карточки товара содержит всю основную информацию, позволяющую покупателю сделать выбор товара.
Область покупки содержит такую информацию, желательно в том же порядке:
Простая строка «Товар есть в наличие» или «Товар можно забрать сегодня» повысит уверенность покупателя и послужит финальной сценой спектакля конверсии.
Совет: Если вы размещаете цветовые опции в области покупок, то сделайте так, чтобы при выборе цвета покупателем, менялся и цвет на картинке товара. Это визуализирует покупку для покупателя. Только подбирайте образцы цветов в соответствии с цветами производителя.
Совет 1: Размер товара должен отображаться на карточке товара, а не открываться в отдельном окне. Переходы снижают конверсию.
Совет 2: Очень эффективна ссылка, рядом с размерами: выберете свой размер или таблица размеров. Сделайте таблицу размеров в модальном (всплывающем окне).
Совет 3: На карточке товара должны точно обозначаться какие размеры есть в наличии, какие закончились и какие ожидаются.
Размеры товара могут отображаться в боксах или в виде выпадающего списка. Для конверсии нет принципиальной разницы, показывать размер товара в таблице или в виде выпадающего списка. Здесь вопрос не в том, что вы хотите. А что позволит вам ваш шаблон самого Интернет магазина.
Это кнопка призыв. Она должна быть
Пояснения рядом с кнопкой помогут усилить уверенность покупателя в правильном действии.
Блок 3 . Область карточки ниже блока 1.
Это информационная область карточки. Здесь лучше разместить: подробные характеристики, обсуждения, формы доставки, отзывы о товаре.
Желательно, чтобы заголовок этой области был виден при открытии карточки.
Блок 4. Область под блоком 3 или под блоком 2
Это дополнения к товару на карточке. Здесь уместны модули: «С этим товаром покупают» или «Дополните свой образ». Также уместен модуль «Вы это смотрели ранее».
Совет: Показывая сочетание товара с другими товарами, вы увеличиваете вероятность покупки основного товара. Это особенно актуально при продаже одежды, особенно женской.
Используя большинство из предложенных модулей на карточке товара, и придерживаясь основных принципов построения шаблона карточки товара, вы достигнете две основные цели Интернет магазина:
Показанный в статье шаблон карточки товара, конечно не обязательный в исполнении шаблон. Если вы полистаете карточки магазинов, то увидите, предложенные блоки могут перемещаться, информация в блоках может увеличиваться или уменьшаться. Главное, понимание, какие элементы должны входить в карточку товара, чтобы максимально повысить вероятность покупки товара даже случайно зашедшему в магазин посетителю. Все в ваших руках.
Специально для сайта «Как сделать Интернет магазин«
Можно ли создать сайт самостоятельно? Можно, но это долго и не всегда эффективно. Прочтите про создание сайта под ключ и сделайте…
Почему восстановление данных и файлов лучше доверить профессионалам.
Что такое скрипты интернет магазина с примерами.
Что такое социальная коммерция и чем она отличается от интернет-магазина.
Где и как научиться создавать сайты.
Что такое WMS система управления складом.