Boost your sales and customer engagement with the Sort and Filter widget. This widget makes it easy for your customers to sort through your products and categories. Whether they are looking for a specific product’s name, in a particular price range, or your latest releases, they’ll be able to narrow down the search quickly.
Note
The ability to sort by name is available on all plans. All other sorting and filtering options are only available on the Advanced plan or higher. For more details on our various plans, see native store plans.
It is important to note that the Sort and Filter widget can only be added to a page that has the Product Gallery widget already added. This is because the Sort and Filter widget exclusively displays products located within the Product Gallery on the page, or if there are multiple Product Galleries the widget will filter products from all galleries on the page. For example, if you have products that are not on the page, they will not show up when using the Sort and Filter widget.
Note
Only products will be displayed when utilizing the Sort and Filter widget, not categories. For example, if you have a Product Gallery that is set to display a category (and not products), the Sort and Filter widget will not show anything when added to the page.
To add the Sort and Filter widget:
-
Navigate to the desired page. The page must already have the Product Gallery widget added.
-
In the side panel, click Widgets.
-
In the Store section, click and drag Sort & Filter widget onto the desired place on the page where you would like to button to be.
The filtering and sorting options can be customized. This can be done in the widget’s content editor. To access the content editor, right-click the widget, and click Edit Content.
Following is the available options:
-
Display name (button and filter panel). It is optional to set a Display name; if one is not set, the default Sort & Filter is used.
-
Filter By. By default, this is toggled on.
-
Category
-
Price
-
-
Sort By. By default, this is toggled on.
-
Newest. Available on the Advanced plan and higher.
-
Price (low to high). Pairs with Price (high to low). If one is disabled, the other will be as well. Available on the Advanced plan and higher.
-
Price (high to low). Pairs with Price (low to high). If one is disabled, the other will be as well. Available on the Advanced plan and higher.
-
Name (Z-A). Pairs with Name (A-Z). If one is disabled, the other will be as well.
-
Name (A-Z). Pairs with Name (Z-A). If one is disabled, the other will be as well.
-
Note
-
When both Filter By and Sort By are toggled off, the widget’s button will still be present though nothing will happen when it is selected.
-
Stores on the Standard plan will only show the Name sorting options.
Use the Design Panel to customize the design of the Button and Filter panel for the Sort and Filter widget.
To configure the design:
-
Right-click the Filter Sort widget, and click Edit Design.
-
Click the tab for the element you would like to configure (Button or Filter panel).
Following are the design elements you can customize:
Filter Panel
Style
-
Layout
-
Panel alignment. Set the panel to display on the right or left side of the screen.
-
Width. Set the width of the panel.
-
Space Between. Set the space between the sections.
-
-
Panel Elements
-
Checkbox color.
-
Checkbox icon color.
-
Checkbox border icon.
-
Divider. Width and color.
-
Price Range Slider. Width and color.
-
-
Close Icon
-
Color.
-
Background color.
-
Text
-
Display name.
-
Panel titles.
-
Panel options.
Button
Customize the button style using the available options.