How do I display different items in a collection list based on the category and subcategory in Webflow?
- Create Category and Subcategory collections with Reference fields linking them, and add these Reference fields to your main collection.
- Add a Collection List to your page, apply filters for Category and Subcategory, and use Template Pages for dynamic filtering; optionally, use nested Collection Lists for multi-level layouts within Webflow’s limits.
To show different items in a Collection List based on category and subcategory, you need to use Collection List Filters tied to Reference or Multi-Reference fields.
1. Set Up Category and Subcategory Collections
- Create a Categories Collection (e.g., “Blog Categories” or “Product Categories”).
- Add a Subcategories Collection and include a Reference field to link each subcategory to a Category.
- In your main Collection (e.g., Posts or Products), add:
- A Reference field to Category.
- A Reference or Multi-Reference field to Subcategory, depending on your needs.
2. Add a Collection List to Your Page
- Drag in a Collection List to your page or template.
- Choose your main Collection (e.g., Posts or Products) as the source.
3. Apply Filters on the Collection List
To filter by both Category and Subcategory:
- Click the Collection List Wrapper.
- In the settings panel, go to Filter.
- Set up two filters:
- Category is [Selected Category]
- Subcategory is [Selected Subcategory]
You’ll need to manually adjust these filters per instance, or use Dynamic Filters if you’re working within a Template Page.
4. Use Template Pages for Dynamic Filtering
If you want the list to auto-update based on the current Category or Subcategory:
- Use the Category Template Page to show all items where “Category = Current Category.”
- Inside this template, add a Collection List for the main items.
- Add a filter: Category equals Current Category.
- Repeat similar steps for Subcategory Template Pages.
5. Optional: Use Nested Collection Lists
For complex layouts (e.g., show Categories → Subcategories → Items):
- Nest Collection Lists:
- Outer: Categories
- Inner: Filtered list of Subcategories (based on current Category)
- Inside Subcategory: Another list showing items (filtered by both Category and Subcategory)
Note: Webflow limits nested Collection Lists to 5 items and does not allow more than 1 nested Collection List inside another.
Summary
To show different items by Category and Subcategory, use Reference fields in your CMS, apply filters to your Collection Lists, and utilize Template Pages for dynamic filtering. For multi-layered display, consider using nested Collection Lists carefully within Webflow’s CMS limits.