How to use custom icons for Wishlist buttons?

Smart Wishlist supports custom icons for Wishlist buttons. This opens up the endless possibility of using any image available on the web in the Wishlist button. For large stores, this can be a game changing feature. In this tutorial, we shall explain the process of using custom icons in the Wishlist buttons.

Before you proceed, we assume that you have already setup the App on your store using the default icons available with the App. This is a recommended Step. You may read our App Setup Guide or Theme Specific Guides

When we talk of custom icons, we generally mean 2 types of icons.

1. Icons from libraries such as Font Awesome, Glyphicons etc.
2. Icons created by us using images
3. SVG Icons

The steps 1, 2 and 3 below are meant for the case #2 (icons created using images) and case #3 (SVG icons). For case #1 (i.e. icons from libraries such as Font Awesome, Glyphicons), you can directly jump to Step 4.

Step 1

Lets begin by downloading a pair of images for icons from Flaticon. You may download from your own source as well. However, we shall note the following:

1. An outline Heart Icon (for displaying next to items not added to Wishlist).
2. A filled Heart Icon (for displaying next items added to Wishlist).
3. For convenience, we shall prefer png icons (svg is also supported).
4. Our Preferred icon size is 16x16px (you can decide your own size of icons).

Step 2

Lets upload the icon. In Shopify Admin, visit Settings > Files. Click Upload Files button

After upload is done, copy the URL displayed.

SVG Icons: In case you intend to use SVG icons, place the code in a text editor and save it with svg extension (for e.g. heartoutline.svg and heartfull.svg). Next upload the svg files to Shopify as above.

Step 3

Lets create a new CSS icon class using these images. Copy the below CSS code to any of your theme’s CSS files and save it.

Make sure that you replace the URL value with the corresponding URLs of the images we had uploaded in Step 2.

Note: For SVG Icons, use the uploaded SVG URLs instead. This article provides more insight to it.

Important: The width and height in CSS below must match with the actual width and height of the image being used.

.heartoutline {
     background: url("https://cdn.shopify.com/s/files/1/1702/7393/files/heartoutline.png?v=1611615140");
     display: inline-block;
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
}
 .heartfull {
     background: url("https://cdn.shopify.com/s/files/1/1702/7393/files/heartfull.png?v=1611615166");
     display: inline-block;
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
}

 Step 4

1. Open the App’s Merchant Console  in Shopify Admin by visiting the following location

Apps=> Smart Wishlist =>Configure Appearance=> Product Page

2. Check the box titled “Use custom icon for Wishlist”

3. Fill the values with the CSS class names we had created in Step 3 (heartoutline and heartfull) as shown below and click Submit.

Visit the storefront of your Shopify Store. The newly created icons can be viewed in the Wishlist buttons.

Important Points to Note

• If you already have CSS icon classes on your theme, you can skip steps 1,2 and 3.
• The Steps 2 and 3 are theme specific. If you change your theme, you need to redo steps 2 and 3.
• Please note that in case of PNG icons, the Wishlist icon color property may not work. You need to ensure a change of color between the two icons. In case of SVG, you can specify the color in the class definition itself.