BACK

how to add image in shopify cart

How to Change Cart Icon From Shopify Store 🛒 | Replace With Any Image 100% Easy what's up guys in th

Amazing Learning

Updated on Mar 22,2023

How to Change Cart Icon From Shopify Store 🛒 | Replace With Any Image 100% Easy

The above is a brief introduction to how to add image in shopify cart

Let's move on to the first section of how to add image in shopify cart

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

How to Change Cart Icon From Shopify Store 🛒 | Replace With Any Image 100% Easy

what's up guys in this video i am going,to show you that how you can change card,icon from your shopify store,so i got a question from one of my,subscriber that he is not able to modify,that,so i thought that i have to make a video,on it so that,everybody should able to change this,specific card icon from their stores,so if you have such type of question you,can also add a,you can also ask me in the comment,section so i will be trying to make a,video on that,so let's get started with the,modification,so currently you can see that i have,this specific page and on the right top,corner i have this,image and if you will be clicking over,it,on the left tab then i have the old icon,so basically i modified and then after i,removed that,so if i will be refreshing this page,then uh,this would remain and if i am refreshing,this page,so older icon would be reflecting over,here so that means i have change,modified the code so first of all you,need to go to your dashboard of the,shopify store,and then after you have to go to your,settings,and then after you should go to the,files we are interested to upload an,image first of all,so you should go to the this files,dashboard and here you have the option,to upload,the files so i have already uploaded,this file let me,delete this one from here and what you,will be doing here is like,you should search on google that cart,icon for example,so if you are interested to use this,specific icon from here,so i will be clicking over it and,then after i am interested to download,this one,all right or maybe this one,so let me save this one as an,image and i am writing here cart,and let's save it and then after i am,interested to,upload this file so click on upload,files,then after i'm going to the folder where,i downloaded and then i have this one,so i am going to upload that so this,would be uploaded,over here and here you can see that,card.jpg,so the file is uploaded successfully now,we,are going to open the,dashboard in the new tab and,then after i am interested to,go to the custom code so you should,click on,actions then after you should click on,edit code,and here you will have these folders,in which we have the files so you should,go to the snippets,and then you should scroll it down and,here we have icon dash card,dot liquid so you should click on this,file,and here you can see that we have this,svg file already,so we are interested to remove this svg,file,and replace with the new icon or maybe,image so i am going to comment this out,for now because i am not interested to,use this one so this is the comment sign,which is,angular bracket open then we have sinus,sign of exclamation then dash dash,or maybe minus minus then after i am,also going to close this,comment and here down below i am going,to add one,new tag which is img and here i will be,writing,src equals to double quotes,then after i am closing this tag and,then we have width all right so i am,going to write here,width equals to or maybe if i am not,writing the width then what will be,happening is,i should copy and paste the url which i,have uploaded on,over here so you can see that this is,the image i have uploaded on my store,so i am going to copy this url from here,and let me paste it over here,so i will be pasting it uh right here,so first example this one and,then let me save this one so i saved the,changes,and now if i am refreshing this page,once again,then you will see that on the right top,corner i have this new,image which i have uploaded just now and,you can see that we have,bigger size so i'm interested to uh,make it smaller so you have to write its,width,equals to for say example i'm writing,here,50 pixel only 50 you need to write and,then let me save it,and if you will refresh this once again,you will see that this is little smaller,but,still we are interested to make it more,smaller so you should write here 30,so 30 pixel is the good size,so let me refresh this once again and,now you can see that,this icon is perfectly working and in,the same way if you have,if you are interested to upload any,other file then what you will have to do,is you should,delete this from here or maybe you will,you need to keep it as it is,and you should upload the new icon,whichever you are thinking that is,good for your store first example this,one is also,a good one or maybe you are interested,to use different design,so according to your choice you can also,explore all those images for the card,icon and then after you should,use it so let me tell you for example,you have already uh,refreshed this page and let me test it,that this is available to all my pages,or not,so for example i am clicking on this,specific product,and now you can see that this product,page on this product page this is also,available,let me click on add to cart and let me,click on,view cart and here you can see that we,have,this specific icon which is looking,great all right,this is the cart page basically so here,we can confirm that,if we are clicking on catalog so here we,have all the products and currently you,can see that,on the top right corner we have this,card icon available,so we have the proof that the cart icon,is available,everywhere i mean on each of the page of,the,store all right so you should also do,the testing because in some time,because sometime if you do the wrong,coding then maybe,that is not modified so you may face any,problem,and one thing i will suggest you uh is,that for example you are not,you are having a different theme and i,have this debut theme for,for now so icon dash card dot liquid,file is available here,all right so first example i am going uh,to uh my uh,and one one last thing is that first,example you are not interested to,use this image uh then of course you,should uncomment this one and,automatically the previous image would,be over there,all right and if you are interested to,modify the url i mean uploading a new,uh image then you should only replace,this url with the,new one which would be uploaded here all,right,so first example i am checking with the,different theme so you should click on,themes,and first of all you should uh take a,backup of your theme,all right so always keep the backup,so first example i am clicking on this,duplicate theme,so in this way the theme would be,duplicated,i mean the copied version would be over,here,and once that is copied successfully,then we can test this specific,card icon issue with the different,themes so that we get to know that if,there are some other themes then what,would be the,uh what would be the scenario so first,example i have this simple theme and i,am going to click over it,and let me add to theme library and then,after,i am going to publish that one for now,because i am interested to see that the,sam,cart icon template file is in the assets,folder or not,so wait for a while until this is,successfully added then after i am going,to,publish this one let me publish,it and,finally you can see that we have themes,so if you will refresh this page now,then you will find out that,this card icon is little different all,right,and let me check the,themes and here you can see that we have,themes and then we are interested to,click on edit code,so this is simple theme earlier it was,debut theme,and first example we are interested to,see the scenario with the simple theme,then what would be the,uh what would be the modification so,this is the layout this is the templates,and down below we have the sections then,snippets so if we are scrolling it down,then again we have,icon dash card dot liquid so,in most of the cases you will find the,same thing in each of the file,each of the theme so for say example you,are thinking that this is not available,in the assets folder then you should or,maybe snippets folder,uh i mean icon.liquid file,so then you can connect me i will be,adding the contact details below in the,description,or maybe you can ask the questions in,the comments section so i will,definitely help you out with,uh with the problem yeah according to,your theme,all right so thank you so much for,watching this video if you are new on,this channel then please subscribe this,channel and also like this video,so see you in the next video

Congratulation! You bave finally finished reading how to add image in shopify cart and believe you bave enougb understending how to add image in shopify cart

Come on and read the rest of the article!

Browse More Content