What's your biggest current challenge? Have your say in Community Polls along the right column.

Change search bar and results colour

Solved

Change search bar and results colour

benio1005
Tourist
4 0 1

Hello! My search results page doesn't follow my theme settings, I changed the CSS with results from another discussion on here which solved most of the issues but the search bar and search results colours are still incorrect. As you can see the results should be black text with the white background but they are instead a black background with white text:

 

Screenshot 2024-10-30 at 13.30.36.png

 

Screenshot 2024-10-30 at 13.30.51.png

Accepted Solution (1)
DaisyVo
Shopify Partner
1080 139 154

This is an accepted solution.

Hi @benio1005 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.template-search__search * {
    background: white !important;
    color: black !important;
    border-color: rgba(0,0,0,0.1) !important;
}
.template-search__search input.search__input field__input {
    border-color: black !important;
}
.template-search__search .field {
    border: 1px solid black !important;
    border-radius: 40px !important;
}
.template-search__search button.search__button.field__button {
    border-radius: 40px !important;
}

 

 

Here is the result: https://prnt.sc/bKaN94fHDhJ- 

 

Hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 8 (8)

DaisyVo
Shopify Partner
1080 139 154

Hi @benio1005 

 

Could you provide us with your store URL so I can check it from my end?

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
benio1005
Tourist
4 0 1
DaisyVo
Shopify Partner
1080 139 154

This is an accepted solution.

Hi @benio1005 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.template-search__search * {
    background: white !important;
    color: black !important;
    border-color: rgba(0,0,0,0.1) !important;
}
.template-search__search input.search__input field__input {
    border-color: black !important;
}
.template-search__search .field {
    border: 1px solid black !important;
    border-radius: 40px !important;
}
.template-search__search button.search__button.field__button {
    border-radius: 40px !important;
}

 

 

Here is the result: https://prnt.sc/bKaN94fHDhJ- 

 

Hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
benio1005
Tourist
4 0 1

Perfect! All working now thank you so much!

Made4uo-Ribe
Shopify Partner
9186 2191 2708

Hi @benio1005 

Please, share your store URL. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
benio1005
Tourist
4 0 1
Made4uo-Ribe
Shopify Partner
9186 2191 2708

Thanks for the info, try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
.search__input.field__input, .field__label, .predictive-search__results-groups-wrapper,
div#predictive-search-option-search-keywords {
    background: #ffff;
    color: #000;
}
.search__input.field__input {
    border: 1px solid;
}

.field__button {
    color: #000;
}
.predictive-search__results-groups-wrapper *, div#predictive-search-option-search-keywords * {
    color: black;
}
div#predictive-search-option-search-keywords {
    border-top: 1px solid;
}
p.predictive-search__item-heading.predictive-search__item-query-result.h5 mark {
    color: black;
    opacity: .7;
}

</style>

 

  • And Save. 
  • Result:
    Made4uoRibe_0-1730305038948.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

namphan
Shopify Partner
2071 276 309

Hi @benio1005,

Please go to Actions > Edit code > Assets > component-search.css file and paste this at the bottom of the file:

.template-search__search {
    --color-background: 255, 255, 255;
    --gradient-background: #ffffff;
    --color-foreground: 18, 18, 18;
    --color-background-contrast: 191, 191, 191;
    --color-shadow: 18, 18, 18;
    --color-button: 18, 18, 18;
    --color-button-text: 255, 255, 255;
    --color-secondary-button: 255, 255, 255;
    --color-secondary-button-text: 18, 18, 18;
    --color-link: 18, 18, 18;
    --color-badge-foreground: 18, 18, 18;
    --color-badge-background: 255, 255, 255;
    --color-badge-border: 18, 18, 18;
    --payment-terms-background-color: rgb(255 255 255);
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com