How can I change the small search icon into a full size search bar?

Store Design
, , ,
1

Hi Everyone!

Can someone please help me figure out how to change my search icon on my website to a large search bar that goes across the top of my menus or next to them on desktop and right below my logo on mobile that is the width of the phone screen?

I’m on the venture theme: www.axladvanced.com

Thank you!

2

Hi! Yes, it’s totally possible to replace the search icon with a full search bar across the menu on desktop, and have it show below the logo and full-width on mobile. Since you’re using the Venture theme, here’s the general idea of what to do:

  • Go to: online store, theme, actions, edit code

  • In the header.liquid file:
    Find the block that handles the search icon.

  • Replace or expand it with a full search bar that includes:

    • An element

    • Proper responsive classes for desktop/mobile

  • You’ll also need to adjust theme CSS in:

    • theme.scss.liquid or theme.css
    • Add styling to make the search bar span full-width on mobile and align horizontally on desktop.