Can Webflow filter a collection list on a collection page using a value from a record in the collection?
TL;DR
- Webflow doesn't support dynamic filtering on Collection Pages, but you can manually control related items using Multi-Reference fields.
- For dynamic filtering, use custom JavaScript to filter items client-side or third-party tools like Jetboost or Finsweet Attributes.
Webflow cannot natively filter a Collection List on a Collection Page using a dynamic value from the current CMS item. However, there are workarounds using Webflow's features and custom code.
1. Webflow’s Native Filter Limitations
- Webflow allows Collection List filtering in static pages using CMS values, but filter rules on Collection Pages must be static, not dynamic.
- For example, you can’t create a filter like “Show items where Category = Current Item's Category” within the Designer UI.
2. Common Use Case and Why it Doesn’t Work Natively
- Suppose you're on a Blog Post template page and want to show related posts with the same Category.
- You may attempt to add a Collection List below the article and expect it to filter based on the current post’s Category.
- But Webflow doesn't let you pull the current item’s category dynamically into the filter logic of another Collection List.
3. Workaround Using Multi-Reference & Filtering
- If you’re looking to show handpicked related items, use a Multi-Reference field (e.g., "Related Posts").
- Add a Collection List filtered to show items in this Multi-Reference field.
- This doesn’t use dynamic filtering, but gives manual control over related content.
4. Workaround Using Custom JavaScript
- You can load all potential related items (e.g., all posts), then use custom JavaScript to filter them client-side.
- Example strategy:
- Assign a unique data attribute to each item (e.g., data-category="tech").
- On page load, get the current item’s category via a hidden element.
- Use JavaScript to loop through and hide items that don’t match.
- This must be used carefully to avoid performance issues if you load large datasets.
5. Workaround Using Jetboost or Attributes-Based Tools
- Jetboost offers a plugin-like solution to apply dynamic filtering based on the current CMS item.
- You can configure Jetboost’s “CMS Item List Filters” to react to data from the CMS.
- Another no-code option is using Attributes by Finsweet to apply JavaScript-based dynamic filtering with data attributes.
Summary
Webflow doesn’t support dynamic filtering of Collection Lists using values from the current collection item natively. You can achieve this via Multi-Reference fields for manual control, custom JavaScript for dynamic client-side filtering, or 3rd-party tools like Jetboost or Finsweet Attributes for more dynamic behavior.