Website search bar font colour is all white and it cannot be read at all.

Solved

Website search bar font colour is all white and it cannot be read at all.

Matt_TYH
Excursionist
17 0 3

I recently made some updates to my theme and realized that my search bar has turned all white. I assume it's the font color that got changed because it is all white but the thing is I did not touch anything to do with the font colors. The search bar still works and I can search up products but it is all white and I have no idea how to change it back even though I've looked all over the theme settings.

 

Has anyone else ever experienced this before? Some assistance on this would be greatly appreciated!

 

Matt_TYH_0-1706077733381.png

 

Accepted Solutions (2)

Huptech-Web
Shopify Partner
960 192 202

This is an accepted solution.

Hi @Matt_TYH 
To get the search visible properly you can add below CSS code to component-predictive-search.css, It will show like the: https://prnt.sc/TJWEAqhoPqun

 

 

div#predictive-search-results-groups-wrapper {
    background-color: #253e73;
}

 

 

And below css to component-search.css

 

.search__input.field__input {
    color: black;
}
[data-predictive-search-search-for-text] {
    color: black;
}

 

  

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

This is an accepted solution.

Some sections use the same color scheme so when you edit colors in those settings, it could affect other pages or sections. I recommend you create a new color scheme from your Theme settings

Screenshot 2024-01-24 at 15.00.44.png

Select that scheme to edit color so it would not affect other sections or page 

Screenshot 2024-01-24 at 15.02.31.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Huptech-Web
Shopify Partner
960 192 202

This is an accepted solution.

Hi @Matt_TYH 
To get the search visible properly you can add below CSS code to component-predictive-search.css, It will show like the: https://prnt.sc/TJWEAqhoPqun

 

 

div#predictive-search-results-groups-wrapper {
    background-color: #253e73;
}

 

 

And below css to component-search.css

 

.search__input.field__input {
    color: black;
}
[data-predictive-search-search-for-text] {
    color: black;
}

 

  

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Matt_TYH
Excursionist
17 0 3

Thank you so so much, that's what I was looking for. With these codes I can also play around with the color as well!

anniebtt
Visitor
2 0 0

Thank you, this worked for me!!

Is it possible that you can help me change the color for the results please?Screenshot 2024-10-20 at 2.54.24 PM.png

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

Did you change the color in any Scheme of your theme? If you don't mind, please share your store URL so I can check and give you the code to solve the solution.

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Matt_TYH
Excursionist
17 0 3

I did play around with the theme's colour scheme, but I tried to change some colours back and the search bar was still white so I assumed the scheme colour change wasn't the problem but if you could search the root cause of it that would be great! so I can avoid this mistake again next time.

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

This is an accepted solution.

Some sections use the same color scheme so when you edit colors in those settings, it could affect other pages or sections. I recommend you create a new color scheme from your Theme settings

Screenshot 2024-01-24 at 15.00.44.png

Select that scheme to edit color so it would not affect other sections or page 

Screenshot 2024-01-24 at 15.02.31.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Matt_TYH
Excursionist
17 0 3

Well noted on that Dan, I will keep this in mind! Thanks for your help!