How to Use the "Go to Wishlist Button" Snippet

The wl-go-to-btn        snippet renders a heart-icon link that takes customers to your wishlist page. It optionally shows a live item count badge. This guide walks you through adding it to your theme from scratch — no coding experience needed.

Step 1 — Open your theme code editor

1. From your Shopify admin, go to Online Store → Themes.
2. Find your active theme and click the ··· (three-dot) menu next to it.
3. Select Edit code. The code editor opens.

Step 2 — Add the Wishlist page link

In the App Embeds, open the Wishlist helper block. The block should be enabled.  Add the Wishlist page to Link button URL. Press Save.

Step 3 — Add the Snippet File

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

Step 4 — Choose where to add the button

The most common placement is the header, so the wishlist icon sits next to the cart icon. In the left-hand file tree, look under the Sections folder and open header.liquid        (the exact name may vary by theme — it could also be called header-section.liquid        or similar).

Step 5 — Paste the render tag

Find the spot in the header where the cart icon lives — look for something like cart-icon       , icon-cart       , or a link with cart        in the class or href. Add the snippet render tag immediately before or after it:

{% render 'wl-go-to-btn' %}

That's the simplest form — it uses all default settings. Save the file and preview your store to confirm the heart icon appears in the header.

⚠️ Important — Conflict with Header Link Block

If you have already added the Header Link Block via App Blocks (the built-in wishlist button block), do not add the wl-go-to-btn   snippet as well. Having both on the same page will cause duplicate buttons to appear and may lead to incorrect behavior — such as the badge count not updating or the link not working as expected.

Use one or the other:

Header Link Block — easier, no code required; configure it in Online Store → Themes → Customize → Header → Add block.

wl-go-to-btn  snippet — use this only when you need custom placement or styling that the block doesn't support.

Step 6 — Customise with parameters (optional)

You can pass parameters to control how the button looks and behaves. Here is a full example with every parameter shown:

{% render 'wl-go-to-btn',
  icon_color: '#e53e3e',
  text_color: '#333333',
  icon_size: 24,
  icon_size_mobile: 20,
  text_size: 16,
  text_size_mobile: 14,
  show_text: false,
  show_counter: true,
  count_position: 'on_icon',
  hide_counter_when_empty: true,
  count_bg_color: '#e53e3e',
  count_text_color: '#ffffff',
  count_size: 18,
  count_size_mobile: 16,
  count_font_size: 10,
  count_font_size_mobile: 10,
  icon_text_gap: 6,
  margin_top: 0,
  margin_right: 0,
  margin_bottom: 0,
  margin_left: 0,
  max_width: 0
%}

You only need to include the parameters you want to change — anything you leave out falls back to its default value.

Parameter reference

Icon

Link text

Count badge

Spacing and layout

Common header example

A typical header setup — red icon matching the cart button, badge overlaid on the icon, text hidden:

{% render 'wl-go-to-btn',
  icon_color: '#e53e3e',
  icon_size: 24,
  icon_size_mobile: 20,
  show_counter: true,
  count_position: 'on_icon',
  count_bg_color: '#e53e3e',
  count_text_color: '#ffffff',
  hide_counter_when_empty: true
%}

Troubleshooting

The heart icon doesn't appear

• Confirm that wl-go-to-btn.liquid        exists in the Snippets folder in your theme code.
• Check for typos in the render tag — the filename must match exactly.

The badge count doesn't update

• Make sure the Wishlist app is properly initialized on the page. Visit your storefront and check the browser console for any JavaScript errors.
• Confirm show_counter        is not set to false       .

The wishlist button appears twice or behaves unexpectedly

• You may have both the Header Link Block (App Blocks) and the wl-go-to-btn   snippet active at the same time. Remove one of them to resolve the conflict.

The link goes to "#" instead of the wishlist page

• The link URL is set automatically by the Wishlist app after it initializes. If it stays as #       , the app may not be loading correctly — check your app settings and ensure the wishlist page has been created.

• Dev: Overview
• Dev: Requirements
• Dev: JavaScript API
• Flow Integration
• How to Use the "Add 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.