Streaming live at 10am (PST)

Adding Custom Attributes to Webflow CMS List Items

I’m trying to create a ECommerce website using Webflow CMS, The Issue i’m having is i want to create a Product Filter where the user can filter the products based on certain criteria (Ex. Size, Color, Brand, Model). I created a simple filter using the Isotope / MixItUp Plugin Mix It Up Demo I Created but as you can see i cannot select multiple options, i can only select one at a time.

I’m trying to find a way to create a filter similir to this filter…

Filter Demo
Filter Documents

This seems possible, but i can’t find a way to give each item custom data for the script to filter the items. The script uses data-attributes like "Data-coulour=“red” but i noticed that Webflow likes to copy any class or attribute you give one item to every item in the list. This is making it difficult to find a way to give the products unique attributes to filter them by. I was hoping multi reference fields would work but it does not add anything unique to the list items HTML.

Do you know a trick that could allow me to give individual list items a unique tag/Attribute/class so i can create a filter script to filter the products?

These duplicate thread(s) may already have a solution for you:

[TUTORIAL] Using Isotope and MixItUp plugins with Webflow
[TUTORIAL] MixItUp filtering plugin with Dynamic content

Please try to search the forum before asking a question. Thank you!

Next steps:

  • If the answers from the duplicate(s) don’t fully address your question, please edit your question to tell us why.
  • If you have tried one of the above but have difficulty implementing the solution, please describe in detail what you have already tried.

Finsweet has all the filter functionality you should need!