Filtering Collection Lists

 

Once you connect a collection list to a collection, it will display the first 100 items in that collection. However, you can choose which items to display by using filters. You can display more than 100 items by enabling pagination. Filtering items is available in Collection list settings in the Element settings panel (D).

In this lesson
  1. Add filters to a list
  2. Delete filters
  3. Filter examples
  • Show featured items only
  • Hide current item
  • Show related content
This lesson talks about creating filtered collection list in the Designer. Real-time filtering/sorting on the live website (Faceted navigation) is not yet available natively. Vote for this feature.

Add filters

Filtering Collection Lists in Webflow

Filters allow you to show specific collection items in a collection list that match whatever filter(s) you create. You can choose from a number of filter rules available for each collection field type. To create a filter:

  1. Select the collection list you want to filter
  2. Go to the Settings panel (D)
  3. Add a Filter under collection list settings by clicking on the plus (+) sign
  4. Select the field you want to filter by in the first dropdown
  5. Choose a rule in the second field
  6. Specify a value if needed
  7. Click Save

You can add as many filters as you want. The filters will be combined by an AND operator.

Need to know: You won't be able to apply multiple fields for the same collection field.

Delete filters

You can delete applied filters by clicking on the trash can icon next to the filter.

Multiple filters applied to the same collection list. You can delete a field by clicking the trashcan icon.

Show featured items only [Filter example]

Let’s say you want to only display featured blog posts on your homepage. To do that:

  1. Add, create, and style a “Blog Posts” Collection List
  2. Add a Filter in the Settings panel
  3. Select the “Featured” Switch field from the first dropdown
  4. Choose is on in the second dropdown
  5. Click Save
Filtering Collection Lists in Webflow

Learn more: Switch field

Hide current item [Filter example]

If you have a blog and you want each blog post page to feature a list of other blog posts, you can exclude the current blog post from the list using a filter. To exclude the current collection item, the blog post in this case, do this:

  1. Add, create, and style a “Blog Posts” Collection List
  2. Add a Filter in the Settings panel
  3. Select the Collection name from the first dropdown
  4. Choose is not in the second dropdown
  5. The third field will show “current collection item”
  6. Click Save
Filtering Collection Lists in Webflow

Learn more: Collection pages

Show related content [Filter example]

Let’s say you want to display all the blog posts written by an author on the Author’s page. You can use a filter to only show those blog posts that reference this Author:

  1. Add, create, and style a “Blog Posts” Collection List
  2. Add a Filter
  3. Select the Reference field for your Authors from the first dropdown
  4. Choose Equals in the second dropdown
  5. Choose “current Author” in the third one
  6. Click Save

Now, each author page will show a list of the blog posts that reference this author. You can limit this list if you want to show only a specific number of related content.

Filtering Collection Lists in Webflow
Learn more