thegeneralyst/AnopaDocs
Catalog & Search

Favourite Button

Toggle button for saving products to the user's wishlist, with favourites persisted in localStorage.

What it does

AP_FavouriteButton is a toggle for saving products to the user's wishlist. It renders an Active state (product is favourited) or Inactive state (not favourited) and toggles on click. Favourites are persisted to localStorage and survive page navigation and browser refresh.

How to set it up

Place AP_FavouriteButton on product cards or the product detail page (PDP). Connect the Active (♥) and Inactive (♡) design slots to define how the button looks when a product is favourited vs not favourited.

Set Product ID to the Shopify product ID for the product. The component accepts either a numeric ID or a full Shopify GID and normalises it so that the PDP and catalog always agree on the same stored value.

Property Controls

ControlTypeDefaultDescription
StringShopify product ID for this item. Accepts numeric IDs or full GIDs; the component normalises the value for consistent storage.
Preview StateEnumAutoControls the visual state in the editor: Auto (live behaviour), Active ♥, or Inactive ♡.
Component InstanceDesign shown when this product is currently favourited by the user.
Inactive ♡Component InstanceDesign shown when this product is not currently favourited by the user.