Getting Started
Getting StartedTheme Extensions
App Settings
Collection Buttons
Floating Wishlist LinkProduct Page Buttons
Wishlist PageCustomisations
Code AccessCustom Wishlist PageInstant Header Link
Custom Colour Swatches
Save for Later in Cart
Wishlist Notifications
MetafieldsIntegrations
KlaviyoGoogle AnalyticsMeta PixelMaestraInstant Header Link
Add an instantly rendering header link to your theme.
When we inject our default header link through Code Access, there will be a slight delay before it gets rendered. This is to ensure that the app has the least possible impact on your store’s performance.
This article explains how to add an instantly rendering Wishlist link to your theme’s Liquid code. We then use Code Access to convert the static element into an interactive element that automatically reacts to the wishlist data.
1. Add markup to header section
Use the code below to render a basic wishlist link in your header section. You can adjust the markup and styling to your needs.
<style>
.wishlist-header-link .wkh-button {
--icon-size: 22px;
--icon-fill: transparent;
--icon-stroke: #000000;
--icon-stroke-width: 1px;
--counter-size: 15px;
display: flex;
position: relative;
padding: 16px 12px;
}
.wishlist-header-link .wkh-icon svg {
display: block;
width: var(--icon-size);
height: var(--icon-size);
overflow: visible;
pointer-events: none;
}
.wishlist-header-link .wkh-icon svg path {
fill: var(--icon-fill);
stroke: var(--icon-stroke);
stroke-width: var(--icon-stroke-width);
vector-effect: non-scaling-stroke;
}
.wishlist-header-link .wkh-counter {
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
min-width: var(--counter-size);
height: var(--counter-size);
border-radius: calc(var(--counter-size) / 2);
font-size: 11px;
line-height: 1;
background: black;
color: white;
position: absolute;
top: 25px;
right: 5px;
}
.wishlist-header-link .wkh-selected .wkh-counter {
opacity: 1;
transition: .2s opacity;
}
</style>
<div class="wishlist-header-link">
<a href class="wkh-button">
<span class="wkh-icon">
<svg viewBox="0 0 64 64">
<path d="M32.012,59.616c-1.119-.521-2.365-1.141-3.707-1.859a79.264,79.264,0,0,1-11.694-7.614C6.316,42,.266,32.6.254,22.076,0.244,12.358,7.871,4.506,17.232,4.5a16.661,16.661,0,0,1,11.891,4.99l2.837,2.889,2.827-2.9a16.639,16.639,0,0,1,11.874-5.02h0c9.368-.01,17.008,7.815,17.021,17.539,0.015,10.533-6.022,19.96-16.312,28.128a79.314,79.314,0,0,1-11.661,7.63C34.369,58.472,33.127,59.094,32.012,59.616Z"><path>
</svg>
</span>
<span class="wkh-counter">0</span>
</a>
</div>You should now see a static header link in your online store. In the next step will turn it into a dynamic link again.
2. Setup Headless Wishlist Link
With Code Access we turn the instant but static header link into a dynamic / interactive link that is connected to the customer’s wishlist. It will then show the state of the wishlist and dynamically update when the wishlist is being interacted with.
Copy and paste the below code into the “Headless Wishlist Link” tab in Code Access.
export function inject({ theme }) {
theme.watch(
{
selector: ".wishlist-header-link .wkh-button",
},
(target) => {
theme.createHeadlessComponent("wishlist-link-headless", {
host: target,
});
}
);
}
export function define({ WishlistElementHeadless }) {
return class WishlistLinkHeadless extends WishlistElementHeadless {
getStateConfig() {
return {
wishlist: true,
};
}
getWishlistUrl() {
if (this.app.settings.loginRequired) {
return this.app.routes.accountLoginUrl;
}
return this.app.routes.wishlistUrl;
}
updated() {
const numItems = this.wishlist ? this.wishlist.numItems : 0;
this.host.href = this.getWishlistUrl();
this.host.classList.toggle("wkh-selected", numItems > 0);
this.host.querySelector(".wkh-counter").innerText = numItems;
}
};
}