Most wishlist saves happen on the product page. A shopper has already clicked through from a collection, search, or ad — they’re interested. The button gives them a way to hold onto the product when they’re not ready to buy, and gives you a way to bring them back later.
Add the button to your theme
Go to Online Store > Themes > Customize
Pick Products > Default product from the page dropdown
In the product section, click Add block
Pick Wishlist Button from the Apps list
Drag it where you want it — directly under the Add to Cart button works best
Click Save
Set the saved indicator
When a product is already saved, the button should show it. Go to Wishlist > Storefront and pick a style:
Filled icon — The icon fills in (outline heart becomes solid). Most recognizable, and the default.
Text — The button label changes (for example, “Add to Wishlist” becomes “Saved”).
None — No change. Use only if you handle the saved state with custom CSS.
Decide what happens when shoppers click an already-saved product
In Wishlist > Storefront, pick how the button reacts when a shopper clicks a product that’s already in their wishlist:
Toggle — Removes the item. Quick and intuitive, but accidental clicks can lose saves.
Show message — Confirms the item is already saved and offers a link to the wishlist. Safer when accidental removals are a concern.
Open dropdown — Opens the list selector so the shopper can move the item to another list. Best when you’ve turned on multiple lists.