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

SebastianL
Explorer
70 0 20

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

Replies 18 (18)

Amitjaiswal
Shopify Partner
29 0 7

HI @SebastianL 

 

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

 

Thanks

Thanks
SebastianL
Explorer
70 0 20

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

ReturnPrime
Shopify Partner
438 63 102

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

SebastianL
Explorer
70 0 20

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?

ReturnPrime
Shopify Partner
438 63 102

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

SebastianL
Explorer
70 0 20

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

KetanKumar
Shopify Partner
36839 3635 11972

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SebastianL
Explorer
70 0 20

@KetanKumar

 

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

 

No hover: #DDD

Hover: #FFF

KetanKumar
Shopify Partner
36839 3635 11972

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SebastianL
Explorer
70 0 20

@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...

KetanKumar
Shopify Partner
36839 3635 11972

@SebastianL if i have added this code its work see 

KetanKumar_0-1652181357851.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SebastianL
Explorer
70 0 20

Thanks @KetanKumar! Now I noticed it does work the same way as @Mr_RaviRajs 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?

KetanKumar
Shopify Partner
36839 3635 11972

@SebastianL 

please make sure do don't add inline css 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SebastianL
Explorer
70 0 20

Yea, will do @KetanKumar!

 

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

KetanKumar
Shopify Partner
36839 3635 11972

@SebastianL 

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

KetanKumar_0-1652183126085.png

 

wow it would be great can you try this code

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mr_RaviRaj
Shopify Partner
505 57 108

@SebastianL 

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

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

try out this code.

banned
SebastianL
Explorer
70 0 20

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.

nishanttbi
Explorer
68 2 6

Target the . icon class in CSS and set the SVG fill property on the hover state to swap colors. This is by far the easiest way to apply a colored hover state to an SVG

Want to modify or custom changes on store hire me.
Email: info@brihaspatitech.com
If helpful then please Like and Accept the Solution.