We love Webflow because it empowers designers to build stunning websites from scratch. What else does a beautiful website need? Functionality. A key component of any website is a positive and helpful user experience. But, it can be tricky to add all the technical features that you want to your Webflow website. For instance, if you want your users to be able to save or upvote their favorite Webflow items on your website, you’d typically need to write custom code.

This often means adding buggy, complicated code from the internet. Or, paying a developer to add custom Javascript to your website. Even worse is the nightmare of trying to maintain this custom code long-term.

With Jetboost, you can skip the headache. Use our CMS Item Favoriting Booster to add favorite buttons to your website. It’s fast and easy. It integrates with native Webflow Memberships, as well as 3rd party platforms like Memberstack and Outseta. No code is required. Focus on what you do best - building gorgeous, well-designed websites! 

How can I use CMS item favoriting on my website? 

So many different ways! You can let your users add reactions to your blog posts, “like” items, create ecommerce wishlists, and much more. Check out some of the most common use cases for our versatile add-on below.

Blogs. “Favorite” or “like” buttons are perfect for blogs. Want to have a little fun? Let your readers add different emoji reactions to your blog posts. You can even display how often each blog post has been liked, so your readers can see what’s popular. Everyone loves a heart icon.‍

Ecommerce.  Let your users save their favorite products to a wishlist as they shop your ecommerce store. When users are ready to buy an item, they can then shop directly from their wishlist. No need to scroll through the entire store again. Users can reference their wishlist at any time and clear it whenever they want. Straightforward shopping means more purchases. It’s a win, win for everyone. ‍

Tutorials. Are you trying to gauge whether your users find your content useful? Ask users “Was this helpful? Let us know.” at the end of your instructional blog posts, videos, etc. Then, add “yes” and “no” option buttons. By default, Jetboost tracks every time a button option is selected and saves this data to your Webflow CMS. This lets you easily track user feedback on the backend and adjust your content, as needed.  We do this at the end of each of our video tutorials (example). 🙂‍

Voting Boards. Simplify the voting process for you and your users by providing clear voting choices. You can even set a limit on how many choices a voter is allowed to select. Votes are tied to your user’s ID, ensuring no one votes twice. Jetboost will also automatically track votes, saving you a lot of time and hassle tallying final numbers.  ‍

Directories. Let your users save their favorite directory items to personalized favorites lists. Keep users coming back to your website to view their favorites at later dates. Useful for recipe indexes, booking sites, tutorial directories, and more. Check out our live video directory demo to see this in action. ‍

Membership Sites. Do you use a membership site to grow your online community or sell your products? Our add-on integrates with Webflow Memberships, Memberstack, MemberSpace, and Outseta. Your users will be able to save their favorites and access them on any device using their login.     

How do I add Webflow favorite items to my website? 

With our powerful CMS Item Favoriting Booster, you can add save buttons to your Webflow CMS items on your website without any code, while maintaining full design control over the buttons in Webflow. Features include automatic button click tracking and single-click membership integration. You can also choose from free Power Ups to enhance this add-on. These include the ability to display the total number of items a user has favorited, show or hide content based on the total favorite count, and several more.

Add as much customization to your favorite button as you want! Follow the steps below to add this dynamic booster to your Webflow website. 

Step 1: Set up your Jetboost account.

‍If you’re not already a Jetboost user, sign up for free. Add your Webflow account to Jetboost, and ta-da, you’re ready to start adding boosters.

Step 2: Add a number field to your CMS Collection.

‍In the Webflow Designer, select the CMS Collection that you want to integrate with the booster. Add a Number field to this collection and a relevant label (favorite, like, save, etc.). No need to add any data to this field. Jetboost will use this field to record how many times a Collection Item has been favorited (or saved, etc).

Step 3: Add the CMS Item Favoriting Booster to your Webflow website.

‍Navigate to your Jetboost dashboard. Click “Add Booster” and add the “Favorite CMS Items” booster. 

Step 4: Configure the CMS Item Favoriting Booster.

‍Name the booster on the left-hand sidebar. Then, add your CMS Collection, the number field that you created, and the membership platform (optional). 

Step 5: Add the Jetboost script to your Webflow website.

‍Add the Jetboost script to the “Head Code” section of your website. If you’re already a Jetboost user, Jetboost will skip this step for you. Hooray.

Step 6: Select where to add your favorite button.

The favorite button can be added to your Collection Template Page and/or your Collection List Item. Remember, the Collection Template Page is for each Collection Item (ex. blog posts). The Collection List Item Page is to display all Collection Items (ex. clickable thumbnails of each blog post). ‍

Important: If you’d like to add the favorite button to both pages, you do not need to add a second booster to your website. Let’s add a favorite button to our Collection Template Page first.

Step 7: Create a div block for your favorite button.

‍Add a div block where you want the favorite button to be located on the Collection Template Page. Copy the provided Jetboost class, and add it to the div block. Don’t skip this step, the div block is key!

Step 8: Create and style your favorite button.

Add three div blocks within the div block you just created. Each of these child div blocks represents a different state of the button.

Label each of the div blocks with different classes: Item is Not Favorite, Item is Favorite, and Saving Favorite (this is an optional state). 

Add a button link or link block to the “Item is Not Favorite” and “Item is Favorite” div blocks. Use your creativity to style the button. All Webflow button designs can be used with Jetboost! 

Important: The child div blocks must be in the order of Item is Not Favorite, Item is Favorite, and Saving Favorite. Of course, feel free to use different names than these. 

Step 9: Test your new favorite button.

‍Publish your site! Next, visit the published page and copy the URL. Paste it into Jetboost under the “Test and Continue” section. Then click the button to proceed. (If there are issues, we’ll let you know how to fix them.) 

Step 10: Final checks.

‍If there are no final issues detected, click “continue.” Wahoo, success! If you want to add your new favorite button to your Collection List Item too, go back to Step 6 and select “Collection List Item.” The visual editor will then walk you through the steps to do this (similar to what we just did, but with a few changes). 

Prefer video format? Check out our video tutorial below.

Ready to get started now? Try the Favorite CMS Items Booster for free!

Don’t Limit Yourself to Favorite Buttons

We don’t want to limit you to just one type of button for your website. Create any kind of style button you want - hearts, stars, emojis, and more! Change the text of your button to fit your website needs from “like” buttons to “add to wishlist” buttons. Add as many different favorite buttons to your Webflow website as you want.

Favorite Button. “Favorite” or “like” buttons are ideal for blogs, image galleries, or recipe directories. Everyone loves a heart icon!

‍Save Button. Add a “save” or “bookmark” button to your hotel booking site, job board, or tutorial directory. Users can save their favorites for reference at a later date. ‍

Emoji Reaction. Add a little humor to your website. Let your users add different emoji reactions to your content. ‍

Wishlist Button. We love this button for ecommerce stores. Let users shop your store and save their favorite items to a wishlist. ‍

Rating Buttons. Add rating buttons to track what your users think of your content. Use this data to feature your most popular content or change content that isn’t performing well. 

‍Upvote Button. Create a voting board and allow your users to vote on their favorite items and watch as the best performing items rise to the top.

Add a ❤️ for Happy Users

We know you want your users to have a positive experience using your website. By providing a top-notch user interface and experience, you can do that. Use CMS Item Favoriting to engage and connect with your users.  

Let users react to your content with a click of a button or save content to view later. Improve the online shopping experience with wishlists and favorites lists. And so much more! Make your website more interactive and fun with Webflow favorite items. Try it today for free!