Why is the empty state not visible when filtering CMS items in Webflow?

When filtering CMS items in Webflow, the empty state may not appear if specific conditions aren't met or are misconfigured.

1. No Matching Items Must Exist

• The empty state only appears if zero CMS items match the current filter or search.
• If the filter is not excluding all items (even one item remains), the empty state will not be shown.

2. Check Filter Criteria

• Go to your Collection List Wrapper and check all applied filters (including dynamic filters from CMS, conditional visibility settings, or Finsweet Attributes).
• Make sure your filters are configured in a way that intentionally results in no matches for testing the empty state.

3. Verify Empty State Exists

• Select your Collection List Wrapper.
• In the Webflow Designer, click the blue “+” beside the Collection List and ensure there's an Empty State Element.
• If it's missing, add an Empty State from the Collection List settings.

4. Display Logic Conflicts

• Check that the Empty State is not hidden via:
• Display: none styling in the Style panel.
• Conditional visibility settings (e.g., only visible when certain conditions are met).
• Also ensure no interactions or animations are hiding it unintentionally.

5. Custom Filtering Libraries (e.g., Finsweet Attributes)

• If you're using client-side filtering tools like Finsweet CMS Filter, note that these operate with real-time JavaScript after page load.
• In such cases, Webflow’s built-in empty state does not respond. You need to configure a custom empty state using Finsweet’s fs-cms-empty attribute.

Summary

The empty state appears only when zero CMS items match the filter, and it must exist and be visible in the DOM. When using client-side filtering (e.g., Finsweet), Webflow's default behavior won’t trigger, so use the custom attribute fs-cms-empty to handle it instead.