Product Page Button

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

1. Go to Online Store > Themes > Customize
2. Pick Products > Default product from the page dropdown
3. In the product section, click Add block
4. Pick Wishlist Button from the Apps list
5. Drag it where you want it — directly under the Add to Cart button works best
6. 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.