Why don't my cart and account icons match my header text colors?

Store Design

Topic summary

A user’s cart and account icons are not matching the header text colors on their Shopify store.

Initial Solution Attempt:

  • GemPages support provided CSS code to add before </head> in the theme.liquid file
  • This fixed the homepage but created problems on other pages

Alternative Solutions Offered:

  • ExpertRookie suggested adding CSS to base.css file targeting .template-index .site-header-transparent .header__icon svg with white fill
  • LitExtension recommended similar approach: adding header__icon svg { fill: #ffffff !important; } to bottom of base.css

Current Status:
The issue appears partially resolved (homepage working) but remains unresolved for other pages. Multiple CSS-based solutions have been proposed focusing on the base.css file rather than the initial theme.liquid approach.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Anyone who can help me with my cart and account icon which doesn’t want to match with the rest of the textcolours of my header?

www.mywoodpanels.com

2

Hello @MYWOOD ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1672104511645.png
GemPages_0-1672104511645.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

3

Hi Gempages,

This fixed the homepage but occurs a problem on all the other pages…

You think we can fix this?

homepage.png
homepage.png1920×1080 306 KB

rest of pages.png
rest of pages.png1920×1080 243 KB

4

HI @MYWOOD
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.template-index .site-header-transparent .header__icon svg{
fill: white;
}
1 Like
5

Man can i just call you awesome?!

Thank you!!

6

Hi @MYWOOD ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.header__icon svg {
    fill: #ffffff !important;
}

Hope it helps!