Solved

How to correct this code to change the cart icon?

sjundi
Visitor
3 0 0
Hi all,
 
I am replacing the shopping cart icon on my Shopify site, and it works great, but the image comes up with a fill, even though in Illustrator when I drew the illustration, it has no fill, only a stroke. I need the image to be only stroke no fill.
 
This is the code I'm using:
 
    <svg class="icon"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"
style="enable-background:new 0 0 16.9 17;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E8A733;}
.st1{fill:none;stroke:#E8A733;stroke-width:0.5;stroke-miterlimit:10;}
</style>
<path id="path4" class="st0" d="M32.8,5"/>
<polygon id="polygon6" class="st1" points="0.6,0.5 16.3,0.5 16.3,2.7 15,3.6 16.3,4.6 16.3,16.5 0.6,16.5 0.6,4.6 2,3.6 0.6,2.6"/></svg>
 
 
It's my first time coding really, so I'm sure there's a mistake I've not spotted!

Could anyone please help in changing the code so it's only a stroke? Thank you, very much
Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

If you want the bag centered with the cart text,  you can add this to the bottom of your theme.scss.liquid file in your assets folder:

.site-header__cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-header__cart img{
    margin-right: 10px;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 5 (5)

Ninthony
Shopify Partner
2329 350 1023

Try changing ".st0{fill:#E8A733;}" to ".st0{fill:none;}". Or if you can upload the svg somewhere and allow me to download it I can take a look and see if I can't save it out correctly. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
sjundi
Visitor
3 0 0

Hi Ninthony,

 

Thanks so much for your reply! So I actually solved it by using this alternate code:

<img src="https://cdn.shopify.com/s/files/1/0536/5386/4643/files/crisp3.svg?v=1619098462" width="20" height="20" />

 

Although now I'm having the issue that the icon is too high up and I want it to align at the bottom with the rest of the text in that section (Cart, Sign Up, Login etc) - here's our website so you can see what I mean:
https://shop.lakedistrictfarmersarms.com

Do you have any advice on how to change the code to make it align? Thank you!

 




Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

If you want the bag centered with the cart text,  you can add this to the bottom of your theme.scss.liquid file in your assets folder:

.site-header__cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-header__cart img{
    margin-right: 10px;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
sjundi
Visitor
3 0 0

Thank you so much Ninthony, your advice solved it! 🙂

kenyonlloyd
Visitor
1 0 0

I am having this same issue but I don't have theme.scss.liquid file in my assets folder? Is there another way to bottom align cart icon with logo and search icon?