The default icon for the Shopify Dawn theme is a handbag, which may not be suitable for your store. In this article I will describe the process we use to change the cart icons for our clients. It is not difficult but it does take a little work.
Here are the steps to follow in order to change your cart icon. This process will work for other themes as well, not just the Dawn theme.
- Make a copy of your theme file before performing the following process!
- Find a cart icon that you like by visiting any website that has cart icons for download.
- Download the png file for the cart icon.
- Visit the PNG to SVG converter website https://www.pngtosvg.com.
- Convert your PNG to an SVG file and save it to your computer.
- Open the SVG file in a Text Editor (we use BBEdits on my mac). You will see a bunch of code, not to worry!
- Copy all of the code you see to the clipboard, you will need it later.
- Go into Shopify, Online Store and click the 3 dots (ellipsis) then select Edit Code for your current theme.
- In the search bar (upper left of screen) search for the word "icon" and you will see these two files:
- Open the icon-cart-empty.liquid file first (this is the empty cart icon that you see when there are not products in the cart).
- Delete all the code in this file and replace it with the code you copied to the clipboard by pasting the code into this file. Then save the file.
- Do the same for the icon-cart.liquid file and save that file as well.
- Now take a look at your store and you will find that the cart icon has been replaced! Easy Peasy.
Now How about some tips about the size and position of the cart icon? Sure...
When you look at the code that you copied into the icon-cart.liquid and the icon-cart-empty.liquid files you wil see the viewBox="-100, -175, 750, 750" parameters, such as in this example.
The fist number (min-x) is the relative position left to right in the header of the cart icon. Adjust it so that the cart icon is has the same spacing between the other icons in the header. You may use either a positive or negative number to move the icon left and right in the header area. The second number (min-y) moves the cart icon up and down, adjust this number so that the cart icon is in line with the other icon in the header.
The last two numbers are width and height. Note that this is inverse of what you might expect, the larger the number, the smaller the icon. Adjust these numbers so that the cart icon matches the size of the other icons.
Voila! You have changed your cart icon successfully!
For other cool blogs and tricks about Shopify - visit My Web Concepts.