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

Solved

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

EmoryC
Tourist
7 0 2

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

Accepted Solution (1)
Developden
Shopify Partner
38 20 18

This is an 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.

If we helped you, please Like and Accept the Solution.
Developden | Custom Shopify Solutions
Contact us: contact@developden.com
https://developden.com

View solution in original post

Replies 10 (10)

Developden
Shopify Partner
38 20 18

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. 

If we helped you, please Like and Accept the Solution.
Developden | Custom Shopify Solutions
Contact us: contact@developden.com
https://developden.com
EmoryC
Tourist
7 0 2

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
Shopify Partner
38 20 18

@EmoryC 

 

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

If we helped you, please Like and Accept the Solution.
Developden | Custom Shopify Solutions
Contact us: contact@developden.com
https://developden.com
EmoryC
Tourist
7 0 2

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
Shopify Partner
38 20 18

This is an 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.

If we helped you, please Like and Accept the Solution.
Developden | Custom Shopify Solutions
Contact us: contact@developden.com
https://developden.com
EmoryC
Tourist
7 0 2

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

I appreciate the help though

EmoryC
Tourist
7 0 2

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

summitecommerce
Shopify Partner
3 0 0

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
Shopify Partner
3 0 0

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
Visitor
1 0 0

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>