Shopify themes, liquid, logos, and UX
On my search results page found here https://downunderthunder.com.au/search?q=satisfyer&options%5Bprefix%5D=last
The search box is white and has no border making it invisible. How do I change it to have a black border and white background.
Solved! Go to the solution
This is an accepted solution.
Hey @JayFinlay
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.predictive-search__item-heading {
color: black !important;
}
.predictive-search__item-heading mark {
color: black !important;
}
.predictive-search__item--term svg {
color: black !important;
}
.predictive-search__item--term {
color: black !important;
}
.predictive-search.predictive-search--search-template {
background: white !important;
border: solid 1px black !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @JayFinlay
Keep the previous code and add this new code above </style> in the end of theme.liquid.
.search__input.field__input {
border: solid 1px black !important;
}
.template-search__search .search label.field__label {
color: black !important;
}
.search__button svg {
color: black !important;
}
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @JayFinlay
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.predictive-search__item-heading {
color: black !important;
}
.predictive-search__item-heading mark {
color: black !important;
}
.predictive-search__item--term svg {
color: black !important;
}
.predictive-search__item--term {
color: black !important;
}
.predictive-search.predictive-search--search-template {
background: white !important;
border: solid 1px black !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thanks so much but the actual box to type in is still invisible with no black border and the text is white like the background. Example of the search box I am refering too. I made the box black but I can't figure out how to make just the border black with black text while typing.
This is an accepted solution.
Hey @JayFinlay
Keep the previous code and add this new code above </style> in the end of theme.liquid.
.search__input.field__input {
border: solid 1px black !important;
}
.template-search__search .search label.field__label {
color: black !important;
}
.search__button svg {
color: black !important;
}
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you again! Almost perfect just missing one thing, the text itself as you type in the box is still white so you can't see what you have written.
Edit: Did it myself, thank you.
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.
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