How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial

 A great way to personalize your customers' shopping experience is to replace the regular "add to cart" icon with a custom one. Custom cart icons add an extra touch to your Shopify store, making it stand out from others. 

You can customize your Shopify cart icon with only a few lines of code which you'll find in this article. 

How to Add Custom Cart Icon Using Code

 Step 1: Duplicate your live theme 

From your Shopify Admin click on Online Store and than Themes. Next to your live theme click on Actions and from the drop down menu choose Duplicate.

 Step 2: Sections Directory 

Now that we have our duplicate we can start coding. Click on Actions again, but this time choose the edit code. A code editor should appear and from the navigation to the left scroll down to the Snippets directory. In the snippets directory search for icon-cart.liquid  .

A new file should appear on the right side of your code editor. Remove all the content of the file.

The easiest way of adding a custom icon is by getting a code from the third party websites such as https://icons8.com/icons/set/cart

Choose the cart icon you want, click on Embed HTML, this website allows you to choose the size of your icon, copy the code and that is it.

Now go back to your theme editor and paste the code you get into the snippet file.

If it looks big, you should resize it.

 Step 3: Resize your icon 

In case your icon is too small or too big, you can resize it with code. Navigate to the Assets directory and choose your style sheet. In our case it is theme.scss.liquid but it can be named differently. paste the following code at the end of the document.

 .site-header__cart img {
width: 25px;height: 25px; 

 }  

You can play with width and height in case you don't like how it looks.