Filter Collection lists

Learn how to filter and limit items in Collection lists.

 
This video features an old UI. Updated version coming soon!

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
  4. Show featured items only
  5. Hide current item
  6. 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

The filters section includes a plus icon to add a new filter to your collection list. The plus icon is highlighted while the rest of the filters section is dimmed.

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.

There are two filters currently added in the filters section. The trash can is highlighted and outlined on both filters.

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
The Add filter panel includes a Featured? is On setting. There is also a save button and x close button.

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
The Add Filter panel includes a Blog Post is Not setting. The third field is showing "current blog post." There are also an x close button and a save button.

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.

The Add Filter panel includes a Author Equals Author of Current Blog Post setting in the three fields. There is also an x close button and a save button.
Learn more
Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!