Favorites State
Wraps a whole favorites section — swaps it for an empty design, or removes it from the page entirely when the customer has no favorites.
Last updated
How to use
Place the component where the whole favorites section should sit — it wraps the section, it doesn't sit inside a grid.
Set
Statesto how many responsive tiers you need (1–4) and connect aCMSdesign (plus an optionalEmptydesign) per tier. Then overrideDisplayfor each of Framer's breakpoints so the right tier shows at each screen size.
What customers see with no favorites
Favorites State is reactive — it switches the instant the customer's first favorite is added or their last one is removed. First-time customers land on the Empty design, since favorites are per-browser and a new browser always starts with none. If no Empty design is connected for a tier, the whole section is removed from the page instead.
Section-level, not item-level
This is section-level, not item-level. A Catalog Display already has its own empty state for when a grid has nothing to show — a "No favorites yet" message sitting in place of the products. That's the right answer on a dedicated favorites page, where an empty page still needs to say something.
Favorites State solves the other case: a favorites section on a page that has plenty of other content — a saved-items row on your home page, say. There, an empty message is clutter. Wrap the section in Favorites State, leave Empty unconnected, and the heading, the row, and the clear button all disappear together until the customer has something saved.