Wix Stores: Adding Filters and Sorting to Product Galleries or the Category Page
6 min
In this article
- Video tutorial
- Showing or hiding all filters
- Displaying and customizing preset filters
- Grouping and reordering product option and modifier filters
- Creating custom filters
- Displaying sorting options
Make it easy for customers to find the perfect product by adding filters and sorting options to your site's Category page or to a grid gallery.
You can display the default filters already set up for you or create your own custom filters. You can also add a "Sort by" drop-down so customers can sort your products.
Note:
Filter and sorting options are not available for slider galleries.
Video tutorial
Watch this video tutorial, or scroll down to read the full article.
Showing or hiding all filters
If you prefer not to display filters on your site, you can hide the entire filter section.
To show or hide all filters:
- Click the Category page or relevant gallery in your editor.
- Click Settings or the Settings icon
. - Click the Display tab.
- Select the checkbox next to Filters.
- (Optional) Deselect the checkbox next to Filters title or Applied filters.
Displaying and customizing preset filters
Wix Stores comes with 3 preset filters. You can let customers filter by:
- Category
- Price
- Product Options
To display and customize preset filters:
- Click the Category page or a grid gallery in your editor.
- Click Settings or the Settings icon .
- Click the Filters tab.
- Choose which types of filters you want to set up:
Filter by category
.
Filter by price
Filter by product options
Note:
Filtered products do not necessarily appear on your live site in the order in which they appear in categories.
Grouping and reordering product option and modifier filters
Important:
Grouping and reordering is available only with the new product catalog.
You can make filtering easier for customers by grouping similar option choices together. For example, instead of showing all the shades of each color as separate filters, you can group them, creating just one filter for each color.
You can also reorder filter choices in a way that makes sense, for example, by arranging colors in rainbow order or by reordering sizes from small to large.
Tip:
This applies to product option choices and modifier choices.
To group and reorder product option and modifier filter choices:
- Go to Option & Modifier Filters in your site's dashboard.
- Group filter option choices together:
- Click Manage Filter next to the filter you want to manage (e.g. Color)
- Click Group Choices.
- Select a primary choice (e.g. Blue).
Tip: This determines the text or shade that appears in the filter on your site. - Select the checkboxes next to every choice you want to include in the group (e.g. Navy, Light Blue, etc.) and click Save.
- Reorder filter choices:
- If not already on the page, click Manage Filter next to the filter you want to sort.
- Select an option from the How are choices sorted? drop-down on the right:
- Manual: Drag the choices into your preferred order.
- Alphabetical: The choices are sorted automatically in alphabetical order.
- Product Count: The choices are sorted automatically by how many products the choice applies to.
- Click Save.
Creating custom filters
You can create your own filters using the custom filter option. For example, your site might have 3 categories displayed on 3 sites pages, "Men", "Women", and "Kids". You may want to add the option to filter by brand. To do so, you need to first create a category for each brand you carry in your store.
To create custom filters:
- Create the categories you need for the custom filter (e.g. 1 for each brand).
- Click the Category page or relevant gallery in your editor.
- Click Settings or the Settings icon .
- Click the Filters tab.
- Click +Create Custom Filter.
- Enter a name for your custom filter (e.g. Brands).
- Click Choose Categories and select or deselect the checkboxes next to relevant categories.
Displaying sorting options
Allow customers to sort products by price, name, or to show the newest products first.
To add sorting options:
- Click the Category page or relevant gallery in your editor.
- Click Settings or the Settings icon .
- Click the Display tab.
- Select the checkbox next to Sorting options.
- Click the Sorting tab.
- Select the default sorting order from the Default order drop-down.
- Select or deselect the checkboxes next to sorting options to display or hide them.
- (Optional) Edit the 'Sort by' title:
- Click the Text tab.
- Edit the Sorting options title.
