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 -
🍯 Finsweet: www.finsweet.com
🍬 Finsweet CMS Load Directory: www.finsweet.com/attributes/c...
🟣 Webflow: try.webflow.com/l9bi5zf0cljy
--------------------
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!