.avif)
CMS Part 3: Product Filters Explained
This tutorial explains how to set up product filters in Webflow using multi-reference fields, specifically for items like accessories or colors. It walks through creating a multi-reference field (e.g., tags), binding it to products, displaying those tags dynamically on product pages, and customizing tag appearance with dynamic colors. The video also covers how to set up and troubleshoot real-time filtering behavior by linking filters to product data, and demonstrates how the CMS structure supports dynamic relationships between items using nested collection lists.
How to Add Product Filters and Dynamic Colors in Webflow
In this CMS tutorial, we walk through how to add product filters—like accessories or colors—using Webflow’s CMS. While we don’t touch the live production filter, the demo shows how to replicate the exact setup with a mock collection list using FAQs and tutorial tags.
We start by creating a multi-reference field called "Tags" and referencing a collection of tutorial tags. Once assigned, we add a collection list within a collection page, binding it to the multi-reference field. This nesting allows dynamic rendering of tags per item. We troubleshoot why only one tag was showing (it hadn't been published yet), and once published, all tags appear dynamically.
Next, we add a dynamic color field to the tag collection, setting a custom color for each tag. Using Webflow's dynamic style binding, we apply the tag’s background color to its visual element. This replicates how color filters (like red, blue, gold) would work on product filters.
Switching over to the actual product page, we explore how filters are structured using a parent “filters scroll wrapper” with nested dynamic collection lists. We walk through adding a new product type and linking it to a sample product. On the live site, this would allow that product to show only when its associated filter is selected.
Finally, the video closes by walking through clean-up—removing the test data and republishing the site. The process shows how powerful and flexible product filters can be when using multi-reference fields, nested lists, and dynamic styles in Webflow’s CMS.