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-field values matching CMS data exactly and are placed inside a valid checkbox group with fs-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-field attribute set to the correct field name from the CMS collection.
  • Example: If filtering based on a CMS field called category, the checkbox should have fs-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-cmsfilter and 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-field name 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.

Rate this answer

Other Webflow Questions