Change the color search background into white in results with new matching fonts Dawn theme 7.01

Store Design
, ,

Topic summary

A user seeks to customize the search results appearance in Shopify’s Dawn theme 7.01, specifically wanting to change the background to white and adjust font styling to better match their site’s black header design.

Initial Problem:

  • Search results have poor color contrast and small fonts
  • Current styling doesn’t match the site’s aesthetic

Solution Provided:
A contributor shares CSS code to be added to the base.css file:

  • Changes search background to white with black text
  • Increases font size to 1.5rem for better readability
  • Targets .predictive-search--header elements

Implementation:

  • Code should be pasted at the end of the base.css file via Admin → Online Store → Theme → Edit Code
  • Initial attempt didn’t work, requiring troubleshooting
  • After verification of proper code placement, the solution successfully resolved the styling issues

Outcome:
The issue was resolved. The user confirmed the customization works correctly and expressed satisfaction with the fast, helpful support received.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello

I want to change the search results into white background, i have the black header and i want to change the search color and the fonts aswell. Can we make something who match the site better than this?

See attached image: (The fonts is too small and the colors dont fit into what i want)

Hope we can figure something out, i will for sure thank you all and accept the solutions who works. :slightly_smiling_face:

Skjermbilde 2024-08-03 kl. 02.23.00.png
Skjermbilde 2024-08-03 kl. 02.23.00.png1090×1058 80.3 KB

My storeurl:

www.dekanten.no

2

Hi, you could following these steps
Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the base.css file
Step 3. Paste the code into the end of the file

.predictive-search.predictive-search--header {
  background: white!important;
  color: black!important;
}

.predictive-search--header .predictive-search__item-content,
.predictive-search--header .predictive-search__item-heading,
.predictive-search--header .predictive-search__item-vendor,
.predictive-search--header .price-item,
.predictive-search--header .predictive-search__item--term {
  color: black!important;
  font-size: 1.5rem
}

You will get result like this

BSSCommerceB2B_0-1722646160109.png
BSSCommerceB2B_0-1722646160109.png1537×904 79.8 KB

If it helps you, please like and mark it as the solution.

Best Regards

1 Like
3

Hi, thanks for the contribution but nothing changes here im afraid, do you have other ideas? I will be very gratefull, hope we can figure something out here? :slightly_smiling_face:

The look you got there is that i want, its looks flawless. :slightly_smiling_face:

1 Like
4

Could you please send me the image of your code?
Make sure you have placed the code in the right place

BSSCommerceB2B_1-1722650175945.png
BSSCommerceB2B_1-1722650175945.png1536×909 118 KB

BSSCommerceB2B_0-1722650171276.png
BSSCommerceB2B_0-1722650171276.png1870×933 61.9 KB

1 Like
5

Thank u and this is what im looking for, this works in theme section and not the base so everything looking just fine by this. :slightly_smiling_face:

6

I have set all the font sizes to be equal, but if you want smaller price please update this code

.predictive-search.predictive-search--header {
  background-color: white!important;
  color: black!important;
}

.predictive-search--header .predictive-search__item-content,
.predictive-search--header .predictive-search__item-heading,
.predictive-search--header .predictive-search__item-vendor,
.predictive-search--header .predictive-search__item--term {
  color: black!important;
  font-size: 1.5rem!important;
}
.predictive-search--header .price-item {
  color: black!important;
  font-size: 1.3rem!important;
}
1 Like
7

Thank u so much for all your patience and big help, this means a world too me and everytime i ask i got really fast and nice help. You are amazing, thank u for all that. :slightly_smiling_face: