How do I customize the wishlist button?
The product page button is the heart of the app: this is where shoppers save products. Everything about how it looks and behaves lives in Customize Wishlist Appearance, under the button details section. Changes save live to your storefront.
Open the button settings
In the Wishlist Hero app, go to Settings > Customize Wishlist Appearance and scroll to the button details section. The admin also offers a direct shortcut: Settings > Button Details.
Choose the icon and shape
Select icon to use for the wishlist offers three glyphs:
- Heart
- Star
- Bookmark
Wishlist Button Type controls the shape of the element:
| Type | Shopper sees |
|---|---|
| Button with icon | A rounded button containing the icon and a label |
| Button only | A button with a label, no icon |
| Text with icon | Bare icon and text, no button background |
| Text only | A bare text link |
| Icon only | The icon alone, the most compact option |
Set colors and fonts
- Pick a color for the button and for the icon: the resting look. The default is a purple close to
rgb(144, 86, 162). - Pick a color for the button text.
- Pick a color for the price shown in the wishlist popup.
- Under Change font sizes, adjust header, price, product name, date, and button text sizes.
When a product is in the wishlist, the icon fills with color so shoppers can see its state at a glance.
Add an animation
Animation after adding to wishlist plays a short effect when an item is saved:
| Animation | Effect |
|---|---|
| None | No movement |
| Shake side to side | Horizontal wiggle |
| Shake up and down | Vertical wiggle |
| Flip and rotate | A flip in place |
| Fade in | A soft appear |
| Blink | A brief flash |
Let shoppers remove from the same button
With Enable customers to remove items from the same button after addition on, clicking the button a second time removes the item, and the button label switches to the remove text you set underneath. Turn it off to keep the button add only; shoppers then remove items from the wishlist popup or page.
Placement: automatic versus manual
By default the app finds the add to cart form on product pages and places the button next to it. If your theme needs explicit placement, tick Disable automatic product button placement in the App Configuration embed and add the Add To Wishlist Button block. The full walkthrough is in Install guide.
Test before you move on
After saving, open a product page and click the button. Check the resting and added states, the animation, and the notification that follows. See Verify your installation.