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

[EmoryC]

can anybody give me a definitive answer how to change the icon to whichever design I'd like. I've already upload the file to shopify just need to know where or how to add it to the store

thank you

[Developden]

Hi @EmoryC 

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 can give more detailed instructions if you can provide the icon as it all depends on the format your icon is in. 

[EmoryC]

I managed to figure out how to do it, but do you also know how I can change the size in the code ? the design is 800x800 I believe, but it's much bigger than other icons

thanks

[Developden]

@EmoryC 

Can you please provide the code you modified and also can you let me know where you modified this code, in which file?

[EmoryC]

I can't paste the exact code I copied for the SVG as it is very long.

Basically I learned how to get the proper code for the SVG then followed your steps and deleted and replaced all the code in the icon-cart.liquid and icon-cart-empty.liquid files. That added the icon successfuly and now I just need to resize it.

thanks

[Developden · Accepted solution]

@EmoryC 

I recommend you add this code inside your svg code, so if your svg goes like this:

<svg fill=“#000” …..

, you would add

<svg style=“width:20px; height:20px” fill=“#000” …

, and you can modify the number value of 20 for height and width to make the size perfect.

Also I used the fill attribute here as an example while your code might have something else. 

Hopefully that helps.

[EmoryC]

I tried adding that code every way I could and It didn't change anything.

I appreciate the help though

[EmoryC]

Nevermind I've figured it out, your answer was key in helping me figure this out so thank you

[summitecommerce]

Hi Emory, would you mind sharing how you were able to size your cart icon? I also tried adding the code to our SVG tag however it doesn't seem to be changing the cart icon size at all. Can you share how your SVG tag is setup? Thanks!

[summitecommerce]

Hi Developden, I tried adding this code in a few places in the SVG to size down the cart, however after changing the 20 to 10, it seems to have no effect on the cart size. can you please see the code below and tell me what I'm doing wrong here? Thank you for any help:

<svg
xmlns="http://www.w3.org/2000/svg" id="i-cart" viewBox="0 0 32 32" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
class="icon icon-cart-empty"

aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
fill="none"
style=“width:10px; height:10px”

>
<path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2"/>
<circle cx="25" cy="27" r="2"/>
<circle cx="12" cy="27" r="2"/>
</svg>

[petceros19]

Could you help me with something bro, it's just I'm trying to change my cart icon in Dawn theme, and I paste SVG there, but the current code has a class called "icon-cart-empty" but when I put it, the cart icon just disappears, do you have any idea how to fix it? 

This is my code:

<svg
class="icon icon-cart-empty" ---> When add this the cart is displayed but invisible.
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
style="width:20px; height:20px"
viewBox="0 0 35 35"
fill="#000000"
>
<path d="M27.47,23.93H14.92A5.09,5.09,0,0,1,10,20L8,11.87a5.11,5.11,0,0,1,5-6.32h16.5a5.11,5.11,0,0,1,5,6.32l-2,8.15A5.1,5.1,0,0,1,27.47,23.93ZM12.94,8.05a2.62,2.62,0,0,0-2.54,3.23l2,8.15a2.6,2.6,0,0,0,2.54,2H27.47a2.6,2.6,0,0,0,2.54-2l2-8.15a2.61,2.61,0,0,0-2.54-3.23Z"></path><path d="M9.46 14a1.25 1.25 0 0 1-1.21-1L6.46 5.23A3.21 3.21 0 0 0 3.32 2.75H1.69a1.25 1.25 0 0 1 0-2.5H3.32A5.71 5.71 0 0 1 8.9 4.66l1.78 7.77a1.24 1.24 0 0 1-.93 1.5A1.43 1.43 0 0 1 9.46 14zM15.11 34.75a4 4 0 1 1 4-4A4 4 0 0 1 15.11 34.75zm0-5.54a1.52 1.52 0 1 0 1.52 1.52A1.52 1.52 0 0 0 15.11 29.21zM28.93 34.75a4 4 0 1 1 4-4A4 4 0 0 1 28.93 34.75zm0-5.54a1.52 1.52 0 1 0 1.53 1.52A1.52 1.52 0 0 0 28.93 29.21z"></path><path d="M28.93,29.21H12.27a3.89,3.89,0,1,1,0-7.78h2.65a1.25,1.25,0,1,1,0,2.5H12.27a1.39,1.39,0,1,0,0,2.78H28.93a1.25,1.25,0,0,1,0,2.5Z"></path>
</svg>