Recently Viewed State
Wraps a whole recently-viewed section — swaps it for an empty design, or removes it from the page entirely when there's no browsing history.
Last updated
How to use
Place the component wherever the Recently Viewed section goes on the page.
Set
Statesto how many responsive tiers you need (1–4) and connect aPopulatedandEmptydesign per tier. Then overrideDisplayfor each of Framer's breakpoints so the right tier shows at each screen size.
Responsive tiers and breakpoint overrides
States controls how many independent Populated/Empty design pairs you connect — up to four tiers. Display sets which tier previews on canvas; override it for each of Framer's breakpoints so a phone-width customer and a desktop customer can see different designs for the same section.
Populated vs. Empty — when each one shows
The component is reactive to the customer's recently-viewed history: it shows the Populated design (typically a Carousel) as soon as there's at least one viewed product, and swaps to the Empty design automatically as products are viewed or cleared — typically a generic popular products carousel. That history is stored per-browser in the customer's browser, so a fresh browser with no view history always shows Empty until the customer views something. If Empty state isn't connected, the whole section will hide.
Section-level, not item-level
This is section-level, not item-level. A Carousel or Catalog Display can show its own empty design in place, which suits a page dedicated to the list. Recently Viewed State wraps the entire section instead — heading, carousel, clear button and all — so on a home page you can leave Empty unconnected and have the whole block disappear until the customer has browsing history, rather than showing an empty shell.