Change search icon to search bar in Palo Alto Theme

[MollieHammond]

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!

[nidhidhiman004]

  Hi @MollieHammond 

<form action="/search" method="get" role="search" class="search-bar">
    <input type="search" name="q" placeholder="Search for products" aria-label="Search">
    <button type="submit">Search</button>
</form>

 Replace your search icon code with this code.

[MollieHammond]

Hey, 

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

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

[nidhidhiman004]

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.

[MollieHammond]

Hey, 

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

[nidhidhiman004]

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.