How to set up a wishlist Button/Icon on the storefront?

How to set up a wishlist Button/Icon on the storefront?

In most cases, it has to be added to the product.liquid or product-form.liquid or product-template.liquid

For icon - <div id="mswishlist" class="mswishlist" data-product="{{ product.id }}" data-variant="{{
product.variants.first.id }}"></div>

For button - <div id="mswishlist" class="mswishlist mswlbtn" data-product="{{ product.id }}"
data-variant="{{ product.variants.first.id }}"></div>

You can place the code anywhere in the file. However, the recommended location to add this code is next to the 'Add to Cart' button or below it.

- Go to Online Store => Themes => Edit HTML/CSS
- Under Templates, look for product. liquid file and click to open the file in the editor.
- Place the above code near the Add to Cart Button.
- Open the product page, you can see the Wishlist button near Add to Cart button.
- Also, you can add the Wishlist Button on Collection Pages.