How can I filter and display multiple collection lists separately in a dynamic page layout in Webflow?
TL;DR
- Add multiple Collection List elements on a CMS Template Page.
- Bind each list to a CMS Collection and set unique filters using current page context (e.g., category, author, reference fields).
- Style and display lists separately with custom headings and optional sorting or limits.
To filter and display multiple Collection Lists separately on a single dynamic page in Webflow, you need to use multiple Collection List elements each configured with individual filters. Here's how to do it:
1. Use a CMS Template Page
- Make sure you're designing on a CMS Template Page (e.g., for Blog Posts, Categories, etc.).
- Webflow references the main CMS item's fields to filter other content dynamically.
2. Add a Collection List for Each Desired Filter
- Drag a Collection List into the page from the Add panel for each group of filtered content you want.
- Connect each Collection List to the relevant CMS Collection (this can be the same or different collections).
3. Set Filters for Each Collection List
- Click on a Collection List and go to the Element Settings panel (D key).
- Under Collection List Settings, click Filter.
- Add a condition such as:
- Category equals Current Category (used on a Category Template Page).
- Multi-reference field contains Current Post.
- Reference field equals Current Blog Post’s Author, etc.
- Each Collection List can have a different filter, which lets you show separate lists of related content.
4. Style and Display As Needed
- Style each Collection List section with its own heading (e.g., "Recent Posts", "Related Articles").
- Use visibility conditions if needed, such as Hide if no items are found (Webflow does not support this natively, use conditional visibility or JavaScript as a workaround).
5. Optional: Limit and Sort Each List
- Set Sort Order (like Newest to Oldest).
- Add a Limit (e.g., show only 3 items).
- This helps isolate content into clean sections.
Summary
To show multiple separately filtered collection lists on a dynamic page, add multiple Collection List elements, bind each to a CMS Collection, and configure unique filters per list based on the current page’s context. This allows dynamic content segmentation, like showing related articles, author contributions, or category-specific content.