Wishlist Hero

Keep the Wishlist Hero button working correctly on product cards inside the filtered product grid.

What this does

Wishlist Hero normally attaches its "add to wishlist" button to a product card once, when the page first loads. Because Smart Product Filter & Search re-renders product cards every time a shopper filters, sorts, or paginates, that button needs to be re-attached on each refresh — otherwise it stops working after the first interaction. Wishlist Hero also needs one small snippet added to your theme.

Turn on the integration

1. In the app, go to Settings > Integration.

2. Search for Wishlist Hero and turn on Enable integration.

3. Click Sync now on the Home dashboard.

Add the theme snippet

1. Go to Online Store > Themes > Edit code.

2. In theme.liquid, add this just above </body>:

<script>
window.addEventListener('globoFilterRenderCompleted', function () {
  document.querySelectorAll(".wishlist-hero-custom-button").forEach(function (wishlistButton) {
    var ev = new CustomEvent("wishlist-hero-add-to-custom-element", { detail: wishlistButton });
    document.dispatchEvent(ev);
  });
});
</script>

1. Save.

Related pages

• Wishlist apps

• App Integrations