Streaming live at 10am (PST)

Isotope + Webflow's CMS

My first experience with Webflow’s CMS was amazing. What a great tool!
Thank you dear webflow team :smile:

And also very nice to used mixed with plugins like Isotope.
BTW, many thanks to @Mogeek for his amazing exemple.

PS.: So sorry, but the whole website is in Portuguese. For the Isotope + CMS page, please check here:


That’s absolutely great :smile:

Are you using Masonry on top of this or doesn Isotope take care of the grid?

You should know that I have a very big screen and yet the “cards” feel oversized. I can only see one line of cards.

Thanks @vincent!
Only Isotope :smile:

You are totally right! I will create one more css media queries for huge screens like yours to create 4 columns.
Thanks for the advice!

As for now the cards are very high. Adding a column will mecanically shrink them a bit.

Thanks for the precisions :slight_smile: Nice site overall, simple and not cluttered.

1 Like

Very good job :clap: :slight_smile:

1 Like

Beautiful work @maximus :smiley: very inspiring to the whole community seeing someone incorporate isotope with the cms! :smiley:

1 Like

Hi @maximus, thanks for sharing such an amazing piece of work.

I’ve been trying to achieve the same but there must be something I must be doing wrong… Thus, I’d thought I ask you two questions that might be the key to all my problems with getting this to work:

1. What’s the exact code you added in the website footer section?

When viewing your website in webflow designer, as you open the Product page settings there’s no code there to be found. Thus, I presume you added it to the site’s footer, don’t you? Can you please share it with us?

2. How did you get this to work with the dynamic embed?

I mean, in a normal scenario you’d have the “item” container which is used for filtering by simply adding global classes to each of them. For example, one can create a div with class “item” and then add additional classes to it:

.item .blue .small
.item .blue
.item .red

Then, you’d use buttons with custom data-filter attributes to filter the above.

However, looking at your website, you created a dynamic embed with the “item” container, and then “dynamic” as the only additional class. That is, a div named .item .dynamic

I’d really appreciate if you could shed some light on this. I’ve been stuck on this for a week now!

Thanks a lot!

1 Like

Hey Omar,

I’m glad that you like it :wink:

  1. I’ve followed this nice tutotial here and just adapt it a little bit to fit on what I was looking for.

        <script src=""></script>
        <script src=></script>
       // add dynamic class
     ( '.w-dyn-item .categoria' ).each
     	function( index, element )
     		var _this = jQuery( element );
     			_this.parent().parent().addClass( _this.text().toLowerCase() );
     $(document).ready( function() {
       // init Isotope
       var $grid = $('.grid').isotope({
         itemSelector: '.w-dyn-item',
         sortBy : 'random'
       // layout Isotope after each image loads
       $grid.imagesLoaded().progress( function() {
       // store filter for each group
       var filters = {};
       $('.filters').on( 'click', '.button', function() {
         var $this = $(this);
         // get group key
         var $buttonGroup = $this.parents('.button-group');
         var filterGroup = $buttonGroup.attr('data-filter-group');
         // set filter for group
         filters[ filterGroup ] = $this.attr('data-filter');
         // combine filters
         var filterValue = concatValues( filters );
         // set filter for Isotope
         $grid.isotope({ filter: filterValue });
       // change is-checked class on buttons
       $('.button-group').each( function( i, buttonGroup ) {
         var $buttonGroup = $( buttonGroup );
         $buttonGroup.on( 'click', 'button', function() {
           $( this ).addClass('is-checked');
     // flatten object by concatting values
     function concatValues( obj ) {
       var value = '';
       for ( var prop in obj ) {
         value += obj[ prop ];
       return value;
  2. To be honest, I had a huge help from a developer/friend (Morris Russel) to add dynamically a class using information from cms, but basically is:

       // add dynamic class
     ( '.w-dyn-item .categoria' ).each
     	function( index, element )
     		var _this = jQuery( element );
     			_this.parent().parent().addClass( _this.text().toLowerCase() );

I hope it also works to you :slight_smile:

PS.: :sweat_smile: Don’t forget to add < script >


Thanks a lot Maximus!

That really helps. A lot.

Will try and make it work and make sure I’ll post the results.



Were you able to get the custom code to work with your CMS? If so, please shine some light on how you did it.


Hi guys,

Where does that code pull the dynamic class information from? Should “categoria” correspond to a field in my CMS collection? Trying to figure this out and pretty new to this!

Thanks a lot!