Тип компонента Карусель товаров

Что это за компонент

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

Если говорить совсем просто, это прокручиваемый блок с товарами, где клиент видит:

• изображение товара
• категорию
• название
• цену
• кнопку добавления в корзину

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

Когда использовать именно этот тип

Карусель товаров подходит, если нужно:

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

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

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Карусель товаров.
2. В карточке компонента заполняется заголовок.
3. Затем в компонент добавляются нужные товары.
4. После сохранения компонент размещается на странице.
5. В mini app клиент видит горизонтальную ленту карточек товаров и может листать ее свайпом.

1. Как создать компонент Карусель товаров

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Карусель товаров.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Заполните заголовок блока.
7. Нажмите Добавить товары.
8. Выберите нужные товары из списка.
9. При необходимости поменяйте их порядок.
10. Сохраните компонент.
11. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Карусели товаров используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В повседневной работе он нужен редко.

Тип

Для этого документа тип всегда будет Карусель товаров.

Он определяет:

• состав полей компонента
• внешний вид блока у клиента
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

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

Наименование

Это рабочее название карусели в Omnis.

Лучше использовать понятные названия, например:

• Популярные товары на главной
• Новинки недели
• Подборка со скидками
• Рекомендуемые товары

Приоритет

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

Активирован

Этот переключатель помогает:

• включать рабочую карусель
• хранить черновики
• временно скрывать блок без удаления

3. Основные поля самой карусели

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

У этого компонента набор полей очень простой: заголовок и список выбранных товаров.

Заголовок

Это заголовок блока, который клиент видит над каруселью.

Он помогает объяснить смысл подборки. Например:

• Популярные товары
• Вам может понравиться
• Новые поступления
• Хиты продаж

Практический совет:

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

Добавить товары

Эта кнопка открывает выбор товаров, которые будут показаны в карусели.

После выбора товары добавляются в список компонента.

Важно понимать:

• в карусель добавляются конкретные товары вручную
• один и тот же товар повторно в список обычно не добавляется
• порядок товаров можно менять отдельно после выбора

4. Список товаров внутри компонента

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

В этом списке обычно видно:

• миниатюру товара
• название товара
• порядок показа

Изменение порядка товаров

Товары можно переставлять местами.

Это полезно, если нужно:

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

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

Удаление товара из карусели

У каждой позиции есть удаление.

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

Это нужно, если:

• товар больше не должен участвовать в подборке
• товар был добавлен по ошибке
• подборка изменилась

5. Какие данные клиент видит в карточке товара

Важно понимать: внутри Карусели товаров не настраивается вручную текст каждой карточки.

Карточка берет данные из самого товара.

Обычно клиент видит:

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

Это значит, что качество самой карточки зависит не только от компонента, но и от того, насколько аккуратно заполнен сам товар в каталоге.

Что важно проверить у товара заранее

Перед тем как добавлять товар в карусель, полезно убедиться, что у него:

• есть изображение
• заполнено понятное название
• указана цена
• выбрана корректная категория

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

6. Как Карусель товаров выглядит у клиента

В mini app этот компонент отображается как горизонтальная лента карточек товаров.

Клиент может:

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

Переход в товар

Если клиент нажимает на саму карточку, открывается страница этого товара.

Это делает Карусель товаров не просто декоративным блоком, а полноценной точкой входа в покупку.

Добавление в корзину

У каждой карточки есть кнопка добавления в корзину.

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

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

Если товары не добавлены

Если компонент сохранен без товаров, клиент увидит пустой блок без полезного коммерческого содержания.

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

7. Общие настраиваемые свойства компонента

Как и у других компонентов, у Карусели товаров действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить карусель от соседних блоков
• сделать экран аккуратнее
• дать карточкам больше воздуха

8. Собственные настраиваемые свойства Карусели товаров

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

Заголовок блока

• color-title - цвет заголовка
• size-title - размер заголовка
• weight-title - насыщенность заголовка

Эти свойства помогают сделать заголовок:

• более заметным
• более спокойным
• ближе к фирменному стилю витрины

Размер и форма карточки

• width-slide - ширина одной товарной карточки
• round-slide - скругление внешней части карточки

Эти свойства влияют на общее восприятие карусели.

Практически это означает:

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

Кнопка добавления в корзину

• color-text-cart-btn - цвет текста кнопки
• color-bg-cart-btn - цвет фона кнопки
• round-cart-btn - скругление кнопки
• height-cart-btn - высота кнопки
• size-text-cart-btn - размер текста кнопки

Эти свойства помогают сделать кнопку:

• более заметной
• более спокойной
• ближе к фирменному стилю
• удобнее для нажатия

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

Изображение товара

• round-product-image-frame - скругление области изображения
• bg-product-image-frame - фон области изображения
• padding-product-image-frame - внутренний отступ области изображения
• media-height - высота изображения товара
• image-fill - способ, которым изображение вписывается в область карточки

Практически это помогает:

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

Если не уверены, image-fill лучше менять аккуратно и после визуальной проверки на телефоне.

В редакторе доступны готовые варианты cover, contain, 55% 55%, 75% 75%, 100% auto, auto 100%, 100% 100%.

Для bg-product-image-frame можно выбрать цвет из палитры, включая transparent, если подложка под фото не нужна.

Обычные товарные маркеры

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

Для настройки обычных маркеров используются свойства:

• carousel-marker-image-width - ширина изображения обычного маркера
• carousel-marker-image-height - высота изображения обычного маркера
• carousel-marker-image-fill - способ, которым изображение вписывается в область маркера

Практически это помогает:

• сделать маркеры аккуратнее на узких карточках карусели
• визуально усилить промо-отметки и иконки
• подстроить пропорции маркеров под стиль конкретной витрины

Скидочный маркер

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

Для него используются свойства:

• carousel-price-marker-image-width - ширина изображения скидочного маркера
• carousel-price-marker-image-height - высота изображения скидочного маркера
• carousel-price-marker-image-fill - способ, которым изображение скидочного маркера вписывается в свою область

Это особенно полезно, если:

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

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

• color-text-category - цвет названия категории
• size-text-name - размер названия товара
• weight-text-name - насыщенность названия товара

Эти свойства влияют на читаемость карточки.

С их помощью можно:

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

9. Практические рекомендации по настройке

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

Ставьте самые сильные товары первыми

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

Не перегружайте одну карусель слишком большим количеством товаров

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

Следите за качеством изображений

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

Проверяйте цены и доступность кнопки

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

Проверяйте результат на телефоне

Именно на мобильном экране лучше всего видно:

• удобно ли листать товары
• хорошо ли читаются названия
• не слишком ли мелкие карточки
• достаточно ли заметна кнопка В корзину