Prerequisites
The Swym Wishlist header icon must be added via code in your theme (typically in
header.liquid).Locate the existing Swym header code, usually within
header.liquid, and confirm it is active. Refer to this article for a guide on finding the code or adding it.
If the header icon is rendered dynamically by Swym scripts (enabled from the application dashboard), you can skip to Step 2. Ensure you modify the selector in the JavaScript code to target the
<div>containing the default injected header icon.
Implementation Steps
Step 1: Add the Counter Span
Insert the following <span> tag just inside the <a> tag of the Swym header code in your header.liquid file. This <span> will be incremented as products are added to the wishlist.
<span class="swym-wishlist-header-counter"></span>
Step 2: Create the Counter Script Snippet
Create a new file named swym-header-counter.liquid in your Snippets folder and paste the following script into it.
This JavaScript code initializes the counter and ensures it updates when the Swym library is ready.
<script class="swym-wishlist-header-counter-custom">
function renderWishlistCounter(swat) {
var counter_elem = document.querySelectorAll(".swym-wishlist-header-counter"); /* Targets the span added in Step 1. */
if (counter_elem) {
for (var i = 0; i < counter_elem.length; i++) {
if (swat.renderWishlistCount) {
swat.renderWishlistCount(counter_elem[i], function(count, element) {
console.log("debug - renderWishlistCount", count, element);
});
}
}
}
}
if (!window.SwymCallbacks) {
window.SwymCallbacks = [];
}
window.SwymCallbacks.push(renderWishlistCounter);
</script>
Step 3: Include the Snippet
Open your theme.liquid file and add the following include tag to load the script you just created:
{% include 'swym-header-counter.liquid' %}
Step 4: Apply CSS Formatting
Use the following CSS to ensure the content is only rendered after Swym is ready, preventing the display of block/invalid characters initially.
i.icon-swym-wishlist:after {
visibility: hidden;
}
.swym-ready i.icon-swym-wishlist:after {
visibility: visible;
content: '\f004'; /* Make it'\f08a' for the heart to look empty */
}Tip: To match the look and feel of your existing cart counter, you can inspect the cart counter element, copy its CSS styles, and apply them to the .swym-wishlist-header-counter selector. You may need to make a few small adjustments to get the appearance just right.
You can also automatically hide the wishlist counter when there are no items in the wishlist using CSS. Simply add the following rule:
span.swym-wishlist-header-counter[data-count="0"],
span.swym-wishlist-header-counter:not(.show-badge) {
display: none;
}
This CSS automatically hides the counter when there are no items in the wishlist or when the required class is not present, helping keep the layout clean and uncluttered.
Need Further Assistance?
If you encounter any issues or require additional help with implementation, please reach out to our support team:
Email us directly at [email protected].
If you're already on our messenger, simply type "talk to an agent", and we'll connect you with a member of our team.