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'; /* Example content, adjust as needed */
}Tip: To easily match the appearance of your existing cart counter, inspect the cart counter element, copy its CSS properties, and apply them to the .swym-wishlist-header-counter selector. You may need minor adjustments to achieve the desired look.
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.