Intended Audience: 
Agency / Software Developers / Shopify Experts / Users 


This is an advanced feature and it is recommended to be handled by a developer with knowledge of languages, such as HTML, CSS, Javascript and Liquid templating as required. 

Shopify  - Liquid-based themes (from the Shopify theme store)


Prerequisites: The header should be enabled. 
Find the already existing swym wishlist header code for your theme (usually in header.liquid) and check if it’s enabled. 



Note: If your site has not enabled the header launch point icon, you may follow this blog to enable the header and then follow this document.
We also made a video to enable the header for your theme here.

Index:

Step 1: Add the following code just inside the <a> tag of the swym header code in the header.liquid 

Step 2: Create a file swym-header-counter.liquid and paste the given script

Step 3: Include the CSS in your .scss file.

Step 4: include the file swym-header-counter in theme.liquid.



Step 1: Add the following code just inside the <a> tag of the swym header code in the header.liquid 


<span class="swym-wish-counter"></span>


The span tag should be placed inside the tag of the header icon, this would add be incremented as when products are added to the wishlist.



Step 2: Create a file swym-header-counter.liquid in your Snippets folder and paste the below script

<script type ="text/javascript" defer> 

function renderWishlistCounter() {

  var elements = document.querySelectorAll(".swym-wish-counter");

  for (var i = 0; i < elements.length; i++) {

    if (window._swat.renderWishlistCount) {

      window._swat.renderWishlistCount(elements[i], function(cnt, elem) {

          console.log("debug - renderWishlistCount", cnt, elem); /* Can be removed after verification */

        }

      });

  }

}

if (!window._swat) {

  if (!window.SwymCallbacks) {

    window.SwymCallbacks = [];

  }

  window.SwymCallbacks.push(renderWishlistCounter);

} else {

  renderWishlistCounter();

}

</script>

Step 3: Include the CSS in your .scss file.


/*Wishlist header counter - content rendered after swym is ready to avoid showing block/invalid chars */
i.icon-swym-wishlist:after {  visibility: hidden;}.swym-ready i.icon-swym-wishlist:after {  visibility: visible;  content: '\f004';}


Step 4: Include the swym-header-counter.liquid in your theme.liquid


 {% include 'swym-header-counter'%}