How to correct this code to change the cart icon?

Store Design
1

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”>

.st0{fill:#E8A733;} .st1{fill:none;stroke:#E8A733;stroke-width:0.5;stroke-miterlimit:10;}

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

2

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.

3

Hi Ninthony,

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

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!

4

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;
}
5

Thank you so much Ninthony, your advice solved it! :slightly_smiling_face:

6

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?