Change search bar and results colour

Store Design
,

Topic summary

A Shopify store owner encountered an issue where their search results page didn’t match their theme settings—specifically, the search bar and results displayed with incorrect colors (black background with white text instead of white background with black text).

Solutions Provided:

Multiple community members offered CSS fixes:

  • Option 1: Add custom CSS to the component-search.css file, defining color variables for background, foreground, buttons, and other elements
  • Option 2: Use the Theme Settings > Custom CSS section with a simpler override targeting .template-search__search * to force white backgrounds and black text
  • Option 3: Insert CSS directly before the </body> tag in the theme.liquid file

Resolution:

The issue was successfully resolved. The store owner confirmed all elements are now working correctly with the proper color scheme applied.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
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