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 fs-cmsfilter-field matching the CMS field you're filtering.
  • Wrap checkboxes in a filter group with fs-cmsfilter-element="filter" and set fs-cmsfilter-path to the correct CMS path.
  • Confirm CMS items display field values exactly matching checkbox values and include fs-cmsfilter-field attributes.
  • Ensure the CMS list and items use fs-cmsfilter-element="list" and item respectively.
  • Update to the latest Finsweet script version and check DevTools for any JavaScript errors indicating attribute or config issues.

If the checkbox filter in Finsweet's CMS Filter isn’t working while your search field and filter count are operational, the issue typically lies with the custom attributes or structure applied to the checkbox elements.

1. Verify Checkbox Markup and Attribute Setup

  • Each checkbox input must have the correct fs-cmsfilter-field attribute.
  • The value of this attribute should match the CMS field you're filtering by (e.g., "category", "tags", etc.).
  • The checkbox label or parent element should not override Webflow input behavior or interfere with the attribute.

Example for a checkbox:

  • Add a checkbox element to your Filter Group.
  • Apply the attribute:
  • Name: fs-cmsfilter-field
  • Value: the exact name of the CMS field you're filtering on (e.g., category, type).

2. Check Filter Group Configuration

  • Ensure all checkboxes are wrapped inside a parent filter group marked with:
  • Attribute name: fs-cmsfilter-element
  • Value: filter
  • The filter group must also include a fs-cmsfilter-path that matches the binding path in the CMS.

Example setup:

  • Filter group div:
  • fs-cmsfilter-element="filter"
  • fs-cmsfilter-path="category"
  • Inside: several checkboxes with fs-cmsfilter-field="category" and appropriate value attributes.

3. Ensure CMS Item Binding Matches Filter Values

  • Each CMS item must use a native Webflow text block or element that contains the exact value the checkboxes are filtering.
  • The fs-cmsfilter-field on the CMS item also needs proper setup where:
  • Name: fs-cmsfilter-field
  • Value: same as the checkbox field (e.g., category)
  • The text inside the element must match the checkbox value exactly (case-sensitive unless using fuzzy matching).

4. Check for Collection List Configuration Conflicts

  • Ensure your CMS list has the correct attributes:

  • fs-cmsfilter-element="list"

  • The parent .w-dyn-items or equivalent should hold this attribute.

  • The individual items inside the list should have:

  • fs-cmsfilter-element="item"

5. Update to Latest Finsweet Library Version

  • Finsweet regularly updates their libraries. Outdated versions can cause unexpected behavior.
  • Re-copy the latest script from https://finsweet.com/cms-filter and paste it into your Project Settings > Before tag.

6. Use DevTools to Check for JavaScript Conflicts

  • Check browser DevTools (Console tab) for JavaScript errors when clicking a checkbox.
  • If there’s an error related to querySelector, formData, or undefined values, it usually points to a missing or misnamed attribute.

Summary

To fix a non-working Finsweet checkbox filter, confirm that your checkboxes have correct fs-cmsfilter-field attributes, live within a filter group with the correct path, and that your CMS items properly reflect the filtered values. Also, verify that you're using the latest Finsweet script and no JavaScript conflicts exist.

Rate this answer

Other Webflow Questions