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

Какой должна быть карточка товара?

  1. Подробной. Многие интернет-магазины пренебрегают некоторыми элементами: не публикуют описание, ограничиваясь одними характеристиками, дают одно маленькое фото, не оставляют возможности написать отзыв. Поэтому сегодня расскажем об идеальной структуре карточки, не забывая ни одну из составляющих.
  2. Продающей. Каждый элемент карточки должен мотивировать посетителя на покупку. Описание - рассказывать о проблеме и закрывать боли. Фотографии - объяснять, как привлекательно товар выглядит. Видеоролики - объяснять, как им пользоваться. Иконки соцсетей - дать возможность делиться в соцсетях. Если карточка не будет продавать - покупатель сам толком не понимает, зачем ему этот товар нужен, мотивация слабая.
  3. Удобной. Все элементы карточки расположены в ней не абы как, а со смыслом. Например, доказано, что взгляд покупателя скользит сначала в верхний левый угол, затем - вправо, затем - вниз и влево, и так далее. Наиболее яркие, выделенные особым шрифтом блоки воспринимаются как самые важные. Получается, карточка должна еще соответствовать принципам UX и UI дизайна - быть удобной посетителю, вести его до совершения покупки, добавления товара в корзину.

карточка товара

Основные элементы карточки товара

1. Название товара

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

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

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

2. Цена

Цена - самый важный фактор, на основании которого посетитель страницы принимает решение. Если цены нет и она не бросается в глаза - пиши пропало. Если на товар есть скидка - пишите сразу же. Можно использовать стандартные приемы: перечеркнутая старая цена и рядом - новая, или сумма скидки (30 процентов или, как вариант - “вы экономите 990 рублей”).

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

Где размещать? Рядом с названием, в главном блоке - чтобы посетитель сразу увидел.

цена на товар

3. Сведения о наличии

Очень важный пункт, о котором почему-то многие забывают. В итоге посетитель узнает неприятную правду - что товар закончился - уже тогда, когда изучит карточку и нажмет кнопку “Купить”.

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

Где размещать? В главном блоке, рядом с названием и ценой.

4. Фотография продукта

Да не одна, а побольше! Подумайте о покупателе - он хочет видеть товар со всех сторон, крупным планом и желательно - в реальных условиях. Например, если вы продаете одежду - пригласите модель и проведите профессиональную фотосъемку. Если детские игрушки - дайте их в руки ребенку, пусть играет. Такие “живые” фото повышают доверие покупателей, а заодно и конверсию страницы.

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

Что вам это дает? Привлекает внимание посетителя, дает возможность рассмотреть товар. Кстати, воспользуйтесь фишкой, которую использует, например, “Алиэкспресс”: при движении мышкой отдельные части фото увеличиваются. Такое удобно делать при продаже товаров с мелкими деталями, которые хочется рассмотреть подробнее: например, ювелирные украшения, одежду, сумки и так далее.

Где размещать? В главном блоке, сразу под названием. Если фото много - скомпонуйте их рядом. Также рядышком можно уместить видео - но об этом чуть позже.

фото товара

5. Кнопка “Купить”(или “Добавить в корзину”)

Самый главный СТА-элемент тоже не годится прятать вглубь карточки. Но какой же выбрать - “Купить” или “Добавить в корзину”? На эту тему до сих пор ведутся споры. Говорят, что “Добавить в корзину” ни к чему не обязывает посетителя - ему не надо сразу делать заказ, достаточно просто сложить выбранное в корзину - как в супермаркете. И выложить на кассе, если передумали или не хватило денег. Однако кнопка “Купить сейчас” повышает конверсию аж в два раза - этот призыв к действию намного эффективнее! Поэтому выбирать вам - исходя из знания вашей целевой аудитории.

Что вам это даст? Целевое действие, ради которого все и затевалось. Человек покупает и оплачивает заказ, вы получаете прибыль.

Где размещать? На самом видном месте. Здесь как в лендинге - можно разместить кнопку СТА два раза: в главном блоке и ближе к концу. Впрочем, достаточно будет и одного раза - рядом с ценой, сведениями о наличии и основными характеристиками.

кнопка купить

6. Сведения о доставке

Буквально одной-двумя строчками - расскажите кратко об условиях доставки. Например, бесплатная доставка, курьером или самовывозом, в течение 3-5 дней. Можно также дать ссылку на отдельную страницу доставки.

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

Где размещать? Обычно в главном блоке - рядом с ценой, кнопкой “Купить”.

7. Иконки соцсетей

В XXI веке гаджетов и соцсетей, когда люди стремятся поделиться с окружающими моментами из своей жизни, просто глупо не воспользоваться таким инструментом, как кнопки для расшаривания. Нажав на эту кнопку, посетитель может поделиться информацией о товаре на своей странице.

Что вам это дает? Во-первых, бесплатную ссылку на сайт с внешних источников. Во-вторых, потенциальных новых клиентов - всех тех, кто увидит эту запись в ленте соцсетей.

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

иконки соцсетей

8. Характеристики

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

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

Где размещать? Иногда характеристики пишут в блоке описания, вместе с текстом. Мы бы советовали самые основные писать в главном блоке - рядом с названием и ценой, а все остальные - в дополнение к описанию.

9. Описание

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

Что это дает? Воздействует на мотивацию и эмоции посетителя. Особенно хорошо это работает с женской ЦА и товарами, для покупки которых свойственно спонтанное решение. И вот тогда описание, бьющее точно в цель, способно заставить человека нажать на кнопку “Купить сейчас”.

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

Где размещать? Или в главном блоке - если описание краткое, или в нижнем - вместе с отзывами и характеристиками.

описание товара

10. Отзывы других покупателей

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

Что вам это дает? Благодаря отзывам клиент может купить товар, даже если сначала не собирался или сомневался. Все просто: срабатывает стадный инстинкт. Если другие берут и хвалят - значит, товар хороший, размышляет посетитель и жмет на кнопку “Купить”. Не зря их называют социальными доказательствами.

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

Где размещать? Точных рекомендаций, где именно разместить отзывы, нет. Какие-то магазины делают это в блоке описания - вместе с завлекательным текстом и характеристиками. Кто-то - в главном блоке рядом с ценой и кнопкой “Купить”. Главное - выделить этот блок, чтобы посетитель не пропустил его.

Дополнительные элементы

1. Видео

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

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

Где размещать: лучше рядом с фотографиями, в главном блоке.

видео контент

2. Информация о других акциях

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

Что вам это даст? Велика вероятность, что посетитель пройдет по ссылкам пусть даже из любопытства и купит товар. А вы повысите средний чек.

Где размещать? Обычно дополнительные элементы размещают внизу страницы, после отзывов и описания.

3. Товарные рекомендации

Вариантов много: “Похожие товары”, “С этим товаром также смотрят…”, “Вы недавно смотрели…” и другие. Нам больше нравится “Составь образ”, где предлагается подобрать к конкретной вещи конкретные же детали. Например, к платью - сумочку и туфли.

Что вам это дает? Увеличение шанса на совершение покупки в первом случае (конкретно этот товар не подошел, но можно выбрать из похожих рекомендаций) и возможность увеличить средний чек - во втором.

Где размещают? Внизу страницы.

товарные рекомендации

4. Рассказ о бренде

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

Что вам это дает? Дает покупателю возможность сравнить бренды и сделать выбор. А также подобрать другие товары этого производителя.

Где размещать? Лучше давать такую информацию отдельной ссылкой либо кратко вписать рассказ в описание.

5. Продающие инструменты

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

Что вам это дает? Эти фишки подталкивают посетителя к совершению покупки. Даже если он сомневался - вы заботливо предлагаете решение проблемы, отметая возражения.

Где размещать? Лучше в верхней части - чтобы сразу зацепить посетителя за живое и не дать закрыть страницу.

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