Webflow + Jetboost

How to set up Jetboost to super charge your Webflow sites and collections.

Background

One of the most powerful features of Webflow is CMS collections. Incorporating collections into your Webflow sites is when you really start cooking with gas! Collections are flexible, scalable and the primary connection point to other tools in the No Code world. So if you haven't already... be sure to take a deeper dive into collections.

Now, if you've started working with collections, you may have noticed a few times where the functionality was a slightly limited.

For example, out of the box you can show up to 100 collection items on a single page. But what if you have more than 100 items you want to show? In this case you would need to add Pagination for people to click to the next set of 100 items. In most cases — especially with the ubiquity of infinite scroll — you would prefer to not paginate.

Why Jetboost?

Jetboost adds useful features — called "Boosters" — to your Webflow CMS Collections:

Real-Time, On-Page Search
Dynamic List Filters
Favorite CMS Items
Advanced Pagination (i.e. Infinite Scroll)
Auto-Archive CMS Items

Note: Pricing for Jetboost is based upon the number of Boosters you have installed on your site (you can install multiple). As you add more Boosters you can Bundle and Save!

For this recipe, we are going to go over the high level process of adding Jetboost to your Webflow CMS. We won't get too into the weeds — mainly because Jetboost does such a good job walking you through the process themselves. This conceptual overview will hopefully give you a better idea of what to expect and decide whether or not Jetboost is something you're comfortable tackling. That said, we found the onboarding and set up to be pretty easy.

Setting up Webflow

Jetboost is one of the best tools we've seen at making implementation a breeze. And while there isn't a single "easy button", they're really good at holding your hand through the entire process.

That said, there are a few steps to getting started with Jetboost.

You need to give Jetboost permission to connect to your Webflow account. Basically, when you first start with Jetboost, you'll sign in to Webflow and select which sites Jetboost has permission to tap into. Note: If you leave every site unselected, you're granting access to all sites - this is a Webflow thing, not a Jetboost thing.

After connecting your Webflow account, you'll be taken to your Dashboard where you can decide which site you want to enhance with a Booster.
After clicking "Add Booster", you'll choose your Booster and then be taken step by through the installation process.

Keys to Installation

In one step you will need to copy/paste a code snippet into the Custom Code section of your Webflow Site. You will not need to write or edit any code - just copy/paste. This is basically inserting the brains of Jetboost into your site.
It's also important to understand the anatomy of the Webflow CMS element. Depending on the specific Jetboost Boosters you're adding, you will need to add classes (provided by Jetboost) to your Collection elements.
Additional elements may be needed to add boosters to your site. For example, if you're adding the Real Time Search Booster, you'll need to create a search box on your site. Similar to how you add Jetboost classes to CMS Collection elements, after you've added a search box, filter buttons, favorite buttons, etc... Jetboost will provide you with classes that you'll copy/paste onto each additional element.

Each CMS collection is made up of the same elements:

Collection List Wrapper
Collection List
Collection Item
Empty State

Jetboost Magic

The thing that makes Jetboost so slick and intuitive is that they check your work throughout installation. Each time they ask you to add a class to your collection or elements, they ping your site to verify that you've completed the step properly. This intuitive installation makes Jetboost a pleasure to install.

In the end, you can probably be up and running with Jetboost in 10-30 minutes — depending on what booster(s) you're adding to your site.

Webflow + Jetboost

More tutorials

Webflow + Jetboost

Airtable Tip - Structuring your Base with Helper Fields

Take your 404 page to the next level

Make an SVG image accessible