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

Обязательные элементы карточки товара

Вне зависимости от специализации магазина, товарная карточка должна содержать:

• фотографии
• краткую информацию о продукте
• выбор характеристик
• кнопку добавления в корзину или форму заказа
• подробные сведения о товаре
• отзывы
• ссылки на другие товары

Добавьте несколько фото в формате слайдера, чтобы клиенты могли увеличить изображения и рассмотреть товар со всех сторон. Желательно, чтобы в карточке были как фотографии товара отдельно, так и в процессе использования (мебель в интерьере, помада на губах, одежда на модели, идущей по улице, например). Лучшая позиция для блока с фото — слева в верхней части страницы.



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

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



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

• после клика показать pop-up с предложением перейти в корзину
• изменить надпись на кнопке и добавить ссылку для перехода в корзину

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

• подробное описание
• полный перечень характеристик
• срок и условия гарантии
• сертификаты

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

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

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

1. Похожую продукцию других брендов
2. Запчасти и комплектующие к товару
3. Продукцию, которую чаще всего покупают вместе с этим товаром

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

Полезные фишки для увеличения конверсии

Теперь, когда вы знаете основные элементы товарной карточки, перейдем к приемам «для продвинутых». Используйте их, чтобы получить впечатляющие продажи!

• Видеообзоры помогают увидеть товар в действии и увеличат время пребывания на сайте
• Добавление в список сравнения и избранное помогают покупателям быстрее выбрать наилучший вариант, а владельцам интернет-магазинов — понять предпочтения аудитории
• Заказ в один клик — опция для клиентов, которые хотят сделать покупку как можно скорее, без корзины, регистрации и других сложностей. Поместите такую кнопку рядом со стандартной кнопкой заказа (добавления в корзину)
• Покупка комплекта. Предложите клиенту набор, куда включен его товар, по выгодной цене (шапка и шарф, сумка и перчатки, смартфон и пауэрбанк, например)
• Когда продукт был добавлен в корзину, покажите покупателю полезные сопутствующие товары, о которых он мог забыть
  
  
• Уведомление о поставке. Если интересующего товара нет в наличии, предложи
• Скидка за регистрацию для мотивации новых пользователей к совершению покупок

Заключение

Карточка товара в интернет-магазине — это продавец, работающий 24/7 без отпусков, больничных и перерывов на обед. Чем внимательнее вы как дизайнер или разработчик отнесетесь к ее оформлению, тем более успешным получится весь проект. А это значит, что заказчик интернет-магазина останется доволен сотрудничеством и наверняка обратится к вам снова.