Making the Wishlist icon on the header color adaptive to the background

Ronla1
Excursionist
24 1 1

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.

Ronla1_0-1696313247427.png

 

Ronla1_1-1696313247429.png

 


Link to the website:
https://sassysusa.com/

Thank you 

Ronla1_2-1696313247216.png

 

Replies 6 (6)

Artzen_tech
Shopify Partner
528 105 104

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.

Artzen_tech_0-1696314147569.png


Let me know if need further assistance
Regards,
Artzen Technologies

 

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Ronla1
Excursionist
24 1 1

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:

Ronla1_0-1696314585413.png

 

websensepro
Shopify Partner
873 117 126

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:

websensepro_0-1696316971978.png

 

Hover-effect-header

websensepro_1-1696317020774.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Ronla1
Excursionist
24 1 1

Hi @websensepro 
I can't find Base.css anywhere

websensepro
Shopify Partner
873 117 126

Please search the theme.css and style.css .

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

oscprofessional
Shopify Partner
15782 2362 3068

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing