Shopify themes, liquid, logos, and UX
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
HI @SebastianL
Please follow this article I hope this may help you out. Please find the link here
Thanks
Thank you @Amitjaiswal for the link. Will try and see if I can make sense of it.
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
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?
Sadly it still doesn't work. I'm supposed to put it in the base.css right?
@SebastianL oh sorry for that let me know which icon color change on hover
I only want to change my cart icon to behave accordingly to my other icons.
No hover: #DDD
Hover: #FFF
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;}
@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...
@SebastianL if i have added this code its work see
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?
please make sure do don't add inline css
Yea, will do @KetanKumar!
Now that I fixed my SVG to only be a single path it doesn't react at all to hover...
.header__icon--cart:hover .st0 {stroke: red !important;}
wow it would be great can you try this code
a#cart-icon-bubble svg .st1 {
stroke: #ddd !important;
}
a#cart-icon-bubble svg .st1:hover {
stroke: #fff !important;
}
try out this code.
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.
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024