How do I change colour of an SVG cart icon on hover?

Store Design
1

Is it possible to make my custom SVG cart icon change colour on hover or will It always stay the same colour as the original SVG file?

What I want to do is have it in #DDD as it is now and then turn #FFF on hover.

URL: https://pleasedontbetaken.myshopify.com/

Password: lutred

2 Likes
2

HI @SebastianL

Please follow this article I hope this may help you out. Please find the link here

Thanks

1 Like
3

Hey @SebastianL ,
Welcome to the Shopify community!
You can follow the instruction below:

.header__icon--cart:hover  .header__icon--cart>path,
.header__icon--cart:hover  .header__icon--cart>.st1 {
  stroke: #FFF;
}

If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman

1 Like
4

Thank you for your reply! Looked promising but sadly it didn’t work…

Think it might have something to do with my SVG having a set colour or do you think that might interfere?

5

Thank you @Amitjaiswal for the link. Will try and see if I can make sense of it.

1 Like
6

Hey @SebastianL , Ideally it should work. Try putting !important in CSS .

1 Like
7

Sadly it still doesn’t work. I’m supposed to put it in the base.css right?

1 Like
8

@SebastianL oh sorry for that let me know which icon color change on hover

9

@KetanKumar

I only want to change my cart icon to behave accordingly to my other icons.

No hover: #DDD

Hover: #FFF

1 Like
10

@SebastianL

can you try this code only you cart icon

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.st1:hover {stroke: #ffffff !important;}
1 Like
11

@SebastianL

a#cart-icon-bubble svg .st1 {
    stroke: #ddd !important;
}

a#cart-icon-bubble svg .st1:hover {
    stroke: #fff !important;
}

try out this code.

1 Like
12

@KetanKumar thanks for your replies but sadly its not working. Feels like it must have something to do with my custom SVG having a pre-set colour…

1 Like
13

@SebastianL if i have added this code its work see

KetanKumar_0-1652181357851.png
KetanKumar_0-1652181357851.png1920Ă—1080 444 KB

1 Like
14

Okay I think you are on to something here @Mr_RaviRaj .

Its not fully solved yet - however, now when I hover precisely on the stroke of my icon the specific line on hover turns #FFF.

As I understand it now, we need to change it so that the “complete button” reacts to the hover.

PS: I will change my SVG to not be split up in different lines.

15

Thanks @KetanKumar ! Now I noticed it does work the same way as @Mr_RaviRaj s solution.

The problem is that it only responds to hovering precisely on the stroke of the icon. Also it only changes the colour of the specific line.

I am changing the SVG to be come one stroke - do you know how to make the code react to hovering over the whole button?

1 Like
16

@SebastianL

please make sure do don’t add inline css

1 Like
17

Yea, will do @KetanKumar !

Now that I fixed my SVG to only be a single path it doesn’t react at all to hover…

1 Like
18

@SebastianL

.header__icon--cart:hover .st0 {stroke: red !important;}

KetanKumar_0-1652183126085.png
KetanKumar_0-1652183126085.png1920Ă—1080 426 KB

wow it would be great can you try this code