Need assistance with Webflow's Finsweet filter. The search field and filtering number are functional, but the checkbox filter is not working. Urgently seeking help with this issue.
TL;DR
- Ensure checkboxes use correct
fs-cmsfilter-fieldvalues matching CMS data exactly and are placed inside a valid checkbox group withfs-cmsfilter-type="checkbox". - Confirm all required Finsweet attributes are correctly applied and the CMS Filter script is properly loaded and initialized.
- Check for conflicting JavaScript or custom elements that may interfere, and test a minimal version to isolate the issue.
Your Finsweet Filter checkbox isn’t working, while search and count display correctly. This issue is often caused by incorrect setup of checkbox attributes or JS initialization.
1. Verify Checkbox Structure & Attributes
- Each checkbox input must have the
fs-cmsfilter-fieldattribute set to the correct field name from the CMS collection. - Example: If filtering based on a CMS field called
category, the checkbox should havefs-cmsfilter-field="category". - Ensure your checkboxes are inside a valid Checkbox Group with
fs-cmsfilter-type="checkbox"assigned. - Confirm each individual checkbox and its label are created using Webflow’s native checkbox element (not custom elements or divs).
2. Ensure Matching Filter Values
- The value of each checkbox must match exactly the CMS field value (including case and spacing).
- For example, if a CMS item has the category “Web Design”, the checkbox must have
value="Web Design".
3. Check for Custom Attributes Consistency
- The collection list item (the element repeating items) must have attribute
fs-cmsfilter-element="item". - The element containing the filters (like the checkbox block) should have
fs-cmsfilter-element="filters".
4. Confirm Finsweet Initialization
- Make sure your page includes the correct CMS Filter script from Finsweet's CDN.
- Check that JS is properly initialized with
fs-cmsfilterand not being blocked by any script errors.
5. Use Unique Field Names for Multi-Factor Filters
- If you're using multiple filter types (e.g., search + checkbox + dropdown), ensure each has a unique
fs-cmsfilter-fieldname to avoid conflicts.
6. Inspect for JavaScript Conflicts
- Check your browser developer console (Chrome Dev Tools) for any JS errors that may interfere with Finsweet.
- Conflicting scripts or incorrectly formatted attributes may silently break the checkbox function.
7. Rebuild One Working Filter as a Test
- As a last resort, create a simple test filter on a new page:
- One checkbox group filtering by category
- A collection list of items with the category displayed
- If this test works, gradually integrate the working pattern into your full page setup.
Summary
To fix your Finsweet Filter checkbox, ensure checkboxes have the correct fs-cmsfilter-field, values exactly match CMS data, the DOM structure uses proper attributes, and the Finsweet script is correctly initialized. Rebuild a minimal working version to isolate if needed.