"Search Result Page" Search Bar Color Scheme Customization (Refresh Theme)

[Homefeel]

Hello everyone, I am having some issues with figuring out how to customize the “Search Result Page” Search Bar Color Scheme. It looks completely out of place and I cannot find where to customize the colors for this specific location.

I’ve added 2 photos for comparison: one is regular search bar and the other is from the aforementioned page.

Thank you

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

if i managed to help you don’t forget to like and mark it solution

[devcoders]

Hello @Homefeel

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

input#Search-In-Template {
background-color: #9cbc7c;
}

[Homefeel]

Hi, if I try to do this the page throws out an anomaly, bunch of code at the top. I hope I pasted where you meant - right after % style %

[Mustafa_Ali]

hey @Homefeel plz place the code above the body tag

[Homefeel]

This doesn’t work so well

[Homefeel]

Hi, this worked out perfectly for the Search Bar itself, however the contents below remain in the old orange

[devcoders]

Hello @Homefeel

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.predictive-search.predictive-search--search-template {
    background-color: #9cbc7c!important;
    border-color: #9cbc7c!important;
}

[Homefeel]

This worked perfectly. I will mark as solution, thank you very much!

[devcoders]

Hello @Homefeel

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful then please Like and Accept Solution.