Streaming live at 10am (PST)

Isotope Filter + Webflow CMS - HELP?


#1

I’m trying to use the Isotope Filter Plugin with my website and i wanted to include Webflow CMS. My goal is to create a product catalog where i can filter out the products by different criteria through a menu. (Ex. Product Size, Product Color, Product Brand) The issue i’m running into is that my client requires me to use CMS for their website. Currently to my knowledge Webflow CMS does not allow me to add custom classes to individual Dynamic List items within a collection so that the filter can show the desired option selected through the menu. I found a post that @SidneyOttelohe created that has a demo site that was able to achieve this using webflow CMS. The issue is he never actually showed anybody how he was able to perform this.

Could anybody please take a look at the demo, and explain to me how he achieved this?


Here is another demo that i found that also uses the plugin with CMS

Thank You!


#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.

#3

I did use the search feature before asking the question. This is how to set up the Isotope plugin, but it is not how to set it up with CMS. Please read the full post before replying. Thank you!


#4

The update to the previously linked topic, which was mentioned somewhere in the thread if you had gone through it instead of just reading the first post. (although I should have linked directly to this, but it COULD be searched as well)

[TUTORIAL] MixItUp filtering plugin with Dynamic content


#5

Thank you for trying to help. Unfortunately her tutorial is not very detailed, and she skips crucial parts in the set up. She assumes i know what she means when she says “Here we assume that we have collection of ITEMS (it may be blogposts, images, articles, etc. ) and CATEGORIES for that items.” then she skips the whole beginning of how to set up the collections.


#6

Your request is quite broad, and may not be easily answerable/solvable via the forums as most of the community are designers. Would you like to move your post to the Freelance category instead?

Alternatively, you can also contact specialists in the directory to custom code a solution for you.

You can also provide feedback to Sabanna in her thread, or provide additional information about your implementation once you get stuck on a specific step.


#7

Her tutorial answered the question, but she just did not explain it in detail enough to follow along. Her tutorial skipped crucial steps.


#8

I’m in the process of re-creating the tutorial she created in video format to better explain the process. Hopefully i can figure it out. I think the issue is her first language is not English, so it can be confusing to understand. If i can figure it all out i will post a video tutorial soon.


#9

Whew. I finished it finally.

http://mixitup-jquery-filtering-93d433c38f17a4.webflow.io/


#10

Looks great! Seems like the tutorial worked for you


#11

cool. I used it to create this site for myself