Re: Search bar color is not matching theme settings

Solved

Search bar color is not matching theme settings

shopeve
Excursionist
17 0 5

I am having an issue with the search bar on my website being the wrong colour due to which it cannot be seen at all. I was able to identify the problem but I am not sure where this code originates from or how to fix it.

https://shopify.click/15539-49175-21858-5303-1387.webm

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
8858 2118 2602

This is an accepted solution.

Try this one. Again Same Instruction. 

div#predictive-search-results {   
background: white !important;
}

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
8858 2118 2602

Hi @shopeve 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shopeve
Excursionist
17 0 5
Made4uo-Ribe
Shopify Partner
8858 2118 2602

Thanks, sorry to say but this cant be transparent. Try this one and change other color. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

div#predictive-search-option-search-keywords {
    background: blue !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1697481090157.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shopeve
Excursionist
17 0 5

I tried to add this code to the base.css file but the search results still appear in black

shopeve_0-1697486514922.png

 

Made4uo-Ribe
Shopify Partner
8858 2118 2602

This is an accepted solution.

Try this one. Again Same Instruction. 

div#predictive-search-results {   
background: white !important;
}

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shopeve
Excursionist
17 0 5

This worked thank you for your help!

David_SHT
Globetrotter
605 125 126

Hi @shopeve 

This is David at SalesHunterThemes.

To change the color of input field

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

 

.header__search .field__input {
background: transparent;
}

 

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

shopeve
Excursionist
17 0 5

Thank you so much this worked!

shopeve
Excursionist
17 0 5

Hey! This solved a part of the problem but the search results are still black

shopeve_0-1697480389673.png

 

Grizaye
Visitor
1 0 0

I also had the black background of both the search bar and results - here was my fix . . .
I added this Custom CSS field on the Search Section of the Search Template.
I hope this helps someone else.

.search .field__input {
  background: #f3f3f3;
}
div#predictive-search-results {
  background: white !important;
}