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

Add a heart icon that opens the wishlist page, with an optional live item count. Most often placed in the header next to the cart.

Before you start

Install the R+ Wishlist app.
In the theme editor, turn on App embeds → Wishlist helper.
In Wishlist helper, set Wishlist page URL — the snippet uses this for the link.

Without the helper, the icon can look fine, but the link URL and counter will not update.

If you previously used wl-go-to-btn , create wl-header-link (or replace the old file) and update every {% render %} to the new name.

1. Create the snippet

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

2. Place it in your theme

The usual place is the header, next to the cart icon.

Open your header file (often sections/header.liquid — the name may differ by theme).
Find the cart icon (look for cart , icon-cart , etc.).
Add the render tag before or after it:

{% render 'wl-header-link' %}

Save and preview the storefront — you should see the heart in the header.

3. Common examples

Custom colors and size

{% render 'wl-header-link',
  icon_color: '#e53e3e',
  icon_size: 24,
  icon_size_mobile: 20,
  count_bg_color: '#e53e3e',
  count_text_color: '#ffffff'
%}

Badge to the right of the icon

{% render 'wl-header-link',
  count_position: 'right',
  hide_counter_when_empty: false
%}

No counter

{% render 'wl-header-link', show_counter: false %}

Logged-in customers only

{% render 'wl-header-link', visibility: 'logged_in_only' %}

4. Parameters

Most are optional. Defaults apply if you omit them.

Parameter	Default	Description
`visibility`	`everyone`	Who can see the link. Use `logged_in_only` to show it only to signed-in customers (still visible in the theme editor).
`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.
`show_counter`	`true`	Show the item count badge.
`hide_counter_when_empty`	`true`	Hide the badge when the count is `0` . Set to `false` to always show it.
`count_position`	`on_icon`	Where the badge sits. Options: `on_icon` (over the heart), `left` , `right` .
`count_bg_color`	`#000000`	Badge background color.
`count_text_color`	`#f4f4f4`	Badge number color.
`count_size`	`18`	Badge size on desktop, in pixels.
`count_size_mobile`	`18`	Badge size on mobile, in pixels.
`margin_top` / `margin_right` / `margin_bottom` / `margin_left`	`0`	Outer spacing around the link, in pixels.

5. Accessible name (translation)

The link’s accessible name uses:

wishlist.view_wishlist

If the key is missing, the English fallback “View wishlist” is used.

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

"wishlist": {
  "view_wishlist": "View wishlist"
}

If "wishlist" already exists, only add this key inside it.

Troubleshooting

Problem	What to check
Icon does nothing / link stays `#`	Wishlist helper is enabled and Wishlist page URL is set
Counter does not update	Helper is on; `show_counter` is not `false`
Icon missing	Snippet file is named `wl-header-link` and the `render` tag matches

Snippet code

Paste the full contents of wl-header-link.liquid here (from your docs / release package).

Do you need help?

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