Webflow sync, pageviews & more.
NEW

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 each checkbox has the correct data-fs-filter key matching the CMS item's data attribute exactly (case-sensitive).
  • Verify collection items contain the correct data-[key] attribute value corresponding to the checkbox labels.
  • Confirm Finsweet Attributes are properly initialized on the list and checkboxes, and that Finsweet scripts are loaded correctly.
  • Check for JavaScript errors in the browser console and ensure you’re using the latest version of the Finsweet CMS Filter script.

Your Finsweet filter checkboxes not working while other filters (search, item count) function indicates a setup issue with the checkbox data-attribute, class targeting, or List attribute configuration.

1. Check Checkbox Filter Setup

  • Ensure each checkbox button or label has the correct data-fs-filter attribute, e.g., data-fs-filter="category".
  • Each list item must contain a matching data-category attribute for the filter to evaluate.
  • The key after data-fs-filter= must match the filter key set on the list items (e.g., data-category="blog").

2. Verify Collection Item Attributes

  • Go to your Collection List Wrapper and ensure each .collection-item or filtered element includes the appropriate data attribute, e.g., data-category="Design".
  • If your checkbox says Design, the collection item should contain data-category="Design" exactly.

3. Confirm Finsweet Attributes Initialization

  • Ensure you’ve added fs-attributes components from Finsweet:
  • Add the CMS Filter Attribute to the parent list.
  • Add the Checkbox Filter Attribute to each checkbox field.
  • Confirm you've linked your Finsweet scripts correctly (either via a script embed or Finsweet's Chrome Extension + Script Loader).

4. Check for Naming Conflicts

  • The key used in the data-fs-filter on the checkboxes must match exactly with the key in the collection item’s data attribute. Case-sensitive.
  • Example: data-fs-filter="topic" + data-topic="Marketing".

5. Troubleshoot Class Matching

  • Some setups rely on class target filtering. If so:
  • Your checkbox would have data-fs-filter-field referencing a class.
  • And the matching element in the collection should have this class or text content.

6. Review for JavaScript Errors

  • Open your browser’s Developer Console (Inspector > Console tab) to look for any JavaScript errors that might be breaking the filtering logic.

7. Use Latest Finsweet JS

  • Make sure you're using the most recent version of Finsweet’s CMS Filter script.
  • Use Finsweet Attributes CDN or Finsweet Extension to ensure compatibility.

Summary

Your checkbox filter in Finsweet isn't working likely due to a mismatch between the data-fs-filter key and the attribute in the CMS item or a misconfigured checkbox selector. Double-check your data attributes, make sure key names match exactly, and ensure the Finsweet Attributes are properly initialized via their official scripts.

Rate this answer

Other Webflow Questions