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;
}
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024