Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Try this one. Again Same Instruction.
div#predictive-search-results {
background: white !important;
}
And Save.
Hi @shopeve
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Thanks, sorry to say but this cant be transparent. Try this one and change other color.
div#predictive-search-option-search-keywords {
background: blue !important;
}
I tried to add this code to the base.css file but the search results still appear in black
This is an accepted solution.
Try this one. Again Same Instruction.
div#predictive-search-results {
background: white !important;
}
And Save.
This worked thank you for your help!
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)
Thank you so much this worked!
Hey! This solved a part of the problem but the search results are still black
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;
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025