Change search bar and results colour

Store Design
,
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:

Correct format
Correct format2880×1800 435 KB

Incorrect format
Incorrect format2880×1800 420 KB

1 Like
2

Hi @benio1005

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

Best,

Daisy

3

Hi @benio1005

Please, share your store URL. Thanks!

4

https://www.tracksideapparel.co.uk/

5

https://www.tracksideapparel.co.uk/

6

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);
}
1 Like
7

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

1 Like
8

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 tag and paste the code below before the tag.

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

1 Like
9

Perfect! All working now thank you so much!