Skip to main content
The Add to wishlist button on a product page (default style)

The Add to wishlist button on a product page (default style)

Where: Manage Wishlist → Product Page The app places the button on product pages automatically, including in quick-add and quick-view popups on most themes. It follows the selected variant, so shoppers save exactly the size or color they picked.
The Add to Wishlist Button toggle under Insights → Wishlist Settings must be activated, and the Wishlist icon app embed must be on.

​
Button position

Choose one placement:
All eight button positions

All eight button positions

Above, Left of, Below or Right of the Add to cart button.

​
Custom CSS selectors

If the button does not appear, or appears in the wrong place, tell the app where to put it:
To find a selector, right-click the Add to cart area on your product page, choose Inspect, and copy a class name from the element that wraps it.

​
Button type and text

  • Button Type: Icon and Text (default), Only Text or Only Icon.
  • Label: the button text. Default: Add to wishlist.

​
Appearance

​
Colors and icon

  • Icon Colors: Icon Color, Icon Hover Color, Icon Border Color, Icon Hover Border Color.
  • Text Colors: Text Color, Text Hover Color.
  • Icon styles: Icon size (10–60 px) and Icon border width (0–10 px).
Leave a color blank to use the Basics tab colors. Colors can be transparent.

​
Placing the button yourself

To put the button in a specific place, or style one button differently from the rest, use the Add to Wishlist Button app block:
  1. Online Store → Themes → Customize, open a product template.
  2. In the product information section, Add block → Apps → Add to Wishlist Button.
  3. Optionally change its settings. Fields you leave blank use the settings from this tab.
When the block is on the page, the automatic button is not added. For Liquid code, see Manual placement.