Header Icon (Count Badge)

A wishlist icon in your store header that shows the count of wishlisted items and updates in real-time.

Liquid — Add to your theme header

Place this in your header snippet (e.g., header.liquid or sections/header.liquid):

{% comment %} Swym Wishlist Header Icon — SDK-Only Mode {% endcomment %}
<a href="/pages/wishlist" class="swym-header-wishlist" aria-label="Wishlist">
  {% comment %} Add your icon here (heart SVG, image, etc.) {% endcomment %}
  <span id="swym-header-count" style="display:none;">0</span>
</a>

JavaScript

(function() {
  'use strict';

  function initHeaderIcon(swat) {
    updateCount(swat);

    // Listen for wishlist changes to update count in real-time
    if (swat.evtLayer) {
      swat.evtLayer.addEventListener('sw:addedtowishlist', function() {
        updateCount(swat);
      });
      swat.evtLayer.addEventListener('sw:removedfromwishlist', function() {
        updateCount(swat);
      });
    }
  }

  function updateCount(swat) {
    swat.fetch(function(products) {
      var countEl = document.getElementById('swym-header-count');
      if (!countEl) return;

      var count = products ? products.length : 0;
      countEl.textContent = count;
      countEl.style.display = count > 0 ? '' : 'none';
    });
  }

  window.SwymCallbacks = window.SwymCallbacks || [];
  window.SwymCallbacks.push(initHeaderIcon);
})();

How It Works

On SDK ready, swat.fetch() counts wishlisted products → sets badge text
Badge is hidden when count is 0, shown when > 0
Subscribes to sw:addedtowishlist and sw:removedfromwishlist events on swat.evtLayer
On each event, re-fetches count so the badge stays accurate

Styling

The <span> is hidden/shown via inline display. Style it as a badge overlay on your icon.

Gotcha: theme CSS stretching the badge. Many themes have rules like .header__icon span { height: 100% } that will stretch your count badge into a tall oval. Fix this by setting an explicit height on your count element (e.g., height: 1.7rem !important). Match your theme's cart count bubble styling — inspect .cart-count-bubble in DevTools to see the exact dimensions and positioning.

Events Available

Event	Fires when
`sw:addedtowishlist`	Product is added to any wishlist
`sw:removedfromwishlist`	Product is removed from any wishlist
`sw:addedtocart`	Product is added to cart from wishlist