Filtering Webflow CMS Collection Lists with URL Parameters

Filtering a Webflow CMS Collection List with a URL Parameter

You can filter a Collection List in Webflow by using the built-in Filter setting together with a simple URL parameter, which means you do not need to write any custom JavaScript or call the CMS API manually.

How the filter works

When a page URL contains ?filter=VALUE, Webflow's client-side script reads the parameter after the page has loaded, sends a request to the CMS, and the CMS returns only those records where the chosen field equals VALUE. The filter is evaluated after the page is published; while you are designing the page you only select the field you want to filter on, you do not set the value. In the Designer preview the List will show all items because the URL parameter is absent, but once the site is published and the parameter is added to the URL the filter takes effect. This mechanism works for text, number, and reference fields, but it does not support boolean or enum-type fields directly.

Importantly, the filter works only on the front end. The client-side script first downloads all items in the Collection, then applies the filter in the browser. For Collections with more than roughly 10,000 items this can cause noticeable load times and increased bandwidth usage. If performance becomes an issue, consider using the Webflow CMS API to perform server-side filtering and pagination instead of the built-in client-side filter.

Step-by-step configuration example

1. Open the CMS panel and create a new Collection named "Products".
2. Add a Text field called "Category". The internal slug that Webflow generates will be "category".
3. Enter several items, for example: "Electronics", "Clothing", "Books", and "Home & Garden". Make sure each item has a value in the Category field.
4. In the Designer, drag a Collection List onto a blank page and select the List component.
5. With the List selected, open the Settings panel and locate the "Filter" option. Choose "Category" from the dropdown list.
6. Publish the site using the "Publish" button in the top-right corner.
7. After publishing, open the live URL in a browser and append ?filter=Electronics. The List should now display only the items whose Category equals "Electronics".
8. Return to the CMS, edit one product's Category to "Clothing", save the change, then refresh the page with the same ?filter=Electronics URL. The list should no longer show that product, confirming that the filter updates in real time.

Key details to watch for

• The field you pick in the Filter dropdown must be a field that actually exists on the Collection; if you select a field that has been deleted or renamed, the filter will return no results.
• The slug of the field (the internal name) must match the parameter name exactly. For a Text field named "Category", the URL parameter should be ?category=Electronics. Using the wrong case or an extra space will break the filter.
• Only a single filter can be applied directly in the Designer. If you need to filter on multiple fields you must either write custom code, use a third-party integration, or accept that the List will show all items and filter them client-side with JavaScript.
• Changing a field's name after a filter has been set breaks the link. To fix it, reopen the List settings, re-select the correct field, or delete the List and add a new one.
• Client-side filtering can become slow when the Collection contains more than roughly 10,000 items, because the browser must download all records before the filter can narrow the list. In such cases consider using the CMS API for server-side filtering and pagination.
• For reference fields, the filter works only if the referenced item's ID matches the value sent in the URL; otherwise no items are returned.

Verification checklist

1. In Designer, add a Collection List and set its Filter to a valid field.
2. Publish the site.
3. Visit the published URL and add ?filter=testValue. Confirm that only items whose Category (or the chosen field) equals "testValue" appear. Also open the CMS preview for the List to see that the same filter is applied in the preview.
4. Edit a Collection entry's filter field, save, then refresh the page with the same URL parameter. The list should update to show or hide the edited item accordingly.

When to use server-side filtering

If your Collection exceeds the performance threshold or you need to filter on more than one field, the built-in filter is not sufficient. You can call the Webflow CMS API (for example, GET /api/collections/:slug/items?where[category]=Electronics) from a custom script or a no-code automation tool. This moves the query to the server, reduces client-side load, and allows unlimited filter combinations.

Summary

Webflow's native Filter setting lets you show a subset of a Collection List based on a single field value passed via the URL. By ensuring the field name matches exactly, publishing the site, and testing with a simple ?filter=value query, you can verify that the filter works. Keep in mind the one-filter limitation, watch for large Collections, and use server-side filtering when performance or complexity demands it.