Виджет Каталог товаров в конструкторе сайтов

В конструкторе сайтов SendPulse можно добавить виджет Каталог товаров (Product catalog), который подтягивает товары напрямую из каталога товаров в CRM и показывает их на странице сайта.

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

Рассмотрим, как добавить виджет Каталог товаров и настроить каталог товаров.

Добавьте виджет

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

Разместите виджет Каталог товаров на сайте.

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

Выберите товары для отображения

Выберите категории товаров, которые нужно показать в виджете. В выпадающем списке Товары (Products) выберите Все категории (All categories), чтобы показать весь каталог, или выберите отдельную категорию.

Чтобы добавить или отредактировать товары и категории в этом списке, нажмите Управление товарами (Manage products). Ссылка открывает каталог товаров в CRM.

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

Настройте стиль каталога

Определите, где разместить меню категорий и фильтра по цене относительно карточек товаров. В разделе Стиль каталога (Catalog style) выберите макет:

Чтобы оформить карточки товаров, в разделе Стиль каталога нажмите Настроить (Customize).

В разделе Общие (General) задайте Расстояние между карточками (Card spacing) — расстояние между карточками в пикселях.

В разделе Карточка (Card) задайте цвет фона карточки, внутренние отступы, обводку и скругление.

В разделе Галерея (Gallery) определите, как должны отображаться изображения товаров:

В разделе Типографика (Typography) задайте размер, формат и цвет шрифта для каждого текстового элемента:

Задайте количество товаров

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

В разделе Количество карточек в строке (Number of cards in a row) задайте количество карточек в строке для Версии для компьютера (Desktop view) и Мобильной версии (Mobile view).

Максимальное количество карточек в строке зависит от макета. В версии для компьютера можно показать до 4 карточек с Боковым макетом и до 5 карточек с Верхним макетом. В мобильной версии можно показать до 2 карточек в строке.

В разделе Максимальное количество отображаемых товаров (Maximum number of displayed products) задайте, сколько товаров каталог загружает за раз. Можно выбрать от 6 до 24.

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

Настройте пагинацию

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

Чтобы оформить ее, нажмите Настройки пагинации (Pagination settings). Параметры сгруппированы в три набора.

В разделе Кнопки страниц (Page buttons) оформите кнопки страниц:

Чтобы посетители видели, на какой странице они находятся, в разделе Кнопка текущей страницы (Current page button) оформите кнопку текущей страницы:

Чтобы добавить кнопку, которая загружает следующую страницу, включите переключатель Кнопка следующей страницы (Next page button). Введите ее Текст (Text), а затем выберите Стиль и размер. При желании включите переключатель Добавить иконку (Add icon), чтобы показать иконку, и воспользуйтесь параметром Дополнительный эффект (Additional effect), чтобы добавить эффект наведения.

Оформите панель фильтра

Панель фильтра содержит меню категорий и фильтр по цене. Посетители могут просматривать товары по категориям и фильтровать их по цене с помощью полей От (From) и До (To) или ползунка цены. Поля поддерживают только целые числа.

Чтобы оформить панель, нажмите Настройки фильтра (Filter settings). Доступные параметры повторно используют стандартные настройки цвета, обводки и шрифта и сгруппированы в три раздела.

В разделе Общие задайте цвет фона панели, скругление, обводку и внутренние отступы.

В разделе Категории (Categories) оформите меню категорий:

В разделе Цена оформите фильтр по цене:

Настройте сортировку и поиск

Поиск и сортировка помогают посетителям находить товары и эффективнее просматривать каталог. Чтобы настроить это, нажмите Настройки сортировки (Sorting settings).

Настройте поиск товаров

Поле поиска помогает посетителям находить товары по названию.

Включите переключатель Поиск (Search) и введите текст Плейсхолдера (Placeholder) для поля поиска.

Когда переключатель включен, поле поиска появляется над карточками товаров и фильтрует каталог по мере ввода текста посетителями.

Поиск поддерживает только названия товаров.

Настройте сортировку товаров

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

Включите переключатель Включить сортировку (Enable sorting), а затем оформите поле сортировки:

Настройте кнопку Добавить в корзину

Кнопка Добавить в корзину (Add to cart) помогает посетителям добавить товар в корзину прямо из его карточки.

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

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

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

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

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

Обновлено: 14.07.2026