Filters
Allow customers to select various options so they can refine results based on attributes such as type, size, colours, and price.
Usually, a filter appears on the left side of the page beside the grid of products (collection and search result pages). In some cases, a filter will appear above the grid of products.
The placement of the filter is entirely optional and configured by frontend developers. However, when it comes to the filter group and the options within that, it is determined by the app and the way Shopify tags are utilised.
Feature | Info |
---|---|
Filter Group | A filter group enables you to set up the settings for a filter. A filter group can hold a filter/facet which can be applied to as many collections as you want. You can control the following:
|
Facet | Facets are the different options that appear on search and collection pages. These filters help customers refine results such as type, size, colours, and price. A facet can hold many filter values and can be contextual. Every facet can be personalised according to what's relevant for each collection. |
Filter value | All values within your selected field will be displayed as filter values (usually a checkbox) on the front end. These are selections shoppers can choose from. |
What’s the difference between ‘filter groups’ and ‘facets’?
Filter group | Facet |
---|---|
This is the highest level. A filter group will contain a number of facets that allow shoppers to find what they're looking for. | This is more granular than filter groups. Facets will contain filter values and help make the filter feature more manageable for further exploration. |
You can apply a default filter group for all collections or a create unique filter group for a specific collection. For example, if merchants have an “accessories” collection, merchants might want to display a different set of filters, compared to a clothing collection. The facets within each filter group may be different depending on what's relevant to the collection.
filter group #1:
clothing
facet #1: category
filter value #1: pants
filter value #2: tops
filter value #3: bottoms
filter group #2:
accessories
facet #1: category
filter value #1: necklaces
filter value #2: bracelets
filter value #3: rings
Ultimately, filters exist to help shoppers find what they’re looking for. By presenting the most relevant options, the site is optimised and shoppers are more likely to convert as a result of it.
Filters refer to colour, size, subcategory, etc. Filter values are the available values inside the filter like Red, Green, and Blue. Filter options automatically pull through from Shopify tags.
Shopify tags and filters
Shopify tags are important as the app references these tags and output them into filter options on the frontend. It’s important that every applicable product has its respective Shopify tags. Products must be properly tagged as this will determine whether they appear when a filter option is selected on the frontend.
facet
:
filter value
material
:
organic cotton
← example
In the example, every product that can be grouped into the “organic cotton” filter value should have the Shopify tag assigned to it. This will ensure that the product is visible when the “organic cotton” filter value is selected on the front end.
Facet display type
You can choose different display types to optimise the way your filter appears and functions. We support single, multiple, range, and slider.
Display type | View options |
---|---|
Multiple | List |
Range |
How to create filters in Reactify Search (start to finish)
Identify the filter options you want to display on the front end. Then, apply the tags to the applicable products in Shopify. Here's an example:
Shopify tags Filter options on frontend gender:female
gender:male
gender:unisex
Gender 🔲 Female
🔲 Male
🔲 Unisex
fabric:linen
fabric:organic cotton
fabric:recycled
Fabric
🔲 Linen
🔲 Organic Cotton
🔲 Recycled
colour:black
colour:blue
colour:light blue
colour:white
Colour
🔲 Black
🔲 Blue
🔲 Light Blue
🔲 White
In Reactify Search, go to
Filters
Click on
Add Filter Group
and enter the following:Type (choose between
search
orcollection
)Name of Filter Group (e.g.
clothing
)Pagination Type
Pagination Size
Click
Save
Tip: You can simplify your filter list even further by combining values into one option through merged values.
What does "Out of Stock Visibility" mean for filter groups?
The Out of Stock Visibility setting is relevant to filter groups. For example, if you apply the filter group to Search, then you can choose to hide out of stock products, but on collection pages show all
which means you can view all products, including out of stock.
Last updated