The "Product Catalog" element and filters in the online store
With the help of the Product Catalog element, you can display products from the categories of your online store that you need, customize their appearance, and activate Filters — a side menu that allows your users to filter your products by category and product parameters (color, size, material, and other parameters that you have specified for your products in their settings).
This allows you to conveniently place a large number of products on the pages of your website, and your customers to find exactly the products they are interested in more easily, which increases the likelihood of buying products in your store.
Currently, you can add the Product catalog element in any custom block. You can also add a Product catalog block that already contains this element:
First, add the desired categories and products to display. To do this, click on the “gear” in the middle of the element and navigate to the General tab:
Here you can select ① Categories, ② Product sorting and which ③ main product parameters to display on the published site. You can also activate the checkbox ④ Display out of stock products to display even those products that are marked as “Out of stock” in the store.
You can select all or some categories to be displayed in this element:
You can sort as follows: “Name”, "Newest", "Price: high to low" or "Price: low to high":
On the Layout tab, you can set the desired gap between products ①, the number of products in each row ②, and how many products ③ should be displayed in this element at first and, if there are many products, how many products should be displayed after each click of the "Load more" button at the bottom:
Tip: different devices display different numbers of products in one line. In this case, you can click on the tablet or smartphone icon at the top of the block settings and edit the display of products as you need. For the tablet version, the maximum number of products in one row is 4, and for the mobile version — 2 products in each row. For more details on how to do this, see the article Product display in 2 columns on the mobile site version.
Note: In the same way, you can specify separately for different devices how many products to display after each click on the “Load more” button. For tablets, you can specify 6/12/18/24 products, for smartphones - 3/6/9/12.
In the Product catalog element, you can set up filters that your customers can use. To do this, open the settings and navigate to the Filters tab:
You can set:
① whether to display filters in this item - this switch must be activated to display filters
② whether to display the filter title, categories, and preferred product options along with the option to rename these sections:
Important: this section will display all the selected parameters for existing product options from your online store.
Note that by default, all selected filters will be displayed in this section, but if you select a specific category, only the options that are available for products in the selected category will be displayed in the list of available filters.
In this section, you can customize the general style of the button and its name:
Note: you can learn more about changing button designs in the article Changing the design of a button in the global settings.
If the number of products exceeds the set value in the Layout tab, the Load more button will be displayed below the list of products. In the Action tab, you can rename this button:
Also in this section, you can set the desired text for the Clear filter button.
On the screenshot below on the left you can see the settings of this button where you can specify this text, and on the right screenshot you can see an example of how it will be displayed on the published site:
In order to specify the text for the Apply filters button displayed on the mobile version, from the Action tab you can navigate to the mobile version editor and specify the text you need in the Apply filters button text field.
On the screenshot below on the left you can see the product catalog settings where you can specify this text, and on the right screenshot you can see an example of how it will be displayed on the published site:
Publish the site for the changes to take effect.
This allows you to conveniently place a large number of products on the pages of your website, and your customers to find exactly the products they are interested in more easily, which increases the likelihood of buying products in your store.
Currently, you can add the Product catalog element in any custom block. You can also add a Product catalog block that already contains this element:
Customizing the appearance of the product catalog
General element settings
First, add the desired categories and products to display. To do this, click on the “gear” in the middle of the element and navigate to the General tab:
Here you can select ① Categories, ② Product sorting and which ③ main product parameters to display on the published site. You can also activate the checkbox ④ Display out of stock products to display even those products that are marked as “Out of stock” in the store.
You can select all or some categories to be displayed in this element:
You can sort as follows: “Name”, "Newest", "Price: high to low" or "Price: low to high":
Customize the appearance
On the Layout tab, you can set the desired gap between products ①, the number of products in each row ②, and how many products ③ should be displayed in this element at first and, if there are many products, how many products should be displayed after each click of the "Load more" button at the bottom:
Tip: different devices display different numbers of products in one line. In this case, you can click on the tablet or smartphone icon at the top of the block settings and edit the display of products as you need. For the tablet version, the maximum number of products in one row is 4, and for the mobile version — 2 products in each row. For more details on how to do this, see the article Product display in 2 columns on the mobile site version.
Note: In the same way, you can specify separately for different devices how many products to display after each click on the “Load more” button. For tablets, you can specify 6/12/18/24 products, for smartphones - 3/6/9/12.
Setting up filters
In the Product catalog element, you can set up filters that your customers can use. To do this, open the settings and navigate to the Filters tab:
You can set:
① whether to display filters in this item - this switch must be activated to display filters
② whether to display the filter title, categories, and preferred product options along with the option to rename these sections:
Important: this section will display all the selected parameters for existing product options from your online store.
Note that by default, all selected filters will be displayed in this section, but if you select a specific category, only the options that are available for products in the selected category will be displayed in the list of available filters.
Customizing the product catalog buttons
In this section, you can customize the general style of the button and its name:
Note: you can learn more about changing button designs in the article Changing the design of a button in the global settings.
If the number of products exceeds the set value in the Layout tab, the Load more button will be displayed below the list of products. In the Action tab, you can rename this button:
Also in this section, you can set the desired text for the Clear filter button.
On the screenshot below on the left you can see the settings of this button where you can specify this text, and on the right screenshot you can see an example of how it will be displayed on the published site:
In order to specify the text for the Apply filters button displayed on the mobile version, from the Action tab you can navigate to the mobile version editor and specify the text you need in the Apply filters button text field.
On the screenshot below on the left you can see the product catalog settings where you can specify this text, and on the right screenshot you can see an example of how it will be displayed on the published site:
Publish the site for the changes to take effect.
Updated on: 09/21/2024
Thank you!