You can see the Wishlist plugin at work here, beside the Add to bag button there is a heart shape button which helps wishlist a product.
If you're unaware of what wishlist does, it allows users to save products that they're interested in for future purchase or reference. It acts as a personal shopping list and helps users keep track of items they might want to buy later, without having to search for them again.
🤔 How to use ?
1. Implementing the appearance & functionality of the wishlist button
Open the layout.html file and define the template and mention its id attribute such that it can be used wherever you want to place the wishlist template. In this case we are using the id "heart-wishlist-button-template"
2. Importing the wishlist template wherever required
Now you can use it directly wherever you need the wishlist button, for example we need it in the product card listing.
So, all you need to do is use the custom tag wishlist-button-load-point
Define this tag and in the attribute data-template-idmention the id you used for template, in our case it was "heart-wishlist-button-template" inside the tag you can define the UI element for the button as a default, else whatever has been defined inside the template shall be rendered.
Please note that you need to install the Wishlist plugin on the seller side for the changes to reflect on the store front.