Search Bar Background Colour Issue

Store Design
, ,

Topic summary

A user encountered an issue where their store’s search bar displays with an unwanted purple background color instead of white. After initially posting a screenshot of the problem, they provided their password-protected store URL (id0et1-1k.myshopify.com) for troubleshooting.

Solutions Provided:

Two community members offered CSS-based fixes:

  • CodingFifty suggested adding custom CSS to set the background to white using background: white !important;
  • LizHoang recommended using background: transparent !important; instead

Both solutions involve:

  1. Navigating to Online Store → Theme → Edit Code
  2. Locating the base.css file (or similar stylesheet)
  3. Adding the provided CSS code targeting .search__input.field__input at the end of the file

LizHoang included a screenshot showing the expected result. The discussion appears resolved with actionable solutions, though the original poster hasn’t confirmed which approach they implemented.

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

Screenshot 2025-01-25 at 6.56.44 PM.png
Screenshot 2025-01-25 at 6.56.44 PM.png1726×234 61.6 KB

Hi all, was hoping I could get some assistance regarding this search bar. For some reason, it’s a purple colour and I’d like it to be white. I’ve looked into the default themes and pretty much everywhere in the theme editor to fix this problem, but I can’t seem to find it. Was hoping some of you guys would know. Thanks for the help :slightly_smiling_face:

1 Like
2

Hi @cynoapparel

Please share the url of your store so I can check it

Best,

Daisy

3

Hello @cynoapparel

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

4

HI @cynoapparel ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

5

Sorry about that, store URL is https://id0et1-1k.myshopify.com/ and the password is: ildeth

6

Store URL is https://id0et1-1k.myshopify.com/ and the password is: ildeth

7

URL is https://id0et1-1k.myshopify.com/ and the password is: ildeth

8

Hi @cynoapparel ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.search__input.field__input {
    background: white !important;
}

CodingFifty_0-1737879603167.png
CodingFifty_0-1737879603167.png433×281 27.6 KB

9

Hi Cynoapparel

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.search__input.field__input {
    background: transparent !important;
}

Result:

LizHoang_0-1737912421790.png
LizHoang_0-1737912421790.png540×186 12.1 KB

Best,
Liz