This component creates an interactive bookmarking system that lets users save their favorite items from your CMS collection. It stores bookmarked states in the browser's local storage and can filter to show only bookmarked items, making it perfect for building favorites lists or saved content features.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the CMS Bookmarking component into your Framer project file
Add the component to your CMS collection items and connect the "Link" property to your CMS item's slug field (this unique identifier is crucial for tracking bookmarks)
Customize the appearance by selecting an Icon type (heart, star, or bookmark), adjusting Icon Size and Spacing, and setting Active Color (when bookmarked) and Inactive Color (when not bookmarked)
Create two pages - one with Display mode set to "Show All" to display your full CMS collection with bookmark buttons, and another with "Show Only Bookmarked" to create a filtered favorites page that only shows items users have bookmarked
The bookmarking state is automatically saved in the browser's local storage using the link/slug as the identifier, so bookmarks persist across sessions
The component uses a unique link (typically your CMS item's slug) as an identifier to track which items are bookmarked. When clicked, it toggles the bookmark state and stores it in the browser's local storage. You can place this component on both your main CMS collection page and a dedicated "bookmarked items" page. The Display mode property lets you show all items or filter to show only bookmarked ones - create two separate pages with different display modes to give users both views
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
