Shopify themes, liquid, logos, and UX
Hi,
I would like to make the wishlist heart icon adaptive to the background color like the search and the cart icon next to it.
Also, the margin between the heart and the search icon is too small. I would like to make it the same as the margin between the search and cart icon.
Link to the website:
https://sassysusa.com/
Thank you
Hi @Ronla1
Its Artzen Technologies! We will be happy to help you today.
Please add the below CSS to your CSS file.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find Your CSS file
4) Add the following code in the file.
svg.Vtl-WishlistHeader__HeartIconWrapper {
fill: white!important;
margin-right: 10px;
}
svg.Vtl-WishlistHeader__HeartIconWrapper .is-sticky {
fill: black!important;
margin-right: 10px;
}
Below is the Screenshot for the same.
Let me know if need further assistance
Regards,
Artzen Technologies
Hi @Artzen_tech ,
First of all, thank you so much.
But I need the color to be adaptive and transform when scrolling.
Just like the icons next to it.
Also, I need the 'number of items badge' on the icon to work the same.
This image shows the before and after scrolling:
HI, @Ronla1.
Follow These Steps.
Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.
svg.Vtl-WishlistHeader__HeartIconWrapper {
fill: #fff !important;
}
.header:hover svg.Vtl-WishlistHeader__HeartIconWrapper {
fill: black !important;
}
Result:
Hover-effect-header
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Please search the theme.css and style.css .
Hello @Ronla1
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->app.css>Add this code at the bottom.
.Vtl-WishlistHeader {
padding: 0 10px;
}
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024