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)

{% 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 and text, static position

{% render 'wl-add-button',
  view: 'icon_and_text',
  button_position: 'static',
  icon_color: '#e00',
  text_color: '#333',
  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' 
%}

Minimal — no popup, text only

{% render 'wl-add-button',
   view: 'text_only',
   show_popup: false,
   text_color: '#555',
   text_size: 13 
%}

Troubleshooting

Button does not appear

Make sure the snippet file wl-add-button.liquid      exists in the Snippets folder. Also check that the app is not blocked — if shop.metafields.wishlist.app_blocked      is set to true, the button will not render.

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.