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 Store plans.
Add Sort and Filter Widget
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 onto the desired place on the page where you would like to button to be.
Content Editor
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.
The available options are:
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.
Design Editor
Configure the design of the Button and Filter panel.
To configure the Button and Filter panel:
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).
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.
For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.
Button
For information on design options for buttons, see Widget Design.