Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
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
Select that scheme to edit color so it would not affect other sections or page
- 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.
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;
}
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!
Thank you, this worked for me!!
Is it possible that you can help me change the color for the results please?
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.
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.
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
Select that scheme to edit color so it would not affect other sections or page
- 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.
Well noted on that Dan, I will keep this in mind! Thanks for your help!
We 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, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024