Wishlist Header Counter or fave counter

TABLE OF CONTENTS

• Overview:
• Prerequisites: 
• Solution:
  • Part - I:  If your store uses the single wishlist feature
    • Step 1
    • Step 2
    • Step 3
    • Step 4
  • Part - II:  If your store uses the multiple wishlist feature

Overview:

This solution aims to provide a method to add a header counter to the wishlist icon that can denote the number of items present in a user’s wishlist.

Prerequisites: 

The header should be enabled. Find the already existing swym wishlist header code for your theme (usually present in the header.liquid file) 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 icon and then follow this document. We also made a video to enable the header for your theme here.

Solution:

Part - I:  If your store uses the single wishlist feature

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

<span class="swym-wishlist-header-counter"></span>

/*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';
 }

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