Adding 'Load More' Button To CMS List In Webflow (2022 Update)

Today, I am going to show you how to build a 'Load More' button in your CMS Lists in Webflow. This way, when you paginate your collection lists, you don't have to load a brand new page when you go to your next set of items. These items will appear and load on the page under your other items automatically without loading an entirely new page each time you toggle through your paginated list. This can help give your site a more subtle and clean user experience. I will also show you how to 'Load More' on 'Infinite Scroll'.

I have been using Webflow to build my websites for years. If you are a novice website developer looking to launch a new project or business (and don't know how to code), your best bet is using Webflow. With Webflow, you code visually, and have complete control over your website down to the pixel. No more having to go through style sheets or JSON files in Wordpress in order to customize your site to your needs. With Webflow, you are able to visually code your website from scratch.

Today we are going to pair the power of Webflow with some additional functionality powered by our friends over at Finsweet. Finsweet has an entire directory of attributes that we can easily load into our Webflow site to give us even more functionality than is already native in Webflow. Attributes are just little pre-packaged code add ons that we can attach to the elements on our page that can give us some cool extra features. This way, we don't need to learn how to code, but can leverage their directory of code to help power our websites with a few simple clicks.

Today, we are going to use Webflow attributes to create a 'load more' button at the bottom of our collection list that will allow us to load the next x amount of items to the bottom of our paginated list without having to load a brand new page each time. We are going to do this in 2 steps: 1) We are going to paste Finsweet's 'CMS Load' Javascript in between the Head tags of our page 2) We are going to add two attributes from Finsweets library to our paginated Collection List. After all of this is completed, we will have a beautiful collection list that will 'load more' of our CMS items automatically under the items already there!

-------------------

Resources -

--------------------

Timestamps -
0:00 INTRO
1:25 Paginate Your CMS List
2:01 Add Finsweet's CMS Script To 'Head Tag'
3:08 Add Our Attributes
6:11 Bonus: Load More On 'Infinite Scroll'
8:11 CONCLUSION

--------------------

👨 WHO AM I -

I'm Alex, a 26 year old Financial Analyst who lives in Nashville, TN. I'm now over half way through my twenties (I'm getting old!) and believe that I've acquired some valuable life advice over the past 6 years that I wish I knew when I was just entering my third decade of life. I make videos to pass on these life lessons to all of you (along with other ideas, tips, tricks, knowledge, experience, stories of success, stories of failure, etc.) so that you all can survive your twenties with more grace than I have managed so far!

[raphaeluzoagbaprophius]

This tutorial literally saved my life been stuck on this for hours

[christellehayek]

Life saver!
I love the way you teach, you give clear and organized instructions.
Do you have a tutorial on how you styled that button?

[Corina-tufq]

Thanks a lot for this video!! I would need two different collections with this "load more" button on a single page. Does this work?

[brianchang]

Amazing, thank you. What if they click on an item, check it out, and go back to the page? Is there a way to take them back to the exact depth they were at previously

[kellivu]

You're the best thank you so much!

[claraloustau]

Thanks bro for this video ! Really helpful

[hagaitsidon]

Thank you!
I have a problem when the elements are loaded the interaction with the hover stops working.

[ben-vped]

Thank you so much! This is really helpful!

[sayekatchakraborty]

Thanks bro ❤ literally save life. But need to more detail tutorial. Make something more for us ❤😊

[alyu]

This wonderful script makes shit on mobile

[squidux]

In my clients case, collection list was renamed by another developer to something else. the script did not work. I went to sandbox project of mine and did it again with the name "Collection List" and it worked.

[katerinaromanovich]

This method has one big problem - creating duplicate pages with the "?" parameter. This has a bad effect on SEO. Has anyone tried to get rid of this parameter?

[drriks]

It worked for a day and then stopped working - great