How to Build a Watchlist Feature with Webflow and Memberstack

Introduction

Building a wishlist or "save for later" feature lets your website visitors bookmark items they're interested in but not ready to act on yet. Think of how Amazon lets you save products to a wishlist - we're going to build similar functionality for a Webflow site.

In this tutorial, I'll walk you through setting up a watchlist feature for the Unicorn Factory, allowing visitors to save freelancers to a shortlist and contact them later. We'll use Webflow for the frontend, Memberstack for user accounts, and Jetboost for the favorites functionality.

What You'll Need

• Webflow - Your website builder
• Memberstack - For user authentication (or Outseta/Memberspace)
• Jetboost - For the favorites/wishlist functionality

Step 1: Set Up Jetboost Favorites

First, create a Jetboost account if you haven't already. We'll be using their "Favorite CMS Items" feature.

1. Log into Jetboost and create a new Favorites booster
2. Connect it to the CMS collection you want users to save (e.g., "Profiles" or "Products")
3. Create a Number field in your Webflow CMS called "Saves" to store the like/save count
4. Connect this field in Jetboost
5. Connect your membership platform (Memberstack, Outseta, etc.)
6. Install the Jetboost script on your Webflow site if you haven't already

Step 2: Create the Save Button

Now we need to build the button that lets users add or remove items from their watchlist. This button needs three states:

Building the Button Structure

Create this div structure in Webflow:

Wrapper Div (with Jetboost ID)
├── Div: "item-not-favorite"
│   └── Button: "Add to Watchlist"
├── Div: "item-is-favorite" (display: none)
│   └── Button: "Remove from Watchlist"
└── Div: "saving-favorite" (display: none)
    └── Button: "Updating..."

Important: Set the "item-is-favorite" and "saving-favorite" divs to display: none by default. Jetboost will toggle visibility automatically based on the user's saved items.

Where to Place the Button

You have two options:

1. On collection list items - Add the button to each card in your list
2. On the template page - Add the button to the individual item page

If your collection items are wrapped in link blocks (like cards that link to a detail page), you can't nest another link inside. In that case, add the save button to the template page instead.

Step 3: Build the Watchlist Page

Create a new page called "My Watchlist" where users can see all their saved items.

Page Structure

Container
├── Collection List Wrapper (with Jetboost class)
│   └── Your collection items
├── Empty State Div (display: none)
│   └── "You don't have any items saved yet"
└── Loading State Div (display: none)
    └── "Loading..."

Jetboost provides specific class names to use - check their documentation for the exact values.

Adding Remove Functionality

You can also add a "Remove from Watchlist" button directly on this page, so users can manage their list without visiting each item's page. When clicked, the item removes from the list in real-time.

Step 4: Hide Button for Logged-Out Users

If someone isn't logged in, the watchlist button won't work for them. Here's how to hide it:

1. Wrap your save button in a div
2. Add the Memberstack attribute: data-ms-content="members"
3. This makes the button only visible to logged-in members

<div data-ms-content="members">
  <!-- Your Jetboost save button here -->
</div>

Bonus: Display Save Counts

Want to show how many people have saved a particular item? Jetboost supports this too. You can display the save count from your CMS "Saves" field to create social proof (e.g., "47 people saved this freelancer").

Check Jetboost's documentation for implementation details.

Key Takeaways

• Jetboost handles the logic - No custom code needed for the save/unsave functionality
• Three button states - Always create add, remove, and loading states
• Memberstack stores user data - Each user's saved items are tied to their account
• Hide for logged-out users - Use data-ms-content="members" to prevent confusion

What's Next?

This watchlist feature is just the beginning of what you can build with member accounts. Consider adding:

• Email notifications when saved items update
• "Similar items" recommendations
• Export saved items to PDF
• Share your watchlist with others

Have questions about implementing this? Drop a comment below or book a consulting session.