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: What filter options/facets are displayed What the default sort option is What the page size is What the pagination type is Other misc settings. E.g. Hide/show out-of-stock products
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 Swatch Box Checkbox
Range

How to create filters in Reactify Search (start to finish)

1. 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

2. In Reactify Search, go to Filters

3. Click on Add Filter Group and enter the following:

   • Type (choose between search or collection)

   • Name of Filter Group (e.g. clothing)

   • Default Sort (usually best sellers)
   • Pagination Type

   • Pagination Size

   • Out of Stock Visibility
4. Click Save

5. Click Add Facet. Create a facet (filter) for every attribute you'd like shoppers to be able to select on the front end. A facet will need to be created for every filter option. Make sure to select the corresponding field as the filter values will be based on this.

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.

Copy a Facet to Filter Groups

For those managing multiple Filter Groups, you can now copy a Facet to other Filter Groups, streamlining the setup process and eliminating the need to manually recreate facets. This feature enhances efficiency and consistency across filter configurations.

Steps to Copy a Facet

1. Go to Filter Group where the facet you want to copy is located.

2. Hover over a Facet you wish to copy.

3. Click the "Copy" button

4. A pop-up will appear displaying the available Filter Groups

5. Make Your Selection

A confirmation message will indicate that the facet has been successfully copied. Then, you can verify the facet ranking by navigating to each Filter Group and ensure the facet appears in the correct order.

Considerations

• Once copied, facets in different Filter Groups are independent of each other.

• If modifications are made to one facet in the future, it will not be reflected in the copied versions.

• Always verify facet placement after copying to ensure correct configuration.