How can I change the search bar background color in Dawn?

Store Design

Topic summary

Goal: Change the Dawn theme search bar background to white (and make the “Search” text bold) to contrast with a red header.

Progress: The search results dropdown (predictive search) was already set to white via base.css using:

  • #predictive-search-results { background: #fff; color: #000 }
  • #predictive-search-results * { color: #000 }

Context: Dawn is a Shopify theme; predictive search refers to the suggestions/results panel that appears as users type.

Actions taken: Helpers requested the store URL and password; the merchant provided them (uni-trendus.com, password: thogli).

Solution provided: To change the search input background in the modal:

  • Admin > Online Store > Themes > Edit code
  • In Assets (base.css/style.css/theme.css), add:
    input#Search-In-Modal { background: white !important; }
  • Save. A screenshot confirms the search input now has a white background.

Outcome: The background color change for the search input is achieved and visually confirmed.

Open point: Making the “Search” text bold inside the input was requested but not addressed in the provided solution.

Status: Partially resolved (background fixed); bold text remains unanswered.

Summarized with AI on January 18. AI used: gpt-5.
1

Thanks to some of the stuff I found, I was able to modify the search results to have a nice white background. I used the following in base.css

#predictive-search-results {
    background: #fff !important;
    color: #000 !important;
}
#predictive-search-results * {
    color: #000 !important;
}

UniTrend_0-1694928678216.png
UniTrend_0-1694928678216.png847×414 43.3 KB

What I cannot find is how to change the search box background color to white to make it contrast against the red header. I would also like the make the “Search” text bold inside the box.

I tried messing with the Search-modal CSS in base.css, but I couldn’t find the right container.

Any suggestions on the right combination?

2 Likes
2

Hey @Uni-Trend

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Hi @Uni-Trend

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

thogli

1 Like
5

Thank kyou for the information.

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
input#Search-In-Modal {
    background: white !important;
}
1 Like