Hey! This solved a part of the problem but the search results are still black
Topic summary
A Shopify store owner encountered visibility issues with their search bar due to incorrect color settings that didn’t match their theme.
Initial Problem:
- Search bar was invisible against the background
- User identified the issue but couldn’t locate the source code or fix
Solution Process:
The fix required adding custom CSS to the base.css file in the theme’s Assets folder:
- Search bar transparency: Added code to make the input field background transparent
- Search results background: Initially remained black, requiring additional CSS targeting
div#predictive-search-resultswith white background color and!importantflag
Final Resolution:
- Multiple CSS snippets were tested before finding the working solution
- The issue was resolved by modifying background colors for both the search input field and predictive search results container
- Another user confirmed experiencing the same issue and shared their fix using Custom CSS in the Search Section of the Search Template
Technical Details:
All solutions involved navigating to Themes → Edit Code → Assets → base.css and adding CSS rules at the bottom of the file, with some requiring !important declarations to override existing styles.
