Элемент «Каталог товаров» и фильтры в интернет-магазине
С помощью элемента Каталог товаров вы можете отобразить товары из нужных вам категорий вашего интернет-магазина, настроить их отображение, а также активировать фильтры — боковое меню, которое позволит вашим пользователям фильтровать ваши товары по категории и параметрам товаров (цвет, размер, материал и другие параметры, которые вы указали для ваших товаров в настройках).
Это позволяет вам удобно размещать большое количество товаров на страницах вашего сайта, а вашим покупателям — легче находить именно те товары, которые их интересуют, что увеличивает вероятность покупки товаров в вашем магазине.
В настоящее время добавить элемент “Каталог товаров” возможно в любом кастомном блоке. Также вы можете добавить блок "Product catalog", в котором этот элемент предварительно установлен:
Сначала добавьте нужные категории и товары для отображения. Для этого нажмите на “шестеренку” в центре элемента и перейдите на вкладку Общие:
Здесь можно выбрать ① Категории, ② Сортировку товаров и какие ③ основные параметры товаров отображать на опубликованном сайте. Также вы можете активировать чекбокс ④ Показать товары, которых нет в наличии, чтобы отобразить даже те товары, которые отмечены в магазине как “Нет в наличии”.
Вы можете выбрать как все, так и отдельные категории для отображения в этом элементе:
Выполнить сортировку можно следующим образом: “По имени”, “Новые сверху”, “От дорогих к дешевым” или “От дешевых к дорогим”:
На вкладке Вид можно настроить желаемый промежуток между товарами ①, количество товаров в каждом ряду ② и какое количество товаров ③ необходимо отображать в этом элементе сначала, а если товаров много, то сколько товаров отображать после каждого нажатия кнопки “Показать еще” снизу:
Подсказка: на разных устройствах отображается разное количество товаров в одном ряду. При этом вы можете нажать на иконку планшета или смартфона сверху настроек блока и отредактировать отображение товаров нужным вам образом. Для планшетной версии максимальное количество товаров в одном ряду — 4, а для мобильной версии — по 2 товара в каждом ряду. Более подробно, как это сделать, описано в статье Отображение товаров в 2 столбца на мобильной версии сайта.
Примечание: аналогичным образом вы можете указать отдельно для разных устройств, сколько товаров отображать после каждого нажатия на кнопку “Показать еще”. Для планшета можно указать 6/12/18/24 товара, для смартфонов — 3/6/9/12.
В элементе Каталог товаров вы можете настроить фильтры, которыми смогут пользоваться ваши покупатели. Для этого откройте настройки и перейдите на вкладку Фильтры:
Вы можете установить:
① отображать ли фильтры в этом элементе — этот переключатель необходимо активировать, чтобы отобразить фильтры
② отображать ли заголовок фильтров, категории и нужные параметры товаров с возможностью переименовать эти разделы:
Важно: в этом разделе будут отображаться все установленные параметры для имеющихся вариативных товаров из вашего интернет-магазина.
Помните, что по умолчанию в этом разделе будут отображаться все выбранные фильтры, однако если выбрать определенную категорию, то в списке доступных фильтров будут отображаться только те параметры, которые есть у товаров выбранной категории.
В этом разделе вы можете настроить общий стиль кнопки и её название:
Примечание: вы можете узнать больше о изменении дизайна кнопок в статье о глобальных настройках стилей кнопок.
В случае, если количество товаров будет превышать установленное значение во вкладке Внешний вид, то под списком товаров будет отображаться кнопка Показать еще. На вкладке Действие вы можете переименовать эту кнопку:
Также в этом разделе вы можете установить желаемый текст кнопки сброса фильтров.
На скриншоте ниже слева вы можете видеть настройки этой кнопки, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
Чтобы указать текст для кнопки Применить фильтры, которая отображается на мобильной версии, вы можете, находясь на вкладке Действие, перейти в редактор мобильной версии сайта и ввести нужный вам текст в поле Кнопка применения фильтров.
На скриншоте ниже слева вы можете видеть настройки каталога товаров, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
Опубликуйте свой сайт, чтобы изменения вступили в силу.
Это позволяет вам удобно размещать большое количество товаров на страницах вашего сайта, а вашим покупателям — легче находить именно те товары, которые их интересуют, что увеличивает вероятность покупки товаров в вашем магазине.
В настоящее время добавить элемент “Каталог товаров” возможно в любом кастомном блоке. Также вы можете добавить блок "Product catalog", в котором этот элемент предварительно установлен:
Настройка внешнего вида каталога товаров
Общие настройки элемента
Сначала добавьте нужные категории и товары для отображения. Для этого нажмите на “шестеренку” в центре элемента и перейдите на вкладку Общие:
Здесь можно выбрать ① Категории, ② Сортировку товаров и какие ③ основные параметры товаров отображать на опубликованном сайте. Также вы можете активировать чекбокс ④ Показать товары, которых нет в наличии, чтобы отобразить даже те товары, которые отмечены в магазине как “Нет в наличии”.
Вы можете выбрать как все, так и отдельные категории для отображения в этом элементе:
Выполнить сортировку можно следующим образом: “По имени”, “Новые сверху”, “От дорогих к дешевым” или “От дешевых к дорогим”:
Настройка внешнего вида
На вкладке Вид можно настроить желаемый промежуток между товарами ①, количество товаров в каждом ряду ② и какое количество товаров ③ необходимо отображать в этом элементе сначала, а если товаров много, то сколько товаров отображать после каждого нажатия кнопки “Показать еще” снизу:
Подсказка: на разных устройствах отображается разное количество товаров в одном ряду. При этом вы можете нажать на иконку планшета или смартфона сверху настроек блока и отредактировать отображение товаров нужным вам образом. Для планшетной версии максимальное количество товаров в одном ряду — 4, а для мобильной версии — по 2 товара в каждом ряду. Более подробно, как это сделать, описано в статье Отображение товаров в 2 столбца на мобильной версии сайта.
Примечание: аналогичным образом вы можете указать отдельно для разных устройств, сколько товаров отображать после каждого нажатия на кнопку “Показать еще”. Для планшета можно указать 6/12/18/24 товара, для смартфонов — 3/6/9/12.
Настройка фильтров
В элементе Каталог товаров вы можете настроить фильтры, которыми смогут пользоваться ваши покупатели. Для этого откройте настройки и перейдите на вкладку Фильтры:
Вы можете установить:
① отображать ли фильтры в этом элементе — этот переключатель необходимо активировать, чтобы отобразить фильтры
② отображать ли заголовок фильтров, категории и нужные параметры товаров с возможностью переименовать эти разделы:
Важно: в этом разделе будут отображаться все установленные параметры для имеющихся вариативных товаров из вашего интернет-магазина.
Помните, что по умолчанию в этом разделе будут отображаться все выбранные фильтры, однако если выбрать определенную категорию, то в списке доступных фильтров будут отображаться только те параметры, которые есть у товаров выбранной категории.
Настройка кнопок каталога товаров
В этом разделе вы можете настроить общий стиль кнопки и её название:
Примечание: вы можете узнать больше о изменении дизайна кнопок в статье о глобальных настройках стилей кнопок.
В случае, если количество товаров будет превышать установленное значение во вкладке Внешний вид, то под списком товаров будет отображаться кнопка Показать еще. На вкладке Действие вы можете переименовать эту кнопку:
Также в этом разделе вы можете установить желаемый текст кнопки сброса фильтров.
На скриншоте ниже слева вы можете видеть настройки этой кнопки, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
Чтобы указать текст для кнопки Применить фильтры, которая отображается на мобильной версии, вы можете, находясь на вкладке Действие, перейти в редактор мобильной версии сайта и ввести нужный вам текст в поле Кнопка применения фильтров.
На скриншоте ниже слева вы можете видеть настройки каталога товаров, где можно указать этот текст, а справа на скриншоте — пример того, как это будет выглядеть на опубликованном сайте:
Опубликуйте свой сайт, чтобы изменения вступили в силу.
Обновлено на: 21/09/2024
Спасибо!