Get Started with Jetboost Today
Premium Webflow App, no custom code required. Join thousands of other professionals who are using Jetboost for Dynamic Filtering, Real-Time Search and more.
If you’re looking for the easiest way to add infinite scroll to your Webflow website, look no further. Jetboost is a Webflow add-on that increases the native abilities of Webflow, without requiring you to write any custom code.
With Jetboost, it’s easy to add infinite scrolling to any page on your Webflow website, allowing your customers to flip through multiple pages of products or blog posts without reloading the page. Keep reading for a step-by-step guide on adding infinite scroll to your site.
Infinite scrolling is a method of pagination that doesn’t require a page refresh or for users to click “next page” in order to see more products. Like social media or many news websites, infinite scrolling uses advanced coding to continually refresh data and show new content at the bottom of the list.
Although this seems extremely complicated, especially for beginners,, it’s possible to add infinite scrolling to any Webflow CMS collection without code.
If you choose to use custom code on your Webflow website, you have endless options. You can do much more than infinite scroll; with custom coding, you can make your Webflow page whatever you want it to be. However, the downside of this is that you need to know how to code. This skill can take months or years to master.
With Jetboost, on the other hand, there are multiple advanced coding concepts made extremely simple. Jetboost offers several different CMS integrations, one of which allows you to add different styles of pagination that Webflow doesn’t offer natively.
Free to use on any Webflow.io domain, using Jetboost is as simple as using copy+paste. In a matter of minutes, you’ll be able to create a customized infinite scroll of any CMS collection on your Webflow website. Jetboost includes:
You can use infinite scrolling for your blog posts, sale items, or specific pages on your website. Once it’s installed with Jetboost, you can leave it alone or adjust it to suit you and your client’s needs.
Of course, any add-on comes with a bit of a learning curve. Luckily, Jetboost is easy to install and use. Here are the steps to enable infinite scroll on a Webflow website with Jetboost:
Click on “Add booster” on the Jetboost dashboard. Then, choose “Advanced Pagination” and hit “create.” Once the menu pops up, choose “infinite scroll” and choose how many items you want your customers to see at the same time. Save it to your URL and click “continue.”
Copy the Jetboost script. Then, go to your project’s custom code through the Jetboost link and paste the Jetboost script. Once you’ve done that, save your changes and hit “publish.” Finally, close the tab and press “test and continue.”
Copy the generated Jetboost collection class name, then head back to your Webflow project and add it to your collection list wrapper. Then add an HTML Embed into your collection item. A quick way to do this is to hit CTRL + E, type in “embed,” and hit enter. Then, copy the collection item embed code from Jetboost and paste it into the embed code editor in Webflow. You don’t need to make any changes to this code! Finally, hit “save and close” and “publish.” Go back to Jetboost and hit “Save and continue.”
Copy the class name for the infinite loader from Jetboost. Next, in Webflow, add a Div Block below your collection list. Paste the infinite loader class name from Jetboost to it. Add any type of spinner or loading animation inside of this Div Block. Jetboost will automatically show and hide the loader when items are being loaded via infinite scrolling. Then, save and publish your Webflow page.
After completing the final checks you can now enjoy your infinitely scrolling website!
If you need extra filtering for collection lists, the Jetboost Infinite Scroll combined with the Jetboost Dynamic Filtering add-on provides powerful search and filter functions for collection lists.
Jetboost provides a simple method for adding infinite scroll to your Webflow website. However, that’s not all the product does. Jetboost offers a variety of premium Webflow integrations to make your websites and your clients’ websites more powerful.
With Jetboost’s dynamic filtering, searching, sorting, favoriting, and other integrations, any site can be upgraded to the next level. It’s easy to use and comes with several important features and benefits.
Here are some of the top features of Jetboost for Webflow sites:
On top of these features, Jetboost comes with these built-in benefits:
Whether you have your own website or are working on a client project, you can use Jetboost to enhance the CMS features provided by Webflow, just like we showed here with infinite scroll. Start using Jetboost with a free trial today!
Are you a Webflow newbie interested in starting a blog? In this article, we'll teach you how to create a blog on Webflow in four simple steps. We'll also share how blogging can help you grow your website and rank on Google.