How to Use the "Add to Wishlist Button" Snippet

This guide walks you through adding the Add to Wishlist button to your Shopify theme using the wl-add-button   snippet.

Step 1 — Open Your Theme Code Editor

1. In your Shopify admin, go to Online Store → Themes.
2. Find your active theme and click ⋯ (Actions) → Edit code.

Step 2 — Add the Snippet File

In the left sidebar, open the Snippets folder and create wl-add-button.liquid   file . This file will contain the button component. Copy snippet code from this article and paste it to the file. Press Save.

Step 3 — Add the Snippet to a Section

Find the section where you want the wishlist button to appear. Common locations:

• Product page — sections/main-product.liquid        
• Product card (collection grid) — snippets/card-product.liquid   or sections/main-collection-product-grid.liquid        

Inside that file, find the right place (typically near the Add to Cart button or product title) and insert a render   tag.

Basic example — product page

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

Full example — product card (collection grid)

Important: Make sure that wish_product property is added to snippet. It should be the same product object used in the card.

{% render 'wl-add-button',
   wish_product: card_product,
   show_popup: true,
   button_position: 'absolute',
   view: 'icon_only',
   content_align: 'left',
   popup_position: 'bottom-left',
   margin_top: '8',
   margin_bottom: '8',
   margin_left: '8',
   margin_right: '8' 
%}

Tip: When using button_position: 'absolute'  , make sure the parent container has position: relative  set in its CSS so the button overlays the card correctly.

Step 4 — Available Properties

All properties are optional. If you omit one, its default value is used automatically.

Product

Button Layout

Margins (in pixels)

Icon

Text

Popup (Confirmation Banner)

Popup Close Button

Popup Action Button (View Wishlist link)

Step 5 — Add Translations

The snippet uses Shopify's translation system. You need to add the translation strings to your theme's locale files.

Where to find locale files

In the code editor, open the Locales folder. You will see files like en.default.json   , fr.json  , etc.

What to add

Open your default locale file (usually en.default.json  ) and find or create a "wishlist"   section. Add the following keys inside it:

"wishlist": {
  "add_to_wishlist_btn": {
    "text_add": "Add to wishlist",
    "text_remove": "Added to wishlist",
    "info_text": "{product} has been added to your wishlist successfully.",
    "link_text": "View wishlist",
    "modal_aria_label": "Added to wishlist",
    "modal_close": "Close"
  }
}

Important: If a "wishlist"   key already exists in the file, add only the "add_to_wishlist_btn"   block inside it — do not create a duplicate "wishlist"   key.

Translation key reference

Adding translations for other languages

Repeat the same process for each language file in the Locales folder (e.g. fr.json  , de.json  ), translating the values into the appropriate language while keeping the keys identical.

Common Use Cases

Product page — icon only, static position

 {% render 'wl-add-button',
    view: 'icon_only',
    max_width: 46,
    button_border: true,
    button_padding_x: 8,
    button_padding_y: 10,
    content_align: 'center',
    button_border_color: '#b5b5b5ff',
    button_border_width: 1.5,
    button_border_radius: 3
  %}

Product page — icon and text, static position

{% render 'wl-add-button',
   view: 'icon_and_text',
   content_align: 'left',
   button_position: 'static',
   icon_color: '#000',
   text_color: '#000',
   text_size: 14 
 %}

Collection card — icon only, overlaid on image

{% render 'wl-add-button',
   wish_product: card_product,
   view: 'icon_only',
   button_position: 'absolute',
   icon_color: '#ffffff',
   icon_size: 22,
   margin_top: 12,
   margin_left: 12,
   show_popup: true,
   popup_position: 'bottom-right' 
%}

Important: Make sure that wish_product property is added to snippet. It should be the same product object used in the card.

Minimal — no popup, text only

{% render 'wl-add-button',
  view: 'text_only',
  content_align: 'left',
  button_position: 'static',
  icon_color: '#000',
  text_color: '#000',
  text_size: 14 
%}

Troubleshooting

The button does not appear

• Make sure the snippet file wl-add-button.liquid   exists in the Snippets folder.

The button is not working on the product/collection card

• Make sure that wish_product property is added to snippet. It should be the same product object used in the card.

Popup text shows raw keys like wishlist.add_to_wishlist_btn.text_add       

• The translation keys are missing. Follow Step 5 to add them to your locale files.

Button overlaps other elements on product cards

• When using button_position: 'absolute'  , the parent element needs position: relative         in its CSS. Edit the card template's styles or add an inline style to the wrapper element.

Variant does not update when switching options

• The snippet auto-detects variant changes from the product form. If your theme uses a non-standard variant selector, contact support.

• Dev: Overview
• Dev: Requirements
• Dev: JavaScript API
• Flow Integration
• How to Use the "Go to Wishlist Button" Snippet

Do you need help?

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