The product page button is where most wishlist activity happens. When customers find a product they love but aren’t ready to buy, this button lets them save it for later. A well-placed, visually appealing button encourages more saves—giving you insight into demand and opportunities to re-engage shoppers.
Why the Product Page Button Matters
The product page is where customers make decisions. They’ve clicked through from a collection, search, or ad—they’re interested. But not everyone is ready to purchase immediately. The wishlist button captures that interest, turning browsers into potential buyers you can reach later.
Stores with prominent wishlist buttons see higher engagement because customers know they can easily return to products they’ve considered.
Button Placement Options
Position your button where customers naturally look for actions:
Near Add to Cart - The most effective placement. Customers already look here for purchase options, so the wishlist button gets seen.
Below Add to Cart - Common alternative, keeps actions grouped together.
Custom placement - Use the theme editor to drag the button block anywhere in your product template.
To add the button:
Go to Online Store > Themes > Customize
Select Products > Default product from the page dropdown
In the product section, click Add block
Choose Wishlist Button from the Apps list
Drag to position and click Save
Appearance Customization
Make the button match your store’s design:
Button text - Choose what the button says (“Add to Wishlist”, “Save for Later”, “♡ Save”, etc.)
Icon style - Select heart, star, bookmark, or other icons
Colors - Set colors for the button background, text, and icon
Size and spacing - Adjust to fit your theme’s style
Configure appearance in Wishlist > Storefront > Button Style or directly in the theme editor block settings.
Saved Indicator Styles
When an item is already in the wishlist, the button should show it. Choose your indicator style:
Filled Icon - The icon fills with color (empty heart becomes solid). Most recognizable and commonly used.
Checkmark - A checkmark appears next to the icon, clearly showing the item is saved.
Text Change - Button text changes from “Add to Wishlist” to “Saved” or “In Wishlist”.
Configure this in Wishlist > Storefront > Button Behavior.
Click Behavior When Already Saved
Decide what happens when customers click a button for an already-saved item:
Remove from wishlist - Clicking toggles the item off. Simple and intuitive for customers who want quick control.
Show message - Display a confirmation that the item is saved, with a link to view the wishlist. Prevents accidental removal.
Open wishlist - Navigate to the wishlist page so customers can see all their saved items.
Choose based on your customers’ preferences. If accidental removals are a concern, “Show message” provides a safer experience.