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

У конструкторі сайтів 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