How to Use the "Add to Wishlist Button" Snippet v2

What’s new in Add To Wishlist Button v2

• More reliable on product pages and collection cards

• Smaller file — markup only, no JavaScript inside

• Stays in sync with the Add to Wishlist app block.

• If the same product appears twice on a page, both buttons stay in sync

• You can hide the button from guests (visibility: 'logged_in_only' )

• Confirmation pop-up look is set in Wishlist helper (the snippet only turns it on or off)

• Button text uses two simple theme translation keys (see below)

What’s new in Add To Wishlist Button v2

• More reliable on product pages and collection cards

• Smaller file - markup only, no JavaScript inside

• Stays in sync with the Add to Wishlist app block.

• If the same product appears twice on a page, both buttons stay in sync

• You can hide the button from guests (visibility: 'logged_in_only' )

• Confirmation pop-up look is set in Wishlist helper (the snippet only turns it on or off)

• Button text uses two simple theme translation keys (see below)

Add a heart button that saves products to the wishlist. Works on the product page and on collection / search cards.

Before you start

Install the R+ Wishlist app.
In the theme editor, turn on App embeds → Wishlist helper.

Without the helper, the button can look fine, but clicks will not work.

1. Create the snippet

Shopify admin → Online Store → Themes.
On your live theme: ⋯ → Edit code.
Snippets → Add a new snippet.
Name it wl-add-button-v2 .
Paste the snippet code from this article → Save.

2. Place it in your theme

Open the section or snippet where the button should appear, then add a render tag.

Common places:

Product page — e.g. sections/main-product.liquid (near Add to cart)
Product card — e.g. snippets/card-product.liquid

Product page

{% render 'wl-add-button-v2' %}

On the product page the button follows the selected variant automatically.

Collection / product card

Always pass the card’s product:

{% render 'wl-add-button-v2',
  wish_product: card_product,
  button_position: 'absolute'
%}

Use the same product variable your card already uses (card_product , product , etc.).

Tip: With button_position: 'absolute' , the parent should have position: relative so the heart sits on the image correctly.

3. Common examples

Icon only on the product page

{% render 'wl-add-button-v2',
  view: 'icon_only',
  content_align: 'center'
%}

Icon + text

{% render 'wl-add-button-v2',
  view: 'icon_and_text',
  content_align: 'left'
%}

Heart over a collection card image

{% render 'wl-add-button-v2',
  wish_product: card_product,
  view: 'icon_only',
  button_position: 'absolute',
  icon_color: '#ffffff',
  margin_top: 12,
  margin_left: 12
%}

Logged-in customers only

{% render 'wl-add-button-v2',
  wish_product: card_product,
  visibility: 'logged_in_only'
%}

No confirmation toast

{% render 'wl-add-button-v2', show_popup: false %}

Toast look & position are controlled in Wishlist helper (theme editor), not in the snippet.

4. Parameters

Most are optional. On cards, always pass wish_product .

Parameter	Default	Description
`wish_product`	current `product`	Which product the button belongs to. On the product page you can omit it (uses the page product). On collection or search cards, always pass the card’s product — e.g. `wish_product: card_product` .
`visibility`	`everyone`	Who can see the button. Use `logged_in_only` to show it only to signed-in customers (still visible in the theme editor).
`view`	`icon_only`	What the button shows. Options: `icon_only` , `icon_and_text` , `text_only` .
`button_position`	`static`	How the button is placed. Use `absolute` to pin it over a product image — the parent should have `position: relative` .
`content_align`	`right`	Horizontal alignment of the icon/text. Options: `left` , `center` , `right` .
`show_popup`	`true`	Whether to show the confirmation toast after add/remove. Toast look and position are set in Wishlist helper, not here.
`max_width`	`0` (no limit)	Max width of the button, in pixels.
`icon_color`	`#000000`	Color of the heart icon.
`icon_size`	`20`	Icon size on desktop, in pixels.
`icon_size_mobile`	`20`	Icon size on mobile, in pixels.
`text_color`	`#000000`	Color of the label text.
`text_size`	`14`	Label size on desktop, in pixels.
`text_size_mobile`	`14`	Label size on mobile, in pixels.
`icon_text_gap`	`6`	Space between icon and text, in pixels.
`margin_top` / `margin_right` / `margin_bottom` / `margin_left`	`0`	Outer spacing around the button, in pixels.
`button_border`	`false`	Show a border around the button.
`button_border_color`	`#000000`	Border color.
`button_border_width`	`1`	Border thickness, in pixels.
`button_border_radius`	`0`	Rounded corners, in pixels.
`button_padding_x`	`0`	Left/right padding inside the button, in pixels.
`button_padding_y`	`0`	Top/bottom padding inside the button, in pixels.

5. Button labels (translations)

The snippet uses:

wishlist.add_to_wishlist
wishlist.remove

If a key is missing, English fallbacks are used (“Add to wishlist” / “Remove from wishlist”).

Optional — in locales/en.default.json (and other languages):

"wishlist": {
  "add_to_wishlist": "Add to wishlist",
  "remove": "Remove from wishlist"
}

If "wishlist" already exists, only add these two keys inside it.

Troubleshooting

Problem	What to check
Button does nothing	Wishlist helper app embed is enabled
Button missing on cards	Pass `wish_product` with the card’s product
Button overlaps other UI	For `absolute` , parent needs `position: relative`
Variant doesn’t follow options	Theme may use a non-standard product form — contact support

Do you need help?

If you have any questions or run into issues, please contact us — we’re happy to help.