How to correct this code to change the cart icon?

Solved
sjundi
New Member
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
0 Likes
Ninthony
Shopify Partner
1785 256 695

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 and accept as 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 :D
0 Likes
sjundi
New Member
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!

 




0 Likes
Ninthony
Shopify Partner
1785 256 695

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 and accept as 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 :D
sjundi
New Member
3 0 0

Thank you so much Ninthony, your advice solved it!

0 Likes