The Shopify platform is a great place to start your ecommerce business. It has everything you need to get started, including a built-in CMS, payment processing and email delivery services.
If you want to add custom cart icon on Shopify store using code then this article will help you. In this article, we will discuss how to add custom cart icon on Shopify store using code with step by step process so that it will be easy for you to understand the concept.
Benefits of Adding Custom Cart Icon
You want to make a unique brand identity online, make your store look unique. Personalize your buyers' shopping experience with custom icons, graphics, colors, and UX/UI.
Add custom cart icon on Shopify store to boost your branding. A custom cart icon enhances your store look and impacts user psychology to make a successful purchase.
We teach you how to add custom icon to "add to cart" using a few simple lines of code in this article.
Let’s jump to the tutorial -
How to Add Custom Cart Icon on Shopify Store Using Code
#Step 1 - Log Into Your Shopify Admin Panel
The first step is to log into your Shopify admin panel by entering the required login credential.
#Step 2 - Choos Your Live Theme
After you entered the admin panel, click on the Online Store as seen in the left menu then Themes.
#Step 3 - Create a Backup
Now create a backup by choosing your current theme. Click on Actions a dropdown menu will open then click on Duplicate.
#Step 4 - Open icon-cart.liquid File
Now you have created a backup of the present code files. It's time to change the code to add a new cart icon. Again click on the Actions and Edit code options. As you click on the edit code, a code editor should appear on your screen and a list menu of .liquid code files appear left to the code editor. Now find the icon-cart.liquid file by scrolling down and searching.
Click and open the icon-cart.liquid directory(file), the code file should appear right side of your editor.
# Step 5 - Remove and Add Code
Remove all the code from the opened file and add the new code to the file to add the icon.
The best way to add a cart icon is by coping the embedded cart icon code from third-party websites such as
Select the cart icon you want to add, copy the embedded HTML code and go back to the theme editor and paste the code.
NOW SAVE!
It’s all done!
#Step 6 - Resize Icon
If the cart icon looks improper, then you can resize it. To resize go find and open the Assets directory and select the Style sheet. In general, the file name is theme.scss.liquid but it can be titled differently.
Now copy the following code and paste it last to the CSS file.
.site-header__cart img { width: 25px;height: 25px; }
If the size still seems imperfect to you then you can change the width and height of the icon, and test.
Final Words
That’s all from our site, if you still find some difficulties adding the cart icon then contact us our Shopify developer will help you.