Using Webflow CMS Collection List Filtering to Show Only Matching Items

Quick answer

Add a Filter control to a Collection List bound to a CMS collection, set a condition (e.g., Category is News), and the list will display only published items that match that condition—no custom code required.

How the filter works

When you place a Collection List on a canvas, Webflow renders it by querying the CMS for all published items in the selected collection. The Filter control adds a client‑side predicate that is evaluated after the data is fetched. Items that do not satisfy the predicate are removed from the DOM before the list is styled.

Worked configuration

1. In the Designer, select the page where you want the list.
2. Drag a Collection List element onto the canvas.
3. With the list selected, open the Collection List Settings panel and choose your CMS collection (e.g., "Blog Posts").
4. Click the Filter button inside the settings panel.
5. Set the first dropdown to the field you want to test (e.g., Category).
6. Choose the operator is.
7. Enter the value you want to match (e.g., News).
8. Optionally add more conditions using the AND button; each new line must also evaluate to true for an item to appear.
9. Save the settings, style the list as usual, and preview.

The list updates instantly in the Designer preview and on the published site whenever the underlying CMS item changes and is republished.

Limits and common mistakes

What the filter cannot do

• It only works on published items; draft or staged entries are ignored.
• Fields of type Multi‑Reference or Rich Text cannot be used directly in a filter condition.
• The filter does not alter the collection data or the URL of a Collection Page; it only changes what is rendered in the list.
• When pagination is enabled, the pagination controls reflect the filtered count, not the total number of items in the collection.

Performance considerations

Each filter adds a small amount of client‑side processing. For collections with thousands of items, keep the number of filter conditions low (ideally one or two) to avoid noticeable delays in list rendering.

Verification steps

1. In Designer, switch to Preview mode and confirm that only items matching the condition appear in the list.
2. Publish the site, open the live page, and use the browser’s developer tools to inspect the Collection List element. Verify that the DOM contains only the expected items.
3. Edit a CMS item so that its field value changes from matching to non‑matching (or vice‑versa), republish, and reload the page to see the list update accordingly.