The Flex theme's Collection Page Sidebar includes two options for filtering products on the collection page: Tag filter or Faceted filtering.
The Tag filter is a legacy theme feature using product tags for its filtering, while Facted filtering is a more recent platform-based system added for Online Store 2.0.
Tag Filter Setup
In order to use the Tag filter, you'll first need to add the product tags you want to use for filtering in your Products admin. Make sure you add tags to all products that you want filtered, no matter what collection(s) they belong to. Keep track of all these tags, as you'll need to write them all down in the next step.
Add tag filter block
In the theme editor (Customize), use the page selector to open Collections, then Default collection. In the left sidebar, click (+) Add block, then Tag filter.
Connect tags
Click to open the Tag filter content block.
Add a Heading for the filters, then add your Filter tags.
List each tag for that particular filter, separated by a comma. Make sure you add all the relevant tags for that filter category from all products, no matter what collection they belong to. The tags you list here must match the exact spelling of the tags you added to your Product Admin Pages.
Only the tags found in the collection will be displayed as a filter, so you don't need to worry about a tag appearing in the filter that isn't actually included in the collection your customer is viewing.
In the above example, you'll see that all tags for the 'fabric' category are entered, however, only the patterned, painted, and solids tags are displayed since they are the only tags that are found in the opened collection.
Display color swatches
Within the Tag filter, if you're adding a Color filter category, you can enable the color swatches as well by enabling the Display color swatches setting.
In order for color swatches to appear, they must have a .png file of the exact same name as the tag associated with it, and saved in Settings > Files (through your Shopify Admin); otherwise, the default web color associated with your color name (if it exists) will be used instead!
View our full article on adding custom color swatches to your Flex theme
Adding multiple tag filters
You can add multiple Tag filter blocks to your sidebar repeating the setup. In this example, there are three Tag filter blocks added for Style, Fabric, and Colour.
Tag Filter Limitations
There are some important limitations of the Tag filter to consider.
- At this time, there is no way for customers to filter by more than one tag within the same group. For example, a customer could not filter by both "Green" and "Blue" in the "Color" group, but can filter between, for example, "Green" and "Medium," assuming "Medium" is in a different group.
- Tag filtering can only be used to show products in the collection currently being viewed. It does not filter across other collections or the entire store.
- You cannot have multiple instances of the same filter tags. For example, you can not have a tag named "New" both under a "Category" filter, and "Product" filter (this will cause the filter not to clear properly).
Enable Faceted Filtering
To access the Collection section settings, use the page selector to open Collections, then Default collection. In the left sidebar, click (+) Add block, then Faceted filtering.
The filters are set up in your Navigation admin.
Adding a Faceted filtering block will disable any other blocks added to the sidebar. To use a combination of filters and other block types, consider using the legacy Tag filter.
Please note that the Faceted filtering system is currently incompatible with the Currency Selector feature.