How to Build a Bookmark Feature in Webflow

Memberscripts needed

https://www.memberstack.com/scripts/like-unlike-cms-items

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/like-and-favorite-cms-items

Why/When would need to Build a Bookmark in Webflow?

1. On an eCommerce site where users can save products that they’re interested in for further reviewing or buying them at a later date.
2. On a social platform where users can save their favorite posts.
3. So users can save their favorite content on a website for easy access.
4. So users can curate custom lists of content or products that they can share.

Whether you’re building an eCommerce site, a social media platform, a content website and so on, one key functionality that needs to be present on your site is the ability to save content in a list – a wishlist, bookmarks list, favorites list, etc.

We’re going to be looking at how you can add this functionality on a Webflow site and display a toast notification informing the user of the action they’ve just performed – e.g “Product added to wishlist.”

Building a bookmark feature in Webflow

To set things up, we’re going to use MemberScript #20 – Save & Unsave CMS Items. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Creating the CMS Collection

First off, you need to create a CMS Collection of all the items displayed on your page. For each item in the collection, you’ll need to add an Item ID field where you’ll paste each item’s specific ID.

On the design side, each CMS item will need to contain a wrap for two buttons, one for saving the item and one for removing it from the user’s list. This wrapper will need to use the attribute ms-code-save=”VALUE”, where the value can be anything you want depending on what you’re actually calling the action (e.g. save, favorite, bookmark, etc.).

The buttons will also need their own attributes, as such:

• The remove button needs to use ms-code-unsave-child and for the value, select the Item ID from the dropdown menu. Additionally, you’ll need to add the attribute ms-code-toast-trigger=”2” in order to trigger the corresponding toast notification when users click on this button.
• The save button needs to use ms-code-save-child and for the value, select the Item ID again from the dropdown menu. For the corresponding toast notification to trigger, you’ll also need to add ms-code-toast-trigger=”1”.

Making it work

Now that you’ve created your CMS Collection and you’ve styled the items on the page, you just need to add the MemberScript #20 custom code to your page, before the closing body tag.

Now you can save and unsave items on the frontend while displaying a toast notification for each action you perform.

Conclusion

That’s all there is to it, your users can now add or remove items to their wishlist, bookmarks list, or any other type of list.

If you want to use our demo project to get you started, just click the button below to add it to your project.

Take me to the Scripts