This guide explains how to create your own “View Wishlist” button that opens the customer’s wishlists, using the built-in functionality provided by the app.
This is useful when you want to replace or supplement the default floating heart widget with a custom call-to-action — in your header, navigation, drawer, or anywhere else.
Prerequisites
Before you begin, ensure the following:
The app is installed and working properly.
Quick Access Widget is enabled in app block settings in Shopify theme.
Step 1: Hide the default widget (optional)
To hide the floating button visually but keep its functionality available, add this to your theme’s CSS:
#floating-wishlist-btn {
display: none !important;
}This removes the button from the interface but keeps it in the DOM. The app's click handler remains active.
Step 2: Add a custom trigger
Insert a custom button or link wherever you want customers to open their wishlists. You can style this however you like.
<button id="open-wishlist"
class="btn btn--primary"
aria-label="Open Wishlist">
<svg width="18" height="18" aria-hidden="true"><use href="#icon-heart"/></svg>
<span>My Wishlist</span>
</button>
You can use this in your header, mobile drawer, sticky bar, or footer.
Step 3: Trigger the wishlist modal
Use JavaScript to forward clicks on your custom button to the hidden app-provided button.
<script>
document.addEventListener("DOMContentLoaded", () => {
const trigger = document.getElementById("open-wishlist");
const widget = document.getElementById("floating-wishlist-btn");
if (trigger && widget) {
trigger.addEventListener("click", () => widget.click());
}
});
</script>
This launches the same wishlist modal provided by the app.
Optional: Enhancements
Only show the button to logged-in customers
{% if customer %}
<button id="open-wishlist" class="btn btn--primary">My Wishlist</button>
{% endif %}Restore focus when the modal is closed
To improve accessibility, you can return focus to your button after the modal is closed:
<script>
window.addEventListener("wishlist:closed", () => {
const btn = document.getElementById("open-wishlist");
if (btn) btn.focus();
});
</script>
Use a link or icon instead of a button
Any element can be used as a trigger, as long as it calls .click() on the hidden button:
document.querySelector('.my-wishlist-link').addEventListener('click', () => {
document.getElementById('floating-wishlist-btn')?.click();
});