How do I display different items in a collection list based on the category and subcategory in Webflow?
TL;DR
- Add reference or multi-reference fields in your CMS to link items to categories and subcategories.
- Use Collection List filters to display items where Category/Subcategory equals the current context; for user-driven filtering, use UI elements or tools like Jetboost.
To display different items in a Collection List based on category and subcategory in Webflow, you need to use filters on your Collection List based on Reference or Multi-reference fields.
1. Structure Your CMS Correctly
- Create a Category Collection (e.g., "Blog Categories").
- Create a Subcategory Collection (optional but useful for hierarchy).
- Add Reference or Multi-reference Fields in your main Collection (e.g., "Blog Posts") to link each item to its Category and Subcategory.
- Use a Reference Field if each item has one category/subcategory.
- Use a Multi-reference Field if items can belong to multiple categories.
2. Add the Collection List to a Page
- Drag in a Collection List block to your page or template.
- Choose the CMS Collection you want to show (e.g., Blog Posts).
3. Apply Filters to Display Based on Category
- Click on the Collection List, then use the Filter option.
- Filter by the referenced field. For example:
- Category Equals [Current Category]
- Subcategory Equals [Current Subcategory] (if using subcategories)
If this is on a Category or Subcategory Template Page, use the “Current [Collection]” option to automatically filter based on the page’s dynamic context.
4. Example Use Case
If you're building a blog:
- Blog Post CMS has a Category (Reference Field) and Subcategory (Reference Field).
- On the Category Template Page, add a Collection List and filter: Category = Current Category.
- To show further subsets within the category, add another Collection List filtered by Subcategory = X.
5. Optional: Use Tabs, Buttons, or Dropdowns (for UI-based Filtering)
Webflow doesn't support dynamic filters through user interactions natively. You can:
- Use Tabs or Dropdowns for manual filtering.
- Create separate pages filtered by subcategory.
- Use Jetboost.io or custom JavaScript for real-time filtering based on user interaction.
Summary
To display collection list items based on category and subcategory, create reference fields in your CMS, then use filters on the Collection List tied to the current category/subcategory context. For dynamic user-controlled filtering, consider external tools like Jetboost.