How can I filter and display multiple collection lists separately in a dynamic page layout in Webflow?

To filter and display multiple Collection Lists separately on a dynamic page layout in Webflow, you need to use multiple Collection List elements, each with its own filter applied based on a reference or multi-reference field. Here's how:

1. Use Dynamic Page as Template

• Ensure you’re on a Collection Page (e.g., a Blog Post Template page).
• This page acts as a dynamic template, pulling in data from a single Collection item.

2. Add Multiple Collection Lists

• Drag separate Collection List elements into the Designer.
• Each Collection List can pull from the same or different Collections, depending on what you're displaying (e.g., related posts, categories, tags, authors, etc.).

3. Set Collection Source and Bindings

• For each Collection List, choose the appropriate source Collection.
• Bind text or images to fields from the connected Collection.

4. Apply Filters to Each Collection List

• Select a Collection List, then go to the Element Settings Panel (gear icon).
• Under Filter, set criteria based on:
• Reference fields (e.g., only show items where Category equals this Current Blog Post’s Category).
• Multi-reference fields (e.g., only show Team Members related to this Project).
• Webflow allows filtering by "Current [Collection]" references on dynamic pages.

5. Style and Display

• Style each Collection List independently.
• You can display items vertically, in grids, scrollable divs, etc.

6. Use Collection List Sorting (If Needed)

• Use the Sort Order option in each Collection List to define how the items are ordered (e.g., by date, name, etc.).

Summary

To show multiple filtered Collection Lists on a dynamic page in Webflow, add separate Collection List elements, set the source Collection for each, and apply dynamic filters using reference or multi-reference fields related to the current page. This allows you to display related items or grouped content separately on the same page.