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

SebastianL
Excursionist
58 0 18

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
25 0 6

HI @SebastianL 

 

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

 

Thanks

Thanks
ReturnPrime
Trailblazer
186 17 38

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
Excursionist
58 0 18

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?

SebastianL
Excursionist
58 0 18

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

ReturnPrime
Trailblazer
186 17 38

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

SebastianL
Excursionist
58 0 18

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

KetanKumar
Shopify Partner
31362 3131 10502

@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
Excursionist
58 0 18

@KetanKumar

 

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

 

No hover: #DDD

Hover: #FFF

KetanKumar
Shopify Partner
31362 3131 10502

@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
Mr_RaviRaj
Shopify Partner
262 32 42

@SebastianL 

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

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

try out this code.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: raviraj@zworthkey.com
,We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
SebastianL
Excursionist
58 0 18

@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
31362 3131 10502

@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
Excursionist
58 0 18

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
54 2 2

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.
SebastianL
Excursionist
58 0 18

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
31362 3131 10502

@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
Excursionist
58 0 18

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
31362 3131 10502

@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