Custom icon or SVG for the Wishlist
1. Add the Custom SVG File
Add the custom SVG file in the Assets folder of your Shopify theme.
2. Update the wlh-icon-heart-empty.liquid File
In the wlh-icon-heart-empty.liquid file, replace the existing path with the path of the custom SVG file.
{% unless buttonClasses %}
{% assign buttonClasses = 'wlh-svg-icon-heart-empty wlh-svg-Icon' %}
{% endunless %}{% unless buttonStyles %}
{% assign buttonStyles = '' %}
{% endunless %}
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' class='{{ buttonClasses }}' style='{{ buttonStyles }}'>
<path d='M356.4,38.2c-42.6,0-76.8,19-104.4,58.1-27.7-39.1-61.8-58.1-104.4-58.1C61.5,38.2,10.1,110.7,10.1,180.8s30,121.5,89.2,179.4c53,51.9,115.3,87.7,147.7,104.4,1.5.8,3.3,1.2,5,1.2s3.5-.4,5-1.2c32.4-16.7,94.7-52.4,147.7-104.4,59.2-58,89.2-118.3,89.2-179.4s-51.4-142.6-137.5-142.6ZM470.3,180.8c0,53.9-27.1,108.1-80.6,161l-1.5,1.5c-48.7,47.7-105.9,81.2-136.1,97.2-30.2-15.9-87.4-49.4-136.1-97.2-54.5-53.4-82.1-108.1-82.1-162.5s11-61.6,30.9-83.5c20.8-22.9,50.3-35.6,83-35.6s68.3,17.3,93.6,59.6c2.3,3.8,6.4,6.1,10.8,6.1s4.5-.6,6.4-1.8c1.8-1.1,3.3-2.6,4.4-4.4,25.3-42.3,52.5-59.5,93.6-59.5s62.2,12.6,83,35.6c19.9,21.9,30.9,51.6,30.9,83.5Z'>
</path>
</svg>
3. Add the Custom SVG in App Embed
We add the custom SVG as the following script in the App Embeds section to replace the collection view icon with the custom SVG. We take the src from the custom SVG file.
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<script type="text/javascript">
document.arrive(".wishlisthero-floating button , .wishlisthero-product-page-button-container button", function (button_element) {
var svg_element = button_element.querySelector("svg");
var newNode = document.createElement("img");
newNode.src = "//cdn.shopify.com/s/files/1/0601/0653/9081/t/18/assets/HEART_ICON_EMPTY.svg?v=1719821044";
newNode.className="wishlist-hero-custom-icon";
svg_element.parentNode.insertBefore(newNode, svg_element.nextSibling);
});
</script>
4. add the following style to hide our svg and adjust the display of the new icon
<style>
.wishlisthero-floating svg, .wishlisthero-product-page-button-container svg{
display: none;
}
.wishlist-hero-custom-icon{
width: 40px;
height: 22px;
}
// below customization to replace the url when the customer need to add a custom filled (solid) heart //for the added items
.wishlisthero-product-in-wishlist .wishlist-hero-custom-icon{
content:url("http://cdn.shopify.com/s/files/1/0601/0653/9081/t/18/assets/HEART_ICON_FULL.svg?v=1719825097");
}
</style>