How to add the wishlist icon over the product images in my Shopify store

Adding the heart wishlist icon over the product images in your Shopify store requires adding a snippet of code to the corresponding page. The process is relatively simple if you've made changes to your theme's code before. However feel free to contact us if you need help.

This tutorial shows how to add the icon to the theme Dawn version 7.0.1. The exact position where the code needs to be inserted might be different if you're using a different theme or version.

Step 1 - Navigate to the theme's code editor

Before making any changes it's recommended to either duplicate the live theme or pick another theme from the library. This way you can minimize the risk of impacting your live store if something goes wrong. From your Shopify's admin page, click on “Online Store” -> “Themes” and click on “...” next to “Customize” and select “Duplicate”. Once you've done that click on “Customize”.

From the theme editor page, click on “...” and select “Edit Code”

Step 2 - Find the template that renders the product image

The file responsible for rendering the product image in the Dawn theme version 7.0.1 is called “card-product.liquid” and it can be found in the “Snippets” folder. Please keep in mind that if you're using a different theme or even a different version of Dawn the file name might be different. Click on the file name once you find it.

Step 3 - Add code snippet

Here you need to find the exact spot where the image is rendered and add the following snippet:

{% render 'firstwish-icon' with product_card_product as product %}

This will include the wishlist icon with all the default configurations. It's possible to customize the following parameters:

• position: 'top-right', 'top-left', 'bottom-right', 'bottom-left'. Default is 'top-right'.
• extra_margin: distance from the edges (number only). Default is 0.
• size: icon size in pixels (number only). Default is 24.
• border_color: border color of the icon. Default is #000000.
• color_active: icon color on mouseover and when an item is in the wishlist. Default is #000000.
• color_inactive: icon color when the item is not in the wishlist. Default is #FFFFFF.

Here's what the snippet looks like with all the optional parameters:

{% render 'firstwish-icon' with product_card_product as product, position: 'top-right', extra_margin: 10, border_color: '#000000', color_active: '#000000', color_inactive: '#FFFFFF', size: 24 %}

For Dawn version 7.0.1 the ideal place to add the snippet is between lines 34-35.

Don't forget to click the “Save” on the top right.

That's it. You can now check your store front and the wishlist icon will be displayed.

For a quick reference the video below shows the process described in this tutorial.