How can I create filter buttons on top of styled events in Webflow CMS?
TL;DR
- Ensure the Events Collection includes a Category or Tags field.
- Add a Collection List to the page, connect it to the CMS, and style the event items.
- Create a Div Block with buttons for each category/tag.
- Use Finsweet’s CMS Filter by adding custom attributes to the Collection List and buttons.
- Alternatively, use custom JavaScript to filter events by toggling visibility.
- Test filtering functionality and publish your site.
To create filter buttons that enable users to filter styled events in your Webflow CMS, follow these steps:
1. Structure Your CMS Collection
- Ensure your Events Collection has a Category or Tags field.
- Add appropriate categories or tags to each event item.
2. Add CMS Collection List to Your Page
- Drag a Collection List onto your page.
- Connect it to the Events Collection.
- Design your event card layout within the Collection Item.
3. Create Filter Buttons
- Add a
Div Blockto contain the filter buttons. - Inside the div, add multiple Button Elements (one for each category/tag).
- Set each button’s text to match a category/tag from your CMS.
4. Use Finsweet’s CMS Filter (Recommended)
- Go to Finsweet’s CMS Filter (https://www.finsweet.com/cms-library/filter).
- Follow these steps:
- Add a custom attribute to the Collection List Wrapper (
fs-cmsfilter-element="list"). - Add the same attribute to filter buttons (
fs-cmsfilter-control="filter"). - Assign each button a filter value (matching the categories/tags) using
fs-cmsfilter-value="Category Name".
5. Embed Custom JavaScript (Alternative Approach)
- If not using Finsweet, you can achieve filtering with custom JavaScript.
- Add a custom embed in your page’s
<body>: - Use
querySelectorAllto target buttons and CMS items. - Use
addEventListenerto toggle item visibility based on the selected category.
6. Test and Publish
- Preview your site to ensure the buttons filter events correctly.
- If using Finsweet, verify that the filtering is instant without page reloads.
- Publish your site and test on different devices.
Summary
Use Finsweet’s CMS Filter for the easiest no-code filtering of Webflow CMS items. If needed, you can implement custom JavaScript for more control. Ensure that event categories/tags are correctly structured in your CMS Collection for smooth filtering functionality.