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

The steps 1, 2 and 3 below are meant for the case #2 above, i.e. icons created using images. 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 both the icons to the assets folder of our active Shopify theme. You can also choose any inactive theme if required.

Upload the both icon images
Upload the both icon images to assets folder of your theme

 

After successful upload, note down the URLs of both the images. You can right click on the image to Copy Image URL.

Copy the URL of both the images and store it elsewhere
Copy the URL of both the images and store it elsewhere

 

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.


.heartoutline {
background: url("https://cdn.shopify.com/s/files/1/1702/7393/t/2/assets/heartoutline.png");
display: inline-block;
width: 16px;
height: 16px; background-repeat: no-repeat;
}
.heartfull {
background: url("https://cdn.shopify.com/s/files/1/1702/7393/t/2/assets/heartfull.png");
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.

Enter the newly created CSS icon classes in App's Settings
Enter the newly created CSS icon classes in App’s Settings

 

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

Newly created Wishlist icons are visible now
Newly created Wishlist icons are visible now

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.