"Go to Wishlist Button" Snippet v2
Read this article to learn more about the snippet usage.
Usage:
{% render 'wl-header-link' %}
Code:
{% comment %}
wl-header-link
Heart icon in the header that links to the wishlist page, with an optional count badge.
Requires
- Wishlist app installed
- App embeds → Wishlist helper enabled
- Wishlist helper → Wishlist page URL set (used for the link href)
Styles ship inside this snippet, so the icon looks correct even if the
helper is off — but the URL and counter update only with the helper on.
Setup
1. Online Store → Themes → Edit code → Snippets → Add a new snippet.
2. Name it wl-header-link and paste this file.
3. In the theme editor, open App embeds → Wishlist helper and set Wishlist page URL.
4. Render the snippet in your header (or elsewhere).
Examples
Default:
{% render 'wl-header-link' %}
Custom colors and size:
{% render 'wl-header-link',
icon_color: '#000000',
icon_size: 24,
icon_size_mobile: 20,
count_bg_color: '#000000',
count_text_color: '#f4f4f4'
%}
Logged-in customers only:
{% render 'wl-header-link', visibility: 'logged_in_only' %}
Parameters
visibility everyone (default) | logged_in_only
icon_color Default: #000000
icon_size Desktop icon size, px. Default: 20
icon_size_mobile Mobile icon size, px. Default: 20
show_counter Show count badge. Default: true
hide_counter_when_empty Hide badge when count is 0. Default: true
count_position on_icon (default) | left | right
count_bg_color Badge background. Default: #000000
count_text_color Badge text. Default: #f4f4f4
count_size Desktop badge size, px. Default: 18
count_size_mobile Mobile badge size, px. Default: 18
margin_top px. Default: 0
margin_right px. Default: 0
margin_bottom px. Default: 0
margin_left px. Default: 0
Notes
- The helper runtime sets the link href and keeps the counter in sync.
- Accessible name uses theme translation wishlist.view_wishlist
(English fallback: "View wishlist").
{% endcomment %}
{% liquid
assign is_blocked = shop.metafields.wishlist.app_blocked
assign visibility = visibility | default: 'everyone'
assign show_snippet = true
unless request.design_mode or customer
if visibility == 'logged_in_only'
assign show_snippet = false
endif
endunless
assign icon_color = icon_color | default: '#000000'
assign icon_size = icon_size | default: 20
assign icon_size_mobile = icon_size_mobile | default: 20
assign show_counter = show_counter | default: true
assign hide_counter_when_empty = hide_counter_when_empty | default: true
assign count_position = count_position | default: 'on_icon'
assign count_bg_color = count_bg_color | default: '#000000'
assign count_text_color = count_text_color | default: '#f4f4f4'
assign count_size = count_size | default: 18
assign count_size_mobile = count_size_mobile | default: 18
assign margin_top = margin_top | default: 0
assign margin_right = margin_right | default: 0
assign margin_bottom = margin_bottom | default: 0
assign margin_left = margin_left | default: 0
assign link_modifier_class = ''
if show_counter
assign link_modifier_class = ' wl-go__link--counter-' | append: count_position
endif
assign locale_code = request.locale.iso_code | split: '-' | first | strip
assign dir_value = 'ltr'
if locale_code == 'ar' or locale_code == 'he' or locale_code == 'fa' or locale_code == 'ur'
assign dir_value = 'rtl'
endif
assign link_aria_label = 'wishlist.view_wishlist' | t
if link_aria_label == 'wishlist.view_wishlist'
assign link_aria_label = 'View wishlist'
endif
%}
{% unless is_blocked or show_snippet == false %}
<style>
.wl-go {
--wl-go-margin-top: 6px;
--wl-go-margin-right: 10px;
--wl-go-margin-bottom: 6px;
--wl-go-margin-left: 10px;
--wl-counter-color: #f4f4f4;
--wl-counter-border: 1px solid #ffffff;
--wl-counter-bg-color: #000000;
--wl-counter-size: 16px;
--wl-counter-size-md: 18px;
--wl-icon-label-gap: 8px;
--wl-icon-label-font-size: 14px;
--wl-icon-label-font-size-md: 16px;
--wl-icon-label-text-color: currentColor;
--wl-icon-label-icon-color: currentColor;
--wl-icon-label-icon-size: 18px;
--wl-icon-label-icon-size-md: 20px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-self: center;
transition: opacity 0.2s;
margin: var(--wl-go-margin-top) var(--wl-go-margin-right)
var(--wl-go-margin-bottom) var(--wl-go-margin-left);
}
.wl-go:hover {
opacity: 0.8;
}
.wl-go__link {
display: inline-flex;
position: relative;
flex-shrink: 0;
justify-content: center;
align-items: center;
overflow: visible;
color: inherit;
text-decoration: none;
}
.wl-go__link--counter-left,
.wl-go__link--counter-right {
gap: 2px;
}
.wl-go__link--counter-left .wl-counter {
order: -1;
}
.wl-go__link--counter-on_icon {
--wl-go-link-box-size: calc(
var(--wl-icon-label-icon-size) + var(--wl-counter-size)
);
min-width: var(--wl-go-link-box-size);
min-height: var(--wl-go-link-box-size);
}
@media screen and (min-width: 768px) {
.wl-go__link--counter-on_icon {
--wl-go-link-box-size: calc(
var(--wl-icon-label-icon-size-md) + var(--wl-counter-size-md)
);
}
}
.wl-go .wl-icon-label {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--wl-icon-label-gap);
color: var(--wl-icon-label-text-color);
font-size: var(--wl-icon-label-font-size);
line-height: 1.2;
}
@media screen and (min-width: 768px) {
.wl-go .wl-icon-label {
font-size: var(--wl-icon-label-font-size-md);
}
}
.wl-go .wl-icon-label__media {
display: inline-flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: var(--wl-icon-label-icon-size);
height: var(--wl-icon-label-icon-size);
color: var(--wl-icon-label-icon-color);
}
@media screen and (min-width: 768px) {
.wl-go .wl-icon-label__media {
width: var(--wl-icon-label-icon-size-md);
height: var(--wl-icon-label-icon-size-md);
}
}
.wl-go .wl-icon-label__media svg,
.wl-go .wl-icon-label__icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.wl-go .wl-icon-label__icon {
display: block;
width: 100%;
height: 100%;
}
.wl-go .wl-icon-label__icon--filled {
display: none;
}
.wl-go.wl-go--active .wl-icon-label__media .icon-heart {
fill: currentColor;
}
.wl-go.wl-go--active .wl-icon-label__icon--empty {
display: none;
}
.wl-go.wl-go--active .wl-icon-label__icon--filled {
display: block;
}
.wl-go .wl-counter {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
box-sizing: border-box;
color: var(--wl-counter-color, #fff);
font-weight: 600;
font-size: var(--wl-counter-size, 16px);
line-height: 1;
letter-spacing: 0;
}
.wl-go .wl-counter--badge {
position: absolute;
top: -3px;
inset-inline-end: -5px;
border: var(--wl-counter-border, none);
border-radius: 999px;
background-color: var(--wl-counter-bg-color, #000);
padding: 0 4px;
aspect-ratio: 1 / 1;
min-width: var(--wl-counter-size, 16px);
min-height: var(--wl-counter-size, 16px);
font-size: calc(var(--wl-counter-size, 16px) * 0.5);
}
.wl-go .wl-counter--empty {
display: none;
}
@media screen and (min-width: 768px) {
.wl-go .wl-counter {
font-size: var(--wl-counter-size-md, 18px);
}
.wl-go .wl-counter--badge {
min-width: var(--wl-counter-size-md, 18px);
min-height: var(--wl-counter-size-md, 18px);
font-size: calc(var(--wl-counter-size-md, 18px) * 0.5);
}
}
/* After base badge rules — same order as wl-styles + wl-header-link */
.wl-go .wl-go__link--counter-on_icon .wl-counter--badge {
top: 5px;
inset-inline-end: 2px;
inset-inline-start: auto;
}
</style>
<div
class='wl-go'
dir='{{ dir_value }}'
style='
--wl-icon-label-icon-color: {{ icon_color }};
--wl-icon-label-icon-size: {{ icon_size_mobile }}px;
--wl-icon-label-icon-size-md: {{ icon_size }}px;
--wl-counter-bg-color: {{ count_bg_color }};
--wl-counter-color: {{ count_text_color }};
--wl-counter-size: {{ count_size_mobile }}px;
--wl-counter-size-md: {{ count_size }}px;
--wl-go-margin-top: {{ margin_top }}px;
--wl-go-margin-right: {{ margin_right }}px;
--wl-go-margin-bottom: {{ margin_bottom }}px;
--wl-go-margin-left: {{ margin_left }}px;
'
>
<a
href='#'
class='wl-go__link{{ link_modifier_class }}'
data-wl-header-link
aria-label='{{ link_aria_label | escape }}'
>
<span class='wl-icon-label' dir='{{ dir_value }}'>
<span class='wl-icon-label__media' aria-hidden='true'>
<span class='wl-icon-label__icon wl-icon-label__icon--empty'>
<svg
class='icon-heart'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
aria-hidden='true'
focusable='false'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='1.5'
d='M7.87891 3.75c.67013.00152 1.33423.14051 1.9541.40918.61989.26872 1.18439.66253 1.66019 1.16016.1399.14633.3336.22972.5361.23144.2024.00163.3967-.07878.5391-.22266.9658-.9764 2.2584-1.51357 3.5957-1.50488 1.3372.00873 2.6231.5627 3.5771 1.55176.955.98998 1.5 2.33576 1.5088 3.74707.0087 1.41133-.52 2.76473-1.4629 3.76753l-6.6318 6.877c-.3018.3128-.7055.4834-1.1201.4834-.4146-.0001-.8175-.1707-1.1192-.4834l-6.63963-6.8828-.00196-.0029-.17578-.1885c-.3984-.452-.71987-.9742-.94922-1.543-.26198-.6498-.39789-1.34784-.39941-2.0537-.0015-.70608.13124-1.40537.39062-2.05664.25939-.6512.64026-1.24084 1.11817-1.73633.47787-.49543 1.04403-.88648 1.66504-1.15234.62086-.26578 1.28506-.40188 1.95508-.40039'
/>
</svg>
</span>
<span class='wl-icon-label__icon wl-icon-label__icon--filled'>
<svg
class='icon-heart'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
focusable='false'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='1.5'
d='M7.87891 3.75c.67013.00152 1.33423.14051 1.9541.40918.61989.26872 1.18439.66253 1.66019 1.16016.1399.14633.3336.22972.5361.23144.2024.00163.3967-.07878.5391-.22266.9658-.9764 2.2584-1.51357 3.5957-1.50488 1.3372.00873 2.6231.5627 3.5771 1.55176.955.98998 1.5 2.33576 1.5088 3.74707.0087 1.41133-.52 2.76473-1.4629 3.76753l-6.6318 6.877c-.3018.3128-.7055.4834-1.1201.4834-.4146-.0001-.8175-.1707-1.1192-.4834l-6.63963-6.8828-.00196-.0029-.17578-.1885c-.3984-.452-.71987-.9742-.94922-1.543-.26198-.6498-.39789-1.34784-.39941-2.0537-.0015-.70608.13124-1.40537.39062-2.05664.25939-.6512.64026-1.24084 1.11817-1.73633.47787-.49543 1.04403-.88648 1.66504-1.15234.62086-.26578 1.28506-.40188 1.95508-.40039'
/>
</svg>
</span>
</span>
</span>
{% if show_counter %}
<span
class='wl-counter wl-counter--badge{% if hide_counter_when_empty %} wl-counter--empty{% endif %}'
{% if hide_counter_when_empty %}
data-wl-count-hide-empty
{% endif %}
>
<span data-wl-count aria-live='polite' aria-atomic='true'>0</span>
</span>
{% endif %}
</a>
</div>
{% endunless %}