Checkboxes (Top)
Last updated
Was this helpful?
Last updated
Was this helpful?
Step 1: Open the CMS Filter App and Navigate to the Settings Tab
Launch the CMS Filter app from the Apps panel. Then, click on the Settings tab located in the top navigation bar. Refer to the screenshot below for visual reference.
Step 2: Copy the Template and Paste it into the Webflow Designer
Within the CMS Filter app, locate and copy the template provided. Next, return to your Webflow Designer and paste the template into your desired page or section. See the screenshot below for guidance.
Step 3: Configure Filter Options
Go to the Filter tab in the CMS Filter app. Uncheck the following options:
Search
Checkboxes (Sidebar)
This ensures that only Filter Buttons (Top) remain selected.
If you do not want to customize pagination settings, you can simply click the Update Filter button at the bottom to apply the changes. Refer to the screenshot below for visual guidance.
Step 4: Customize Display Settings
To customize the layout of your filtered items:
Modify the Items Per Row value to control how many items appear in each row.
Adjust the Maximum Items value to set how many items will be displayed in total.
Once you've made your changes, click the Update Filter button at the bottom to apply them. Refer to the screenshot below for guidance.
Step 5: Connect Your CMS Collection
After updating the filter settings, you can now close the CMS Filter app.
Next, in the Webflow Designer:
Select the item container (as shown in the screenshot below).
Connect it to your CMS Collection.
Bind the necessary fields (e.g., image, title, description) to the appropriate elements within the container.
Use the screenshot below for step-by-step visual guidance.
Step 6: Connect CMS Collection to Filter Buttons
Select the top navigation buttons used for filtering and connect them to your CMS Collection.
Make sure to bind the appropriate fields (such as category names or tags) so that the filter buttons dynamically reflect your CMS content.
Refer to the screenshots below for detailed reference.
Step 7: Set Up Reference or Multi-Reference Fields for Filtering
To enable filtering functionality, you need to define the field by which items will be filtered:
In the Webflow Designer, select any CMS item from your collection list.
In the right-hand panel, locate the Reference or Multi-Reference field section.
For a Single Reference Field: Bind a Text element (found under the “reference” element in the Designer) directly to the referenced field.
For a Multi-Reference Field:
Add a nested CMS Collection connected to the multi-reference field (identified as “references” in the Designer).
Inside this nested collection, bind a Text or other element to the specific field you want to use for filtering.
Refer to the screenshots below for visual examples of both reference types.
Step 8: Match Custom Attributes for Filtering
To ensure the filter functionality works correctly, the custom attribute of each top filter button must match the custom attribute of the referenced text in your items.
This setup allows the filter buttons to correctly identify and display items based on the selected reference value.
Make sure the attribute names and values are consistent between the filter buttons and the item references.
Refer to the screenshot below for detailed guidance.
