Change search icon to search bar in Palo Alto Theme

Topic summary

Goal: Replace the header’s search magnifying-glass icon with a typeable search bar in the Palo Alto theme (site: appliancegroup.com.au).

Actions taken: A responder provided code (not visible in the thread). The code worked on desktop (PC) but removed the search from mobile view.

Follow-ups: The helper asserted the code should work on both desktop and mobile, and requested store access to duplicate the theme and troubleshoot. The store owner asked if they could keep a search bar on desktop and the magnifying icon on mobile (responsive behavior).

Current status: No published, step-by-step fix in-thread. The helper stated the desktop-bar/mobile-icon setup is possible only through custom coding and would take time, inviting direct contact. The discussion remains open with no confirmed solution posted.

Notes: The exact code is central but not included in the messages, limiting reproducibility or independent testing.

Summarized with AI on December 18. AI used: gpt-5.

Hi all,

Hope everyone’s had a great start to the week.

I’m building our new website in the Palo Alto theme and was wondering how to change the search magnifying glass icon into a search bar that you can type in?

Theme: Palo Alto

Website Url: https://www.appliancegroup.com.au/

Any help would be greatly appreciated.

Thank you!

Hi @MollieHammond


Replace your search icon code with this code.

Hey,

unfortunately that removes the search from view in mobile view entirely.

The code worked for the PC though! Half way there haha.

Hi @MollieHammond

This code is for both desktop and mobile, if you can give us access to the store then we can try by duplicating your theme.

Hey,

do you know if here’s a way to make the search bar on PC, and the magnifying icon on mobile?

Hi @MollieHammond

Sorry this can only be done through coding and as I can see it will take some time.please feel free to contact us.