Новинка на маркетплейсе. Гайд. Как настроить карточку товара — советы в блоге

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

На редакции 1С-Битрикс «Малый бизнес» доступны два типа товара. Это «Простой товар» и «Товар с торговыми предложениями» (SKU). Не будем в очередной раз давать определения этих терминов, а приведём несколько примеров. К простым товарам относятся книга «Мастер и Маргарита», настольная игра «Монополия Классическая», комнатное растение в горшке. К товарам с торговыми предложениями Смартфон Apple iPhone 16 в разных цветах и с различным объемом памяти, моторное масло Shell Helix Ultra в канистрах разного объема. Сочетание свойств и создает конкретное торговое предложение – Черный iPhone 16, 256 Gb.

Большинство товаров, с которыми мы встречаемся в реальной жизни, относятся к товарам с торговыми предложениями. В отличие от «whatasoft: Интернет-магазина «Старт» решение «whatAsoft: Интернет-магазин «Малый Бизнес» поддерживает работу с такими товарами. В этой статье подробно разберем структуру карточки товара и выделим функциональные и визуальные блоки и элементы.

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

Визуально, первый экран карточки товара делится на следующие функциональные блоки (слева направо):

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

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

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

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

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

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

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

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

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

Если у товара заполнено детальное описание (во вкладке «Подробно»), то оно отобразится во вкладке «Общее». При заполнении свойств и их выборе через компонент каталога, появляется вкладка «Характеристики». В случае добавления файлов с инструкциями, сертификатами или другими материалами формируется вкладка «Документы». При включении настройки решения «Выводить дополнительную вкладку» в панели управления, на детальной карточке выводится общая вкладка с дополнительной информацией.

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

Добавление сопутствующих товаров осуществляется в настройках элемента под основными вкладками карточки формируется слайдер с их выводом.

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

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

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

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

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

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

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

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

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