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

Дизайн карточек товара интернет-магазина

Продажа товаров через Интернет приобретает все большую популярность. Карточка товара (product card) представляет собой детальное описание продукта вместе с функциональными элементами (кнопка «купить/добавить в корзину», доступные цвета, размеры и т.д.).

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

Пример 1

 
  
Маленькое черное платье
 ₽ 1999 В корзину 
 

* < box-sizing: border-box; >.product-item < width: 300px; text-align: center; margin: 0 auto; border-bottom: 2px solid #F5F5F5; background: white; font-family: "Open Sans"; transition: .3s ease-in; >.product-item:hover < border-bottom: 2px solid #fc5a5a; >.product-item img < display: block; width: 100%; >.product-list < background: #fafafa; padding: 15px 0; >.product-list h3 < font-size: 18px; font-weight: 400; color: #444444; margin: 0 0 10px 0; >.price < font-size: 16px; color: #fc5a5a; display: block; margin-bottom: 12px; >.button < text-decoration: none; display: inline-block; padding: 0 12px; background: #cccccc; color: white; text-transform: uppercase; font-size: 12px; line-height: 28px; transition: .3s ease-in; >.product-item:hover .button

Пример 2

 
 
   
 
Маленькое черное платье
 ₽ 1999 
 
В корзину 
 
 
 

* < box-sizing: border-box; >.product-item < width: 300px; margin: 0 auto; padding: 10px 10px 5px 10px; border: 1px solid #eee; background: white; font-family: "Open Sans"; overflow: hidden; transition: .4s linear; >.product-img < transition: 1s ease-in-out; >.product-img:hover < transform: scale(1.1); >.product-img img < display: block; width: 100%; >.product-list < margin-top: 15px; >.product-list h3 < font-weight: 700; color: #39404B; margin: 0; text-transform: uppercase; font-size: 14px; line-height: 2; >.price < color: #E34D38; display: block; margin-bottom: 12px; >.stars < height: 14px; line-height: 14px; margin: 7px 0; >.stars:before < content: "\f005\f005\f005\f005\f006"; color: #EFB71C; font-size: 14px; font-family: FontAwesome; >.actions < border-top: 1px solid #eee; padding-top: 4px; font-size: 13px; height: 30px; line-height: 30px; >.actions:after < content: ""; display: table; clear: both; >.add-to-cart, .add-to-links < float: left; >.cart-button < text-decoration: none; color: #8C877C; padding-right: 20px; border-right: 1px solid #ddd; transition: .4s linear; >.cart-button:before < content: "\f07a"; font-family: FontAwesome; margin-right: 10px; >.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover < color: #E34D38; >.wishlist, .compare < color: #8C877C; padding-left: 20px; transition: .4s linear; >.wishlist:after, .compare:after < display: inline-block; font-family: FontAwesome; font-size: 13px; >.wishlist:after < content: "\f004"; >.compare:after

Пример 3

 
 
  
В корзину 
 
 
Маленькое черное платье ₽ 1999 
 

* < box-sizing: border-box; >.product-wrap < width: 300px; margin: 0 auto; background: white; padding: 0 0 20px; text-align: center; font-size: 14px; font-family: Lora; text-transform: uppercase; >.product-item < position: relative; overflow: hidden; >.product-wrap img < display: block; width: 100%; >.product-buttons < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transition: .3s ease-in-out; >.button < text-decoration: none; color: #c0a97a; font-size: 12px; width: 140px; height: 40px; line-height: 40px; position: absolute; top: 50%; left: 50%; border: 2px solid #c0a97a; transform: translate(-50%, -50%) scale(0); transition: .3s ease-in-out; >.button:before < content: "\f07a"; font-family: FontAwesome; margin-right: 10px; >.product-item:hover .product-buttons < opacity: 1; >.product-item:hover .button < transform: translate(-50%, -50%) scale(1); >.button:hover < background: black; >.product-title < color: #5e5e5e; >.product-title a < text-decoration: none; color: #2e2e2e; font-weight: 600; margin: 15px 0 5px; padding-bottom: 7px; display: block; position: relative; transition: .3s ease-in-out; >.product-title a:after < content: ""; position: absolute; width: 40px; height: 2px; background: #2e2e2e; left: 50%; margin-left: -20px; bottom: 0; transition: .3s ease-in-out; >.product-title a:hover < color: #c0a97a; >.product-title:hover a:after < background: #c0a97a; >.product-price

Пример 4

 
 
 
 
Маленькое черное платье
 ₽ 1999 
 

* < box-sizing: border-box; >.product-inner < width: 300px; margin: 0 auto; background: white; text-align: center; border-bottom: 2px solid #ebebec; transition: .2s linear; >.product-inner:hover < border-color: #bca480; >.product-wrap < position: relative; overflow: hidden; margin-bottom: 15px; >.product-wrap img < display: block; width: 100%; >.actions < position: absolute; left: 0; bottom: -20%; width: 100%; background: rgba(59, 62, 67, 0.75); transition: .3s linear; >.product-inner:hover .actions < bottom: 0; >.actions a < text-decoration: none; float: left; width: 33.33333333333333%; color: white; padding: 15px 0; transition: .2s linear; >.actions a:hover < background: rgba(59, 62, 67, 0.85); >.actions a:before < font-family: "FontAwesome"; >.add-to-cart:before < content: "\f07a"; >.quickview:before < content: "\f002"; >.wishlist:before < content: "\f08a"; >.product-info < padding-bottom: 10px; font-family: 'Noto Sans', sans-serif; >.product-title < margin: 0 0 10px 0; font-family: 'Noto Sans', sans-serif; >.product-title a < text-decoration: none; color: #1e1e1e; font-weight: 400; font-size: 16px; >.price

Пример 5

 
 
 
  
В корзину 
 
 
 
Маленькое черное платье 
 1999 
 
 

* < box-sizing: border-box; >.item < width: 300px; border: 1px solid rgba(0, 0, 0, .08); padding: 15px 0; margin: 0 auto; background: white; >.item a < text-decoration: none; outline: 0; >.product < padding: 0 15px; position: relative; >.thumb-img < position: relative; overflow: hidden; >.thumb-img img < width: 100%; display: block; >.thumb-img:after < content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: .3s ease-in-out; >.product:hover .thumb-img:after < opacity: 1; >.actions < position: absolute; z-index: 2; top: 100%; left: 0; right: 0; padding: 0 15px; text-align: center; opacity: 0; transition: .3s ease-in-out; >.product:hover .actions < top: 50%; opacity: 1; >.actions a < margin: 7px 6px; color: white; height: 30px; line-height: 26px; display: inline-block; border-radius: 30px; font-size: 12px; text-transform: uppercase; text-align: center; border: 2px solid white; background: transparent; transition: .3s ease-in-out; >.share-button < width: 30px; >.add-to-cart:hover < background: #A2927F; >.actions a:hover < border-color: #A2927F; background: #A2927F; >.share-wrap < display: inline-block; height: 30px; position: relative; margin: 7px 6px; >.share-item < width: 200px; margin-left: -100px; position: absolute; z-index: 3; bottom: 38px; left: 50%; opacity: 0; visibility: hidden; text-align: center; transition: .3s ease-in-out; >.share-wrap:hover .share-item < opacity: 1; visibility: visible; >.add-to-cart < padding: 0 20px; >.product-about < padding: 20px 0 0; text-align: center; >.product-title < font-family: 'Open Sans', sans-serif; line-height: 1.1; font-size: 16px; margin: 5px 0 15px; font-weight: normal; >.product-title a < color: #373737; >.price

Пример 6

 
 
 
 
 
Быстрый просмотр В корзину 
 
 
Маленькое черное платье
 
₽ 1999
 
 

* < box-sizing: border-box; >.border < width: 300px; margin: 0 auto; background: white; padding: 20px; border: 1px solid #F1E7E8; >.wrap < height: 100%; position: relative; >.product-wrap < position: relative; >.product-wrap:after < content: ''; background: rgba(73, 102, 162, .5); position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; transform: scale(.3); transition: .3s ease-in-out; >.border:hover .product-wrap:after < opacity: 1; transform: scale(1); >.product-wrap a < display: block; text-decoration: none; >.product-wrap img < display: block; width: 100%; >.loop-action < position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); transition: .3s ease-in-out; >.border:hover .loop-action < opacity: 1; >.loop-action a < text-decoration: none; display: block; border: 1px solid white; white-space: nowrap; text-transform: uppercase; padding: .5em 1em; font-size: 14px; line-height: 1.6; outline: none; position: relative; overflow: hidden; text-align: center; color: white; min-width: 160px; margin: 5px auto; transition: .3s ease-in-out; >.loop-action a:after < content: ''; position: absolute; left: -220%; top: -500%; width: 140%; height: 1000%; transform: rotate(45deg); background: white; z-index: -1; transition: .3s ease-in-out; >.loop-action a:hover < color: black; >.loop-action a:hover:after < left: 0%; >.border:hover < border-color: #4966A2; >.product-info < padding-top: 15px; >.stars < font-size: 14px; font-family: FontAwesome; >.stars:before < content: "\f005\f005\f005\f005\f123"; color: #F2453E; >.product-title < font-weight: normal; font-family: "Open Sans"; color: #162546; font-size: 18px; >.price

Пример 7

 
 
   
 
Маленькое черное платье
 
₽ 1999
 
 

.product-wrap < width: 300px; text-align: center; margin: 0 auto; background: white; >.product-image < position: relative; overflow: hidden; >.product-image a < display: block; >.product-image img < display: block; width: 100%; >.shadow < background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: .3s ease-in-out; >.product-wrap:hover .shadow < opacity: 1; >.detail-link < text-decoration: none; width: 50px; height: 50px; background: #ff7659; border-radius: 3px; opacity: 0; position: absolute; left: 50%; top: 50px; transform: translate(-50%, -50%) rotate(45deg); transition: .3s ease-in-out; >.detail-link:before < content: "\f06e"; font-family: FontAwesome; color: white; font-size: 20px; display: block; height: 50px; line-height: 50px; width: 50px; transform: rotate(-45deg); transition: .3s ease-in-out; >.product-wrap:hover .detail-link < opacity: 1; top: 50%; >.actions < width: 100%; height: 47px; position: absolute; bottom: -47px; right: 0; opacity: 0; transition: 0.5s ease-in-out; >.product-wrap:hover .actions < bottom: 0; opacity: 1; >.actions-btn < float: right; >.actions-btn a < display: inline-block; background: white; color: #555; width: 47px; height: 47px; line-height: 47px; text-decoration: none; transition: .3s ease-in-out; >.actions-btn a:hover < background: #ff7659; color: white; >.actions-btn a:after < font-family: FontAwesome; font-size: 14px; >.add-to-cart:after < content: "\f07a"; >.add-to-wishlist:after < content: "\f004"; >.add-to-compare:after < content: "\f079"; >.product-list < margin: 20px 0; font-family: 'Open Sans', serif; >.product-list h3 < color: #555; font-size: 15px; >.price

Пример 8

 
 
 
 
Маленькое черное платье
 
₽ 1999
 
 

* < box-sizing: border-box; >.product-wrap < width: 300px; text-align: center; background: white; margin: 0 auto; >.product-image < position: relative; >.product-image a < display: block; >.product-image img < display: block; width: 100%; >.shadow < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .1); opacity: 0; transition: 0.5s ease-in-out; >.product-wrap:hover .shadow < opacity: 1; >.actions < bottom: 15px; right: 15px; position: absolute; >.add-to-cart < opacity: 0; visibility: hidden; transform: translate(0, -50px); transition: 1s ease-in-out; >.actions a < background: #202020; color: white; display: block; height: 36px; line-height: 36px; width: 42px; transition: .3s ease-in-out; text-decoration: none; >.actions a:before < font-family: FontAwesome; font-size: 14px; >.add-to-cart-button:before < content: "\f07a"; >.add-to-wishlist-button:before < content: "\f004"; >.add-to-compare-button:before < content: "\f079"; >.quikview-button:before < content: "\f002"; >.actions a:hover < background: #67BFA6; >.product-wrap:hover .add-to-cart < opacity: 1; visibility: visible; transform: translate(0, 0); >.add-to-wishlist < opacity: 0; visibility: hidden; transform: translate(0, -50px); transition: .8s ease-in-out; margin: 9px 0 0; >.product-wrap:hover .add-to-wishlist, .product-wrap:hover .add-to-compare, .product-wrap:hover .quikview < opacity: 1; visibility: visible; transform: translate(0, 0); >.add-to-compare < opacity: 0; position: relative; visibility: hidden; transition: .6s ease-in-out; transform: translate(0, -50px); margin: 9px 0 0; >.quikview < opacity: 0; visibility: hidden; transition: .4s ease-in-out; transform: translate(0, -50px); margin: 9px 0 0; >.product-list < margin-top: 20px; padding-bottom: 20px; text-align: center; font-family: 'Open Sans', serif; >.product-list h3 < color: #555; font-size: 15px; font-family: 'Open Sans', serif; >.price

9 акцентов, как создать карточку товара для интернет-магазина

Большинство коммерческих предприятий имеют своё представительство в среде интернет. Осуществлять торговлю товарами и предоставление услуг позволяет интернет-магазин, это все знают в 2018 году. Но не каждый владелец торгового сайта осознаёт, насколько важно грамотно и качественно оформлять товарные страницы. А ведь интернет-магазин состоит из карточек товара чуть меньше, чем на 100%.

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

SEO-оптимизация

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

В данном пункте мы проводим такие манипуляции, как:

• создание семантических URL;
• повышение релевантности контента;
• создание эффективного визуального наполнения.

Семантичность URL означает их человеко-понятность. Вместо https://mysite /category2011/.html должно быть https://mysite /category/ zamena_termopastyi.html. То есть – читабельно и понятно, о чём страничка.

Релевантность текста повышается при введении правильных (ходовых) анкоров и их синонимов, устранением стоп-слов. Можно использовать себе в помощь сервисы Google Trends и Wordstat yandex.

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

Далее речь пойдёт исключительно о создании текста для карточки товара. Это важнейшее условие продвижения сайта и конверсивности страниц сайта.

Количество символов

Средний объём текстового описания для карточки товара колеблется в диапазоне от 500 до 1500 сбп. Минимальное количество символов будет уместным для интернет-магазина с широчайшим ассортиментом, который продаёт стройматериалы, крепёжные изделия, предметы одежды. Более объёмный текст не помешает при описании карточек дорогостоящих товаров, вроде бытовой и компьютерной техники, мобильных девайсов, эксклюзивной мебели.

Краткость – сестра таланта

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

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

Купить здесь и сейчас

Очень важно указать преимущества своего интернет-магазина. Карточка товара — это не только картинки, описание и характеристики. Надо не просто информировать клиента, но и подталкивать его к покупке. Основные инструменты воздействия – цена, скидки, акции, сроки обработки заказа и доставки, возможность взять в кредит, гарантия. При этом акции и скидки обязательно привязываем к скоротечности времени. Это порождает в посетителе стремление не упустить, и это лучший стимул.

Пересечение страниц

Есть ряд страниц сайта, которые очень важны для посетителя. Среди них – Гарантия, Сервис, Обмен и возврат, Программы лояльности, Контакты, График работы. К этой информации важно обеспечить максимально быстрый доступ. Поэтому будет разумным на странице карточки товара указать либо ссылки на эти страницы, либо сделать отдельные информационные модули. Пример приведён ниже:

Работа с фото и видео

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

Изображений товара на карточке должно быть минимум 2-3. Желательно, чтобы они увеличивались при клике. Также важно создавать уникальные тексты к картинкам, со стимулирующими покупку подписями.

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

Приоритетность товаров

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

Оригинальность

Бывает так, что продаваемый товар сам по себе неброский, а возможности привлечь покупателя скидками и акциями мы также не имеем. Тогда не помощь придёт смекалка и чувство юмора. Примеры? Согласитесь, что описание куриных яиц типа «цыплята без косточек» или мухобойки вроде «лучшее средство воспитания» вряд-ли оставит посетителя товарной карточки равнодушным. И все это нужно сопроводить креативным дизайном.

Соблюдение баланса

Многие недооценивают карточку товара как средство продвижения. Одной из главных ошибок является несбалансированность товарных страниц. Кто-то делает акцент на визуальном ряде, забывая о важности самого контента. Другие вообще не считают необходимым беспокоить себя размещением в карточке изображений. Мол, цена есть, описание тоже, а картинку можно найти в интернете. Обычно так и происходит. Покупатель находит сайт, где есть всё, что ему нужно. Там же он и осуществляет покупку. В общем, не повторяем чужих ошибок. В этом вопросе мелочей не бывает.

Поделиться:
Подпишитесь на новости

Оставьте ваш e-mail, чтобы получать подборки наших новостей.

Идеальная карточка товара: 19+ приемов, чтобы ваши товары продавали себя сами

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

Качественные фотографии

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

• большое разрешение;
• возможность приближения (функция лупы);

• основные ракурсы: все 4 стороны + верх/низ;
• фотографии в три четверти будут приятным дополнением;

• если у товара есть вариации (по цветам, принтам, узорам) — фотографии нужны для каждого варианта;

• для похожих вариаций (к примеру, футболка в розовом, светло-розовом, пурпурном цветах) нелишним будет фото трех товаров рядом для сравнения тонов.

Вот что говорит про фото редакционный директор Шерри Чигер из американской фриланс-платформы UpWork:

• для диванов, сумок, других товаров с внутренними отделами фото «внутри» не менее важно, чем «снаружи»;

• объединение картинок в формат 360 градусов — это способ демонстрации, максимально приближенный к реальности;
• детали важны. «Швы на постельных принадлежностях, рисунки ручной работы на посуде, швы и пуговицы на одежде (…) — на фотографиях должны быть показаны любые детали, которые отличают продукт от аналогичных, говорят о качестве изготовления или которые просто невозможно увидеть на основном изображении», — советует Шерри Чигер;

• изображения в контексте — это полезно. Если преимущество продукта в простоте применения или универсальности, не рассказывайте это, а покажите на фото (а лучше на видео). Вот как объясняет важность контекста Шерри: «Подумайте про швейцарский нож: одна статичная картинка не может показать бесчисленные лезвия и инструменты, которые делают товар уникальным. То же работает для одежды: фото на реальной модели показывает, как лежит ткань, к примеру, или как одежда сидит на фигуре. Также фотографии в контексте дают понимание размеров: когда вы видите вазу на белом фоне, вы не можете оценить, насколько она велика или мала. А когда та же ваза показана на столе возле стопки книг, у вас больше понимания ситуации».

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

Описание

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

№ 1. Информативность. В первую очередь текст должен быть полезным, а не рекламным/продающим. А значит — минимум прилагательных и интересных фактов без привязки к реальности; максимум характеристик, сценариев, особенностей, тонкостей, рекомендаций, ограничений. Польза для читателя — это когда каждый факт подан в формулировке «Почему вам будет от этого хорошо?».

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

№ 3. Честность. Честность — это не только не говорить ложную информацию, это еще и не скрывать правдивую. К примеру, если у продукта есть ограничения использования, их важно указать. Они все равно всплывут в процессе использования, и лучше, если читатель будет к этому готов. Иначе он заметит их, вероятно, скажет что-то в духе «Какие плохие эти [ххх], почему не предупредили!» и вряд ли вернется к вам снова.

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

Общий постулат: покажите читателю пользу — он захочет купить продукт без дополнительных ухищрений

Размер описания

В авторском деле нет готовой формулы в духе «хорошее описание ≤ 500 символов».

Правильная карточка товара в интернет-магазине должна содержать ровно столько текста, сколько нужно для передачи смысла — это может быть что 500, что 2000–3000 символов. Главное, чтобы текст на карточке было сугубо по делу. Не стоит писать в описании товара про компанию, оплату, доставку, возврат — для этого есть другие разделы сайта.

Если фраза не касается продукта с этой страницы — ее стоит удалить

Структура описания

Важно, чтобы текст про товар был написан с учетом маркетингового анализа. Для этого возьмите информацию про компанию и продукт; проанализируйте целевую аудиторию, определите, как она покупает продукт: какие вопросы ее волнуют, с какими возражениями сталкивается, какие сомнения у нее возникают. Все это — сценарий покупательского пути, то есть как человек движется от желания купить продукт к непосредственно покупке. Этот сценарий, скорее всего, будет включать 4–7 главных вопросов и/или возражений, которые возникают у покупателей. Сделайте из этих вопросов план вашего текста, чтобы карточка была максимально полезна пользователям.

Также мы рекомендуем писать текст из расчета, что его можно разделить на краткое и полное описание.

Базовый шаблон карточки товара может выглядеть таким образом:

1. Краткое описание. Первые 200–500 символов с основной информацией, в то же время — вступление к основному тексту. Остальной текст спрятан под тегом. В кратком описании/вступлении содержатся несколько фраз с главной информацией о том, что это, кому и когда полезно. Оно пригодится тем пользователям, которые уже знают, что им нужно, и просто хотят удостовериться, что этот товар — именно оно.
2. Полное описание. Разворачивается по клику на «Читать дальше» и содержит более детальное описание. Полное описание поможет пользователям скрупулезно изучить все тонкости товара и разобраться даже в самых маленьких мелочах. Его содержание может быть таким:

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

Шаблон — это шпаргалка и помощь, а не истина в последней инстанции

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

Видео

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

DemoUP, специалисты по продуктовым видео для ecommerce, приводят такие цифры:

• пользователи, просмотревшие видео, готовы к покупке на 45–90% больше;
• лучше всего видео работает для детских товаров, игрушек, электроники и техники, товаров из категории «сделай сам»;
• 50% покупателей идут смотреть продукт в местном офлайн-магазине перед покупкой в интернете, потому что сайт не позволяет составить достаточное визуальное впечатление;
• видео увеличивает длительность просмотра сайта на 2 минуты: магазины с видеообзорами товаров перестают быть просто точкой просмотра — они становятся местом исследования и поиска;
• это лучший способ объяснить функционал продукта — так считает 71% покупателей. Видео помогают лучше представить вещь;
• видеоролики уменьшают количество возвратов продукции. Конечно, у нас политика возвратов не такая мягкая, как в США, но прецеденты случаются, а значит, вопрос все равно актуален. Зрители видео лучше представляют, что они берут. Значит, тут уже меньше шансов, что покупка не понравится и ее решат вернуть. И если этот опыт покупки будет удачным, вероятность того, что довольный покупатель вернется к вам за следующей покупкой тоже выше.

Пример классных видео — обзоры на Comfy. К примеру, вот видеообзор на стайлер для волос:

Небольшой анализ видео:

• длительность 5 минут — можно показать главное и не надоесть; пользователю удобно смотреть ролик по ходу дела, не откладывая на «когда освобожусь»;
• есть актуализация вопроса + повышение ценности: «Как сделать укладку, как у знаменитостей»;
• мгновенная демонстрация, как это работает → какой результат;
• близкая съемка товара с разных ракурсов — создает впечатление живого просмотра в магазине;
• более близкая демонстрация использования для понимания принципа работы;
• рассказаны технические характеристики и объяснение, что они значат: «У щипцов бесщеточный мотор — он автоматически накручивает прядь на нагревательный элемент»;
• показаны и объяснены все настройки и их значение для пользователя;
• есть тонкости и личный опыт, которые снимают страхи и возражения: «Я боялась, что волосы закрутит и запутает — но все нормально».

Яркий пример — демонстрация диванов-трансформеров от Golden Plaza. Бюджетное 40-секундное видео без слов снято прямо в павильоне, но ни один текст не справился бы лучше.

Это тот случай, когда лучше 1 раз увидеть.

Цена

Указание цены и доступности — очень чувствительные вопросы для пользователя. Любые скрытые платежи, непонятные перерасчеты — все это отпугивает потенциальных клиентов. То же самое делает неопределенный статус наличия на складе: «Уточняйте у продавца» или любые варианты кроме типовых «Есть в наличии», «Нет в наличии», «Под заказ». Если только товар не эксклюзивен, люди легко могут уйти к конкуренту с более прозрачной информацией.

Основные правила просты и незамысловаты:

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

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

Кнопки Добавить в корзину и Купить в один клик

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

Вот удачные примеры карточек товаров, когда кнопка размещена возле цены, она контрастна и хорошо заметна на странице:

Важно! Как и любой другой прием, кнопки покупки стоит применять осознанно. Если ваш продукт — Rolex Datejust 41 за 12 000 $+, то кнопка «Купить в один клик» (да и «Добавить в корзину» тоже) будет слегка неуместна. Как и вся типичная схема заполнения карточки товара. Любой шаблон — это шпаргалка на типовые случаи, но никак не универсальное руководство к действию.

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

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

• если вы продаете товар в разной комплектации (к примеру, кухонные гарнитуры), разработчики могут сделать калькулятор для быстрого подсчета общей стоимости;

• напомните клиентам условия доставки, оплаты перед заказом, укажите гарантию;

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

Отзывы и рейтинг товара

По данным Vendasta, отзывы читают 92% покупателей, ориентируются на них больше 88%, специально их ищут не реже раза в месяц от 43% людей, еще 88% доверяют отзывам так же, как и личным рекомендациям. Рейтинг со звездочками большинство людей вообще воспринимает как топовый фактор оценки бизнеса. Мотивирующая статистика, не так ли?

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

Что важно знать про отзывы и рейтинг:

• 73% людей формируют мнение после прочтения до 6 отзывов;
• только 12% людей готовы читать 10 отзывов и больше, поэтому следите, чтобы на первом месте были информативные заметки, а не «все ок» или «ну такое»;
• верифицированные отзывы стабильно вызывают больше доверия, поэтому задумайтесь над системой подтверждения покупки в магазине, как на MakeUp;

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

Если ваш продукт не выбирают на основе отзывов, их можно не указывать — здесь все упирается в понимание своих клиентов

В некоторых сферах отзывы играют бОльшую роль (детские товары, одежда, вещи для дома), в некоторых — меньшую (комплектующие для авто, расходники для шиномонтажа). Если ваш продукт не выбирают на основе отзывов, их можно не указывать — здесь все упирается в понимание своих клиентов. Как и всегда.

Рекомендуемые и связанные товары

У любого бизнеса в любой нише есть только 2 способа увеличить прибыль:

• привлекать новых клиентов, чтобы делать больше заказов;
• делать так, чтобы текущие клиенты заказывали больше, то есть увеличивать средний чек.

Понятно, какой способ выгоднее, правда?

Блоки типа «С этим товаром покупают», «Похожие», «Рекомендуемые», «Вы недавно просматривали» — это типичный пример up-sell, то есть допродаж.

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

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

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

Не ждите появления новых потребностей — предугадывайте их у своих клиентов.

Полезные фишки

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

Вишлист / избранное

Wishlist (список желаний) и избранное довольно похожи, хотя это и не одно и то же. Вот как могут отличаться технические возможности таких опций:

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

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

Что говорит статистика? По результатам эксперимента Metrilo, вишлисты повысили продажи магазина в среднем на 19,3% за полгода с момента внедрения (на основе данных 50 магазинов). Неплохо, правда?

Вот 5 главных советов насчет их использования:

1. Несмотря на небольшую разницу, вишлисты и избранное остаются довольно схожими функциями, поэтому мы не рекомендуем использовать сразу два элемента — это может запутать пользователя. Что выбрать? Оцените свою аудиторию и специфику покупки товаров. Проверьте обе функции. Используйте ту, которая показывает лучший результат.
2. Списки должны быть удобными: добавление в один клик со страницы товара без переключения на другую страницу (чтобы не уводить пользователя от его поиска); перемещение из списка в корзину тоже в один клик; сам список интегрирован с дизайном сайта, чтобы постоянно напоминать пользователю о «хотелках».
3. Списки должны быть полезными и помогать: разрешите пользователям делиться ими с друзьями, публиковать в соцсетях, подписываться на чужие. Сделайте их инструментом, которым люди будут пользоваться постоянно.
4. Используйте данные из списков в маркетинговых активностях. Товар поступает в продажу? Настройте рассылку уведомлений про доступность всем, кто добавил его к себе. Грядут праздники? Напомните клиентам про их желания и мотивируйте их исполнять. Особых поводов к покупке нет? Тогда напишите подробный гайд по выбору и использованию самых востребованных продуктов и разошлите анонс всем, у кого эти товары есть в списках.
5. Используйте вишлисты для создания списков ремаркетинга и настройки новых рекламных кампаний, которые «догреют» потенциальных клиентов и конвертируют их.

Сравнение товаров

Сравнение товаров, казалось бы, никак напрямую не может повысить именно конверсионность. Тем не менее, этот инструмент регулярно попадает в западные подборки в духе «20 способов поднять продажи интернет-магазина» и иже с ними. Стоит задуматься, не так ли?

Функция сравнения улучшает пользовательский опыт (UX), потому что закрывает потребность пользователей — необходимость сравнивать и выбирать между несколькими вариантами одной вещи

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

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

Уведомление о скидках

Функция «Сообщить о снижении цены» или «Следить за ценой» (как на Rozetka) может повысить продажи: она мотивирует ждать выгодные условия у вас, а не идти к конкурентам, и не дает забыть про «необязательные к покупке» товары из-за уведомлений.

Кнопка обратного звонка

Uiscom.ru указывает на прирост обращений до 27% после добавления кнопки обратного звонка; опыт Ringostat.ru говорит о 48%; а у одного из клиентов Nextel.com.ua количество обращений с кнопкой выросло на 44%, продажи по всем заявкам в 3 раза, а вместе с функцией автопрозвона общее количество продаж увеличилось до 90%. Всегда бы так, да?

Если в ваших планах — лучшая карточка товара, вот что стоит также знать:

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

Всплывающий чат

NeilPatel, один из западных евангелистов диджитал-маркетинга, указывает на возможность повысить коэффициент конверсий на 45% при помощи всплывающих чатов для консультаций. Правда, с оговоркой, что «лайв-чат может стать поворотным моментом при правильном использовании, но (…) большинство компаний не знает, как извлечь из него максимальную пользу».

• указывайте реалистичные сроки ответа — лучше честно предупредить про ответ в течение 15 минут и ответить за 10, чем пообещать 5 и не ответить никогда;
• кнопка развертки всплывающего чата традиционно располагается справа или слева снизу.

SEO-оптимизация карточки товара

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

Хлебные крошки

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

Вот как она выглядит:

Путь пользователя важен и для SEO , и для комфортной навигации пользователя и перехода на страницы верхнего уровня (при этом второе — следствие первого).

При реализации учитывайте:

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

• на главной странице навигационная строка отсутствует — циклические ссылки ухудшают ранжирование сайта;

• кликабельны (с запрятанным URL) все названия страниц, кроме текущей — по той же причине.

Микроразметка Product

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

Более организованный и детальный вид сниппета повышает кликабельность, поэтому о микроразметке стоит позаботиться в самом начале работы над продвижением. Микроразметка schema.org (ruschema.org на русском) универсальная и используется при продвижении что под Google, что под Яндекс.

Мета-теги и название товара

Название зависит от ряда факторов, в том числе — да-да, мы снова за свое — от целевой аудитории.

Как они связаны?

Разные категории пользователей ищут по разному

К примеру, возьмем интернет-магазин ваз. Как можно их искать?

• «ваза стеклянная» — так наверняка будет искать покупатель на верхних этапах воронки продаж, который еще не определился с покупкой, но интерес к теме уже проявляет;
• «ваза стеклянная Pasabahce» — более узкий запрос показывает более сильную заинтересованность, а значит, более сильный интент, намерение покупки, ведь человек более уверен в своих желаниях;
• «ваза Pasabahce FLORA 43966 26 см» — по названию и артикулу будут искать ассистенты строительных и дизайн-студий, которые делают покупки по четкому списку рекомендованных предметов, составленных дизайнером; или, к примеру, менеджеры кафе и ресторанов, которые ищут конкретную вазу взамен такой же разбившейся.

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

Чтобы охватить максимум целевой аудитории, мы рекомендуем использовать для названий универсальные схемы такого типа:

[Тип продукта] — [бренд] — [название модели] — [спецификация (размер, цвет)] — [артикул]

Традиционная схема тайтла для одежды и обуви:

[Бренд] — [пол] — [тип продукта] — [спецификация (размер, цвет, материал)]

Для сезонных вещей:

[Повод/сезон] — [тип продукта] — [бренд] — [спецификация (размер, цвет, материал, вес, длина)] — [артикул]

Для книг:

[Название] — [автор] — [формат (электронная или бумага (твердая/мягкая обложка)] — [тип/жанр (фэнтези, научпоп, сай-фай)]

Важные для SEO-продвижения теги — это тайтл, дескрипшн, альт картинок. И если для небольших интернет-магазинов их еще можно прописывать вручную, то при ассортименте 50+ начинаются сложности. Впрочем, решаемые: SEO-специалист может дать задачу разработчику настроить генерацию тегов title, description и H1. Так вы сэкономите время на ручной работе и получите автоматически заполненные поля на основе выбранного шаблона и подстановки ключей.

Варианты товара

Если вы продаете товар с разными вариациями (по цвету, размеру, материалу, принту), это все еще один товар. А значит, для него не нужно создавать разные страницы — достаточной одной с опцией выбора варианта.

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

Почему не нужно удалять карточку товара, которого нет в наличии

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

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

Нужны ли уникальные описания для каждого товара?

Если кратко: нет. Хлебопечка — это хлебопечка, и никому не станет лучше, если она станет «устройством для тестозамешивания и выпекания хлебобулочных и иных изделий». Поэтому не стоит бояться низкого процента технической уникальности в карточках товарах — такое попросту неизбежно, ведь активный словарный запас на самом деле не такой уж и большой. И это нормально.

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

Процент уникальности не должен быть в ущерб здравому смыслу

В заключение

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

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

Как сделать карточку товара на CSS

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

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

Демонстрация

Согласно выше описанному порядку, набросаем HTML структуру.

HTML код

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

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

3 450 руб.

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

В корзину

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

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

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;
>

Наш шедевр готов.

Создано 26.11.2018 10:18:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.