> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Елемент "Каталог товарів" та фільтри у інтернет-магазині

За допомогою елементу **Каталог товарів** ви можете відобразити товари з необхідних вам категорій вашого інтернет-магазину, налаштувати їхнє відображення, а також активувати **фільтри** — бокове меню, яке дозволятиме вашим користувачам фільтрувати ваші товари за категорією та параметрами товарів (колір, розмір, матеріал та інші параметри, які ви вказали для ваших товарів у їхніх налаштуваннях). 

Це дозволяє вам зручно розміщувати велику кількість товарів на сторінках вашого сайту, а вашим покупцям — легше знаходити саме ті товари, які їх цікавлять, що збільшує імовірність купівлі товарів у вашому магазині. 

Наразі додати елемент “Каталог товарів” можливо у будь-якому [кастомному блоці](https://help.weblium.com/uk/article/dodavannya-kastomnogo-bloku-2t4j88/). Також ви можете додати блок "Product catalog", у якому цей елемент попередньо встановлений:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivblok_8u6ogq.png)

# Налаштування зовнішнього вигляду каталогу товарів
### Загальні налаштування елемента

1. Спочатку, додайте бажані категорії та товари для відображення. Для цього натисніть на “шестерню” посередині елементy та перейдіть до вкладки **Загальні**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivzagalni1_bm5iev.png)
Тут можна вибрати **①** Категорії, **②** Сортування товарів та які **③** основні параметри товарів відображати на опублікованому сайті. Також ви можете активувати чекбокс **④** **Показати товари, яких немає в наявності**, щоб відобразити навіть ті товари, які позначені в магазині як “Немає в наявності”.

2. Ви можете вибрати як усі, так і окремі категорії для відображення у цьому елементі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivzagalni2_16oj9pf.png)
3. Виконати сортування можливо наступним чином: “За іменем”, “Нові зверху”, “Від дорогих до дешевих” або “Від дешевих до дорогих”:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivzagalni3_1f658lb.png)
### Налаштування зовнішнього вигляду
На вкладці **Вигляд** можна налаштувати бажаний проміжок між товарами **①** , кількість товарів у кожному рядку **②**  та яку кількість товарів **③** необхідно відображати у цьому елементі спочатку та, якщо товарів багато, по скільки товарів відображати після кожного натиску кнопки “Показати ще” знизу:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivviglyad_py4d9r.png)
| ${color}[#1aa900](Підказка:)  на різних пристроях відображається різна кількість товарів у одному рядку. При цьому ви можете натиснути на іконку планшету або смартфону зверху налаштувань блоку і відредагувати відображення товарів необхідним вам чином. Для планшетної версії максимальна кількість товарів у одному рядку — 4, а для мобільної версії — по 2 товари у кожному рядку. Більш детально, як це зробити, описано у статті [Відображення товарів у 2 стовпчика на мобільній версії сайту](https://help.weblium.com/uk/article/vidobrazhennya-tovariv-u-2-stovpchika-na-mobilnij-versiyi-sajtu-dn742/).
|| ${color}[#ffa800](Примітка:) аналогічним чином ви можете вказати окремо для різних пристроїв по скільки товарів відображати після кожного натиску на кнопку “Показати ще”. Для планшету можна вказати 6/12/18/24 товарів, для смартфонів — 3/6/9/12.

# Налаштування фільтрів

У елементі **Каталог товарів** ви можете налаштувати фільтри, котрими зможуть користуватись ваші покупці. Для цього відкрийте налаштування та перейдіть до вкладки **Фільтри**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivfiltri1_10av1un.png)
Ви можете встановити:
① відображати фільтри у даному елементі — цей перемикач необхідно активувати, щоб відобразити фільтри
② чи відображати заголовок фільтрів, категорії та бажані параметри товарів із можливістю перейменувати ці розділи:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivfiltri2_1y7m38x.png)
||| ${color}[#f97700](Важливо:) у цьому розділі будуть відображатись усі встановлені параметри для **наявних варіативних товарів** з вашого інтернет-магазину. 

Пам’ятайте, що за замовчуванням у цьому розділі будуть відображатись всі вибрані фільтри, проте якщо вибрати певну категорію, то у списку доступних фільтрів будуть відображатися лише ті параметри, що є у товарів вибраної категорії.

# Налаштування кнопок каталогу товарів

1. У цьому розділі ви можете налаштувати загальний стиль кнопки та її назву:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya1_xzp9g3.png)
|| ${color}[#ffa800](Примітка:) ви можете дізнатися більше про зміну дизайну кнопок у статті про [глобальні налаштування стилей кнопок](https://help.weblium.com/uk/article/zmina-dizajnu-knopki-19e5nfd/#3-krok-1-zmina-dizajnu-knopok-u-globalnih-nalashtuvannyah).

2. У випадку, якщо кількість товарів буде перевищувати встановлене значення у вкладці **Вигляд**, то під списком товарів буде відображатись кнопка **Показати ще**. У вкладці **Дія** ви можете перейменувати цю кнопку:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya2_1timr8l.png)
3. Також у цьому розділі ви можете встановити бажаний текст **кнопки скидання фільтрів**.
На скриншоті нижче ліворуч ви можете бачити налаштування цієї кнопки, де можна вказати цей текст, а праворуч на скриншоті — приклад того, як це виглядатиме на опублікованому сайті:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya3_h80cf.png)
4. Для того, що вказати текст для кнопки **Застосувати фільтри**, яка відображається на мобільній версії, ви можете, знаходячись у вкладці **Дія**, перейти у редактор мобільної версії сайту та увести потрібний вам текст у полі **Кнопка застосування фільтрів**.
На скриншоті нижче ліворуч ви можете бачити налаштування каталогу товарів, де можна вказати цей текст, а праворуч на скриншоті — приклад того, як це виглядатиме на опублікованому сайті:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya4_sc80r1.png)
5. [Опублікуйте свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб зміни набули чинності.