Favorite Button

A favorite toggle that saves a product in the customer's browser and drives every favorites-aware view.

Last updated

Favorite Button icon

How to use

  1. Place the button in a product card and connect ⛁ Butter Data to the product's Butter Data CMS field.

  2. Connect ⦿ Unselected and ⦿ Selected designs for the unfavorited and favorited states.

Optionally set Tracking to record favorites being added and removed in Framer Analytics.

How favorites persist and sync across the page

Toggling the button saves the product in the customer's browser — no customer login required. Every other favorites-aware component reacts instantly the moment a favorite is added or removed: Catalog Display's Favorites mode, Favorites State, a carousel's Favorites scope, and Result Counter all read the same state.

Favorites are per browser/device, not tied to a customer account — a customer who switches browsers or devices starts with an empty favorites list.

Questions? Join our Slack community