How do I display different items in a collection list based on the category and subcategory in Webflow?
- Set up CMS relationships with Reference Fields linking Subcategories to Categories and both to main content items.
- Add a Collection List, bind it to your main Collection, and apply filters for specific Category and Subcategory.
- For dynamic filtering, use Nested Collection Lists or Collection Template Pages filtered by the current Category or Subcategory.
To show different items in a Collection List filtered by category and subcategory, you need to use Webflow's Collection List filters and ensure your CMS structure supports relationships properly.
1. Set Up Your CMS Relationships
- Create a Category Collection (e.g., "Categories").
- Create a Subcategory Collection (e.g., "Subcategories") and add a Reference Field that links each subcategory to a Category.
- In your main content Collection (e.g., "Products" or "Posts"), add two Reference Fields:
- One for Category.
- One for Subcategory.
2. Add a Collection List for Items
- Drag a Collection List onto your page.
- Bind it to the main Collection (e.g., Products, Posts).
3. Apply Filters to Control Display
- With the Collection List selected, go to the Element Settings panel.
- Under Filter, add two filters:
- Category is [specific category].
- Subcategory is [specific subcategory].
This will show only the items that match both selected Category and Subcategory.
4. Dynamically Control Filters with Nested Collections (Optional)
If you're building category and subcategory-specific pages, use Nested Collection Lists:
- Add a Collection List Wrapper bound to Categories.
- Inside it, add a Nested Collection List bound to Subcategories, filtered where Subcategory’s category equals the parent category.
- Inside the subcategory loop, add a third Collection List bound to your main content (e.g., Products), filtered by both:
- Category equals parent category
- Subcategory equals current subcategory
Note: Webflow only allows 1 level of nesting, and you can’t nest a Collection List inside another nested list.
5. Use Collection Pages for Dynamic Filtering
If you need dynamic templates:
- Use the Category Template Page and Subcategory Template Page.
- Webflow automatically filters content on these pages based on the Template type.
- You can add a Collection List in the Subcategory Template Page and apply a filter:
- Where Subcategory equals Current Subcategory.
Summary
To filter Collection List items by Category and Subcategory, set up clear CMS relationships using Reference Fields and apply multiple filters to your Collection Lists. Use Collection Pages or nested Collection Lists for dynamic filtering based on context.
