How to make search icon a coloured search bar

Store Design
,

Topic summary

A user seeks to transform their store’s search icon into a prominent search bar with rounded corners and a green background (#657d67) on the Palo Alto theme.

Solutions Offered:

  • One responder provided CSS code to add to theme.liquid, including a visual example of the expected result
  • Another pointed to a related solution thread for the Refresh theme that may offer guidance
  • A third contributor shared CSS targeting mobile and desktop menu elements, with instructions to add the code to theme.css

Key Consideration:

One expert noted that fully converting the icon to a default-open search bar requires more extensive code modifications—including removing popdown positioning classes and addressing mobile behavior—suggesting professional customization services may be needed.

The discussion remains open, with multiple CSS approaches provided but no confirmation yet on which solution successfully meets the user’s requirements.

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

Hi all,

I was hoping to get some help in changing our search icon into a coloured search bar. At the moment it looks like this. I am hoping to turn it into a rounded cornered rectangle with a green background to make it stand out. Colour code: 657d67.

MollieHammond_0-1751519561923.png

We are using the Palo Alto theme

URL: https://www.coffee.prestigerepairs.com.au/

Thank you so much for any assistance.

2

Hi @MollieHammond

You can try to add below CSS at the bottom of theme.liquid and see if it is what you want.

It shall look like this below:

SEOAntJeffery_0-1751527758651.png
SEOAntJeffery_0-1751527758651.png1920×504 128 KB

3

Hi Mollie @MollieHammond The code in the solution reply should help you in conveniently changing the search icon to a search bar, have a look at it here https://community.shopify.com/c/shopify-design/change-search-icon-to-search-bar-in-refresh-theme/m-p/2543523

4

Hello @MollieHammond

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search theme.css

  • Insert the provided CSS code at the end of the file and save the changes.

.mobile-menu .search-popdown.mobile-menu__button 
{
    background: #657d67;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#NavStandard .menu__item summary.search-popdown__toggle.navlink 
{
    background: #657d67;
    border-radius: 20%;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

5

@MollieHammond that will require code edits to have it default to open and remove positioning classes, etc so it’s no longer a popdown.

Not to mention any mobile behavior.

If you need this customization then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.