Streaming live at 10am (PST)

Adding Custom Attributes to Webflow CMS List Items


#1

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?


#2

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
https://forum.webflow.com/search?q=isotope
https://forum.webflow.com/search?q=mixitup

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.