Re: Change Cart Icon - Dawn Theme

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

ed_bb
Excursionist
36 1 2

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.

Replies 10 (10)

PageFly-Theodor
Shopify Partner
691 86 98

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.

PageFlyTheodor_0-1700408373682.png

 


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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ed_bb
Excursionist
36 1 2

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
Shopify Partner
691 86 98

You can add CSS code to change the style

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Zingybuisness
Visitor
1 0 0

How do i change the checkout page icon?

Dan-From-Ryviu
Shopify Partner
8391 1652 1666

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

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Ahmad032141
Shopify Partner
30 3 6

Screenshot from 2023-11-19 21-02-29.png

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
Excursionist
36 1 2

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
Shopify Partner
30 3 6

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
Shopify Partner
8391 1652 1666

Hi @ed_bb could you send me your SVG code? 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ed_bb
Excursionist
36 1 2

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.