To enable the Heart icon/button on product images within your Collection pages using Wishlist Guru, we have two ways which are as follows:
Method 1: Icon (only) through App settings #
Note*: This method only works with the paid plan basic and above
Go to the Dashboard page and in the Installation guide section find the settings that say “Collection Page Wishlist Setting“ as represented in the image below:
After that click on the Enable button, and you will be taken to the page where all the settings related to the Collection page wishlist settings are located as shown in the image below:
Now just click on the save button to save your settings and you are done adding the wishlist icon to your collection page.
Method 2: Through Custom code #
Step 01: Navigate to the Shopify Admin Console and go to Online Store > Themes > Edit Code.
Step 2: Search your collection file using the search box, indicated by the number 1 in the image below. Then, navigate to the collection.json file, marked as number 2 in the image.
Once in the collection.json file, search for the section corresponding to the one used in your collection template. In this case, it is identified as “main-collection-product-grid” as shown in the image indicated as number 3.
Afterward, search for your section file (as shown in the image below marked as 1), which in our case is “main-collection-product-grid.liquid” (marked as no 2 in the image below) Within this section file, identify the snippets responsible for rendering your products on the collection page. In our case, the snippet is named “card-product” (marked as no 3 in the image below).
Step 03: Search for the card-product.liquid snippet.
Step 04: Add the following custom code snippet at the appropriate location (where you want to show your icon/button) within the “card-product” file:
Custom code for the Icon: <div class=”wf-wishlist” product-id=”{{ product.id }}” product-handle=”{{ product.handle }}” ></div>
Custom code for the Button: <div class=”wf-wishlist-button” product-id=”{{ product.id }}” product-handle=”{{ product.handle }}” ></div>
Note*- Depending on your theme you might have to modify the above code slightly. As data-productID is different in different themes. So in place of product.id you can put your Product ID
Note*- Don’t forget to save your settings after adding these code snippets to your files.
Congratulations! Your wishlist icon/button is now positioned exactly where you want it to be.
