Jetboost is the tool that allows you to add search, favorites, and dynamic filtering functions to your Webflow site. In this tutorial we'll walk through how to connect Jetboost to Webflow so that your search, filter, tag, status, favorite and voting functions all work correctly.
After you've created a Jetboost account, authorize Jetboost to access your Webflow site and head over to your Jetboost dashboard. This whole tool-path starts with cloning a Jetboost template in Webflow, so we first need to import the right Jetboost boosters. Click 'import boosters' and follow the instructions to add the head code to your website.
Next we need to implement the upvote system which uses CMS Favoriting.
- Go to your dashboard and hit add booster, select Favorite CMS Items and hit create.
- Select your Products collection list.
- Select Votes as your field.
- Select Memberstack as your membership platform.
- Hit submit.
- Install the script as directed by Jetboost and test.
- Choose Collection List Item and follow the steps provided by Jetboost to add class to your top most div we previously created on your member-only home page in Webflow.
- Before testing, select power ups.
- Select Update item favorite count in real time.
- Copy the class and add to number text class in Webflow as shown by Jetboost.
- Hit publish.
- Return to favorite button and enter URL and hit test once green checked received. Then repeat the process for Collection list page.
- Scroll to the top of the Favorite Button page and now choose Collection Template page.
- Follow the steps provided by Jetboost to add class to your top most div we previously created on your Product Template Collection page in Webflow.
- Before testing, select power ups.
- Select Update item favorite count in real time.
- Copy the class and add to number text class in Webflow as show by Jetboost.
- Hit publish.
- Jetboost is now fully installed! But for voting to work we need to add Memberstack — head to the next tutorial to see how this is done.
.png)
