How can I change the search font color on my website?

Store Design
, , , , ,

Topic summary

A user is unable to change the font color for their website’s search bar and sidebar newsletter form, wanting both to display in dark green to match their theme.

Proposed Solutions:

Multiple developers offered CSS-based fixes:

  • EBOOST suggested adding CSS code to theme.css targeting #SiteNavSearch, #popupNewsletter, and #sidebar #contact_form h3 with color: var(--g-color-heading) and placeholder styling with opacity adjustments.

  • JonasS identified a conflict with the heading text color and recommended assigning a color specifically for the search text independently.

  • GemPages provided steps to paste code into theme.liquid before the </body> tag (specific code snippet appears corrupted in the thread).

  • PageFly-Victor recommended adding CSS to the bottom of theme.css targeting .site-header elements, search inputs, and newsletter placeholders with color: var(--header-background).

Status: The issue remains unresolved with no confirmation from the original poster about which solution worked. All solutions require editing theme files via the Shopify code editor.

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

Hi all,

I am having the problem where I cannot change the font color of the search font, as well as the side bar newsletter font
I would like for it to be dark green color from my theme.
I have attached picture,

Click here to see store
Password: reibli

Screenshot 2022-12-28 at 5.28.49 PM.png
Screenshot 2022-12-28 at 5.28.49 PM.png2590×1292 126 KB

Screenshot 2022-12-28 at 5.29.28 PM.png
Screenshot 2022-12-28 at 5.29.28 PM.png1570×1558 101 KB

2

Hi @nizo92

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. Copy code below to bottom of file
#sidebar #contact_form h3,
#popupNewsletter,
#SiteNavSearch {
	color: var(--g-color-heading);
}
#popupNewsletter::placeholder,
#SiteNavSearch::placeholder { 
  color: var(--g-color-heading);
  opacity: 1; 
}
#popupNewsletter:-ms-input-placeholder,
#SiteNavSearch:-ms-input-placeholder { 
  color: var(--g-color-heading);
}
#popupNewsletter::-ms-input-placeholder,
#SiteNavSearch::-ms-input-placeholder { 
  color: var(--g-color-heading);
}
3

There is some conflict with your head text color. You should assign a color for your search text independently.

4

Hello @nizo92

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1672279504057.png
GemPages_0-1672279504057.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1672279535548.png
GemPages_1-1672279535548.png1268×846 65.2 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Hi @Nizo92,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css.

Step 3: Paste the below code at bottom of the file → Save

.site-header__search-input,#popupNewsletter,#popupNewsletter::placeholder{
color:var(–header-background)
}

PageFlyVictor_0-1672280538227.png
PageFlyVictor_0-1672280538227.png1600×230 7.16 KB

PageFlyVictor_1-1672280538259.png
PageFlyVictor_1-1672280538259.png992×1262 6.77 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly