Why does the empty state not work?

Attributes
1

I followed the new v2 docs and applied fs-list-element=“empty” onto the empty state element of the collection list (.products-grid_wrapper which is the collection list wrapper element, see the link to my site below).

this is the preview link: https://preview.webflow.com/preview/harrisons-curtains-blinds?utm_medium=preview_link&utm_source=designer&utm_content=harrisons-curtains-blinds&preview=aad081fd84d250b4c93575573fd2ca29&pageId=68cc718f52cbf31ddecda888&locale=en&workflow=preview

Select the filter “Shutters“ and the empty state should show. Why doesn’t it?

Thanks!

3

Hey @christianhustert

Thanks for sharing the HTML and empty-state setup. I looked through it and I can see why the empty state isn’t firing.

You’ve added fs-list-element="empty" to .products-grid_empty (the Collection List’s native empty element). The issue is that Webflow only renders that native empty element when pagination is enabled AND there are at least 2 pages, the native pagination Next button must be present for Webflow to trigger the empty state.

You can try these 2 options:

  1. Enable Webflow pagination and make sure the list produces more than one page. You can display the full rendered list with fs-list-load="all" or whichever List Load Method that you prefer.

  2. Move the fs-list-element="empty" to a wrapper <div> outside the Collection List. That external element will respond correctly to the list’s empty state.