Filtering CMS collection with search & category buttons

Design help General
1

Hi there,

I am trying to recreate the filter feature on this site on my site that can narrow down search results for CMS collection items, either through clicking category buttons or typing in search.

I believe my setup in the Navigator is identical to the example (I’ve tried doing it myself, and I’ve tried tweaking a clone), but there are a couple issues I’d like help with.

  • The filter buttons are unresponsive, even with the correct custom code embedded and reference links between CMS collections. I haven’t seen that the example site uses any kind of interaction so I don’t believe that’s the issue, and our custom codes are the same.
  • The search itself acts as a regular ‘send email’ form, and I’m not sure how the example has made it a filter search that doesn’t say “Thanks for your submission” on ENTER
  • The text font and button colors/style isn’t changeable. I’m considering writing custom code to style the buttons as a workaround, but these edits are easy on the example site, and I’m not sure why I cannot change the style of the category buttons on mine. The search bar is fine when trying to change the font.

Any advice is greatly appreciated. I love this feature and I’m just getting stuck at the last hurdle. Cheers!

2

I believe they used MixItUp to make that site - there is an awesome tutorial/thread in the forum on this.

I would recommend checking out Jetboost though… MixItUp does require a bit of coding, whereas, with Jetboost, you can do exactly what you want without needing to know how to code.

3

Perfect, I’m checking out the Webflow forum threads on MixItUp right now. Is there a way to see how the example site has already used MixItUp? Cloning the site and publishing to a webflow.io works great, just wondering if that’s a possible shortcut to add whats missing to my original site.

4

This should be perfectly solvable with No Code Flow filter component. Every searchable item is a Webflow CMS item. Every visual aspect (including states) can be modified in the Webflow designer. We built it as a cloneable component with a little video tutorial to implement it – should take you around 10-15 minutes to get started.

:sparkles: A demo can be seen here → https://ncf-filter-styled.webflow.io/

Filter Vid