How to Filter Webflow CMS Collection Using Cookies with Finsweet Attributes or Alternatives?

We are building a hybrid Webflow app and are facing an issue with CMS collection filtering. Currently, we are using the Finsweet Attributes CMS Filter plugin (CMS Filter for Webflow - No-code using Attributes) to filter the collections. However, we need to filter the CMS collection based on a cookie value instead of the default query-based filter provided by the plugin.

Our goal is to apply this cookie-based filter across all pages.

We are open to using a different plugin or approach if it can achieve the desired functionality. Has anyone implemented a similar solution or can suggest an alternative way to handle this? Any help or guidance would be greatly appreciated!

Hi Ashan,

I’m confused how FS Filter relates to building designer extensions and hybrid app development? I’ll assume this is a Webflow site and not a Webflow designer extension you’re building.

Yes you can build what you’re describing, but there are a few tricks to get it working right. The basic approach is;

Setup;

  • Build your CMS filter normally, including the cookie-controlled fields
  • Optionally, hide those filter fields if you do not want the user to see / modify them
  • Probably, configure the filter form without a submit button so that changes occur immediately on filter setting change
  • Set your cookies

Coding;

  • On page load, after FS CMS Filter has initialized, get the cookie, and set the cookie-controlled filter fields to the setting you want
  • Trigger an event on one of the filter fields to cause the filter to apply. Depends on your filter setup, but this might be a changed event, or an input event. Make sure it bubbles so that FS Filter libs see the change.