Advanced Product Filters App
In this article, we will explain how to use the "Advanced Product Filters" and benefit from its functions.
In this article:
How to install it
Layout
Settings
- How to install it:
1- We will access the "Apps & Services" through the dashboard as follows:
2- When we find the app we will click on it to be redirected to its page in order to install it as follows:
3- Once the app is installed we will be able to adjust its functions through this button:
- Layout:
1- To be able to use the app properly, we will need to add a module so we can customize its attributes and so on:
2- After adding the module, we will be able to edit it:
3- After accessing the module page, you will find that it is divided into 3 sections:
Settings
Base Attributes
Options
Settings:
Name: you can add a name to this module as this will make it easier for you when adding additional modules and setting each module for each group of products - if needed.
Title: this is the filter name that will be displayed on the front page.
Layout: from the layout section, you can specify the pages where the filter will be displayed on.
Customer groups: you can choose to display this filter to a specific group of customers based on your preferences.
Display options as: you can specify how the filter will be displayed (whether in one line horizontally or in modern mode)
Status: Make sure that the status of these options is enabled for these changes to be successfully reflected.
Base Attributes
The base attributes section is divided into attribute names and the settings for each attribute.
The attributes options:
Enabled: to control the status for each attribute (enabled or disabled)
Sort Order: to choose the sort for each attribute.
Display as type: you can choose this attribute to be displayed with a scroll or with a button more on the front page.
Display a list of items (only for checkbox/radio): from here, you can set this attribute to be displayed as a list of items, please note that it only works with checkbox and radio only.
Settings: These are the settings for the search field attribute, you can select to hide, show, or to be collapsed by default but the header is shown and whether to show a search button or not as well as refreshing the results with delay or not:
For the rest of the attributes settings, you can choose whether you wish these filters to be collapsed by default by choosing "Yes"
Or you can specify where the options to be collapsed whether on PC only or Mobile only. If you don't want it to be collapsed by default for both platforms (Mobile and PC), please select "No"
Options:
The options section is pretty similar to the attribute section. You can enable the product options that you desire to be displayed within the filter. Specify the display type (Radio, checkbox, image, slider, etc…)
Display live filter:
Yes: for the filter results to be shown automatically.
No: customers will have to click on the refresh button first for the results to be displayed.
Sort Order of values: You can sort the order of values whether (Alphabetical ascending, descending order, Numeric ascending, or descending).
- Settings:
Rebuild index: we will click on that button to index the advanced filters if we faced any issues with the search results:
Refresh: in this section, we will be able to control how the customer will check the results when filing the items, such as whether we want the loader to be shown over the filter or the results, we have the option to disable both and so on, we can enable the "Using button" switch and customer will need to click on it first before refreshing the page and showing the results, if we enabled it, we can choose its place:
Display a list of items: through this section, we can set a limit based on the height of the page or items number as follows:
Style: when accessing this section in the app's settings, we can choose and customize the counter, search button, slider, and header colors:
Other: We can select the condition between the options of the same group so the customer can select more than an option in the same group or only one option, e.g: if we have one group called brands, we can make the customer choose more than one brand or limit it to make the customer choose only one brand:
We will need to select the in-stock status in our store (Regardless of its name, select the status you select for the in-stock items in your store) just in case we enabled the option beside it which hides the out of stock items, therefore, we will need to specify the in-stock status in the app:
Regarding the other options, please make sure to enable the ones you desire to be applied to your store such as the cache and attribute separators, etc. And always make sure to click on the "Save" button to apply any changes.
In this article:
How to install it
Layout
Settings
- How to install it:
1- We will access the "Apps & Services" through the dashboard as follows:
2- When we find the app we will click on it to be redirected to its page in order to install it as follows:
3- Once the app is installed we will be able to adjust its functions through this button:
- Layout:
1- To be able to use the app properly, we will need to add a module so we can customize its attributes and so on:
2- After adding the module, we will be able to edit it:
3- After accessing the module page, you will find that it is divided into 3 sections:
Settings
Base Attributes
Options
Settings:
Name: you can add a name to this module as this will make it easier for you when adding additional modules and setting each module for each group of products - if needed.
Title: this is the filter name that will be displayed on the front page.
Layout: from the layout section, you can specify the pages where the filter will be displayed on.
Customer groups: you can choose to display this filter to a specific group of customers based on your preferences.
Display options as: you can specify how the filter will be displayed (whether in one line horizontally or in modern mode)
Status: Make sure that the status of these options is enabled for these changes to be successfully reflected.
Base Attributes
The base attributes section is divided into attribute names and the settings for each attribute.
The attributes options:
Enabled: to control the status for each attribute (enabled or disabled)
Sort Order: to choose the sort for each attribute.
Display as type: you can choose this attribute to be displayed with a scroll or with a button more on the front page.
Display a list of items (only for checkbox/radio): from here, you can set this attribute to be displayed as a list of items, please note that it only works with checkbox and radio only.
Settings: These are the settings for the search field attribute, you can select to hide, show, or to be collapsed by default but the header is shown and whether to show a search button or not as well as refreshing the results with delay or not:
For the rest of the attributes settings, you can choose whether you wish these filters to be collapsed by default by choosing "Yes"
Or you can specify where the options to be collapsed whether on PC only or Mobile only. If you don't want it to be collapsed by default for both platforms (Mobile and PC), please select "No"
Options:
The options section is pretty similar to the attribute section. You can enable the product options that you desire to be displayed within the filter. Specify the display type (Radio, checkbox, image, slider, etc…)
Display live filter:
Yes: for the filter results to be shown automatically.
No: customers will have to click on the refresh button first for the results to be displayed.
Sort Order of values: You can sort the order of values whether (Alphabetical ascending, descending order, Numeric ascending, or descending).
- Settings:
Rebuild index: we will click on that button to index the advanced filters if we faced any issues with the search results:
Refresh: in this section, we will be able to control how the customer will check the results when filing the items, such as whether we want the loader to be shown over the filter or the results, we have the option to disable both and so on, we can enable the "Using button" switch and customer will need to click on it first before refreshing the page and showing the results, if we enabled it, we can choose its place:
Display a list of items: through this section, we can set a limit based on the height of the page or items number as follows:
Style: when accessing this section in the app's settings, we can choose and customize the counter, search button, slider, and header colors:
Other: We can select the condition between the options of the same group so the customer can select more than an option in the same group or only one option, e.g: if we have one group called brands, we can make the customer choose more than one brand or limit it to make the customer choose only one brand:
We will need to select the in-stock status in our store (Regardless of its name, select the status you select for the in-stock items in your store) just in case we enabled the option beside it which hides the out of stock items, therefore, we will need to specify the in-stock status in the app:
Regarding the other options, please make sure to enable the ones you desire to be applied to your store such as the cache and attribute separators, etc. And always make sure to click on the "Save" button to apply any changes.
Updated on: 23/01/2023
Thank you!