How can I change the cart icon in the Dawn theme?

[ed_bb]

Hi,

Using new V12 of Dawn theme and wanting to change Cart icon to one of my own. Have seen posts where people are adding svg code in but I have a png icon I want to upload to use as my cart icon instead.

If someone could advise how to use an image uploaded to my file.

Also, do I have to have 2 versions of the image or does Shopify create the 1/2/3 etc as people add things to their cart?

Thanks.

[PageFly-Theodor]

Hi @ed_bb ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Change Cart Icon - Dawn Theme, let’s try this solution:

To edit the cart icon in the Dawn theme, follow these steps:

1. Go to Admin>Online Store
2. On the Dawn theme click Actions>Edit Code
3. Find the icon-cart.liquid and icon-cart-empty.liquid files in the Snippets folder
4. Replace the code in those files with your custom icon.

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

[ed_bb]

Hi Theodore from PageFly,

Thank you for your quick response. I have added my SVG code which now shows my updated cart icon - thank you.

However, when you add something to your cart the number in the circle that Shopify adds is over the centre of my new icon, not in the top right corner as I want it to be. How do I alter the position of where shopify adds the number of items in your cart, please?

Thanks.

[PageFly-Theodor]

You can add CSS code to change the style

[Zingybuisness]

How do i change the checkout page icon?

[Dan-From-Ryviu]

You also can replace your PNG image with SVG code in your Online store > Themes > Edit code > open icon-cart-empty.liquid and icon-cart.liquid files, replace SVG code with this code.

<img src="put your png image link here" alt="cart">

Ensure you put your png image link into the src tag of the image element.

But I recommend you convert your png image into a SVG icon because SVG take less time to load than png file

[Ahmad032141]

You'll have to click on the add new asset, and upload the image. Then in the snippets folder put the code you see in the image, just replace the "your_cart_image" with the name of the image you uploaded. Moreover,  you can adjust the height and width of the image with the numbers in height and widht parameters. Do the same with the empty cart icon, just change the name of "your_cart_image" to the empty icon you uploaded.
If you want to use an image from the file then you can simply copy the image url and put it insde the quotation marks after src. Note: remove everything in those quotation marks as you see in the image  and just add the URL.
If you have uploaded the image in assets of them:
<img src="{{ 'your_cart_image.png' | asset_img_url }}" width="30" height="30">
if you have uploaded the image in the files of your store:
<img src="Link of the image goes here" width="30" height="30">

[ed_bb]

Hi,

Thank you both for the information. So it sounds like SVG is better for page load speed so I have converted my png to svg and copied the code in.

File size is 64 x 64 however on mobile version now the cart icon seems very large.

What should the file size be for the cart icon? Or should I use further code to limit the size displayed?

Thanks again.

[Ahmad032141]

If you want to change the size only for mobile, then I can't think of anything but doing it through some css.

[Dan-From-Ryviu]

Hi @ed_bb could you send me your SVG code? 

[ed_bb]

Hi Dan,

Won't let me post SVG code as apparently it contains bad language? Can't even PM it to you, any suggestions?

I'm getting my SVG code via a converter online.

Thanks.