> ## 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/ru/article/dobavlenie-kastomnogo-bloka-kma0sf/). Также вы можете добавить блок "Product catalog", в котором этот элемент предварительно установлен:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivblok_8u6ogq.png)

# Настройка внешнего вида каталога товаров
### Общие настройки элемента

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

2. Вы можете выбрать как все, так и отдельные категории для отображения в этом элементе:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivzagalni2_rv8n2s.png)
3. Выполнить сортировку можно следующим образом: “По имени”, “Новые сверху”, “От дорогих к дешевым” или “От дешевых к дорогим”:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivzagalni3_wydwy8.png)
### Настройка внешнего вида
На вкладке **Вид** можно настроить желаемый промежуток между товарами **①**, количество товаров в каждом ряду **②** и какое количество товаров **③** необходимо отображать в этом элементе сначала, а если товаров много, то сколько товаров отображать после каждого нажатия кнопки “Показать еще” снизу:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivviglyad_py4d9r.png)
| ${color}[#1aa900](Подсказка:) на разных устройствах отображается разное количество товаров в одном ряду. При этом вы можете нажать на иконку планшета или смартфона сверху настроек блока и отредактировать отображение товаров нужным вам образом. Для планшетной версии максимальное количество товаров в одном ряду — 4, а для мобильной версии — по 2 товара в каждом ряду. Более подробно, как это сделать, описано в статье [Отображение товаров в 2 столбца на мобильной версии сайта](https://help.weblium.com/ru/article/otobrazhenie-tovarov-v-2-stolbika-na-mobilnoj-versii-sajta-rqwjih/).
|| ${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/ru/article/izmenenie-dizajna-knopki-1xt931r/#3-shag-1-izmenenie-dizajna-knopok-v-globalnyh-nastrojkah).

2. В случае, если количество товаров будет превышать установленное значение во вкладке **Внешний вид**, то под списком товаров будет отображаться кнопка **Показать еще**. На вкладке **Действие** вы можете переименовать эту кнопку:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya2_ka509b.png)
3. Также в этом разделе вы можете установить желаемый текст **кнопки сброса фильтров**.
На скриншоте ниже слева вы можете видеть настройки этой кнопки, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya3_50qb84.png)
4. Чтобы указать текст для кнопки **Применить фильтры**, которая отображается на мобильной версии, вы можете, находясь на вкладке **Действие**, перейти в редактор мобильной версии сайта и ввести нужный вам текст в поле **Кнопка применения фильтров**.
На скриншоте ниже слева вы можете видеть настройки каталога товаров, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/katalogtovarivdiya4_1p2aen0.png)
5. [Опубликуйте свой сайт](https://help.weblium.com/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения вступили в силу.