It is hard to see what the customers type in the search bar and I failed to change the background / the font colour.
Please see the below or go to https://www.sanjorajewelry.com/
Topic summary
A user encountered visibility issues with their store’s search bar, where customer input was difficult to read due to poor color contrast.
Initial Problem:
- Search bar text was hard to see against the background
- User unable to change background or font colors
Solutions Provided:
Multiple community members offered CSS code solutions to be added to the theme files:
- Initial fix targeted search input text color using
.search-popdown__mainand related selectors - Added custom CSS to
theme.cssortheme.liquidfiles
Complications & Refinements:
- First solution worked but left product prices (dollar amounts) in search results unreadable
- Second attempt to fix prices inadvertently changed all prices site-wide to white
- Final solution specifically targeted only search bar elements using
.search-popdown .product-information .priceselector
Resolution:
The issue was successfully resolved after multiple iterations. The final CSS code changed both the search input text color and product price display within the search results, without affecting prices elsewhere on the site. User confirmed the solution worked correctly.
Hi @KitLing ,
This is David at SalesHunterThemes.
Thank you for your question.
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code.
Go Assets folder → theme.css file.
Add this following code at the bottom of page.
.search-popdown__main {
color: #fff;
}
.search-popdown__form input::placeholder,
.search-popdown__form input {
color: #fff;
}
.search-popdown__results {
color: #fff;
}
.search__results__actions a {
color: #fff;
border: 1px solid #fff;
}
.search__results__products__list .product-item__title {
color: #fff;
}
Hopefully, this proves useful.
David | SalesHunterThemes team
Hi @KitLing
You can change color of text by adding this CSS code at the bottom of theme.css file
.search-popdown__form input::placeholder,
.search-popdown__form input {
color: #fff !important;
}
Hey @KitLing
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
It works! Thank you so much. However, there’s another issue. The dollar amount is not showing as white, any idea how? Or maybe we could change the background of the whole search part as white?
Hey @KitLing
Keep the previous code and add this new code above in theme.liquid file
.product-information .price {
color: white !important;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello, it doesn’t work. Could you provide me with a solution that changes the background from blue to white instead? Then I don’t need your previous code as well. Thanks.
Sorry, I pasted to the wrong part. This solution works! Thank you very much!
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Sorry, the solutions work, but then all the prices in other parts (non search bar) becomes white too. Perhaps changing the blue background of the search part to white is the best? Thanks. Could you provide me with the solution?
Hey @KitLing
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Amazing, thank you for your help!
1 Like