How can I add a search bar to the top of my website? It has one but not a extended one like amazon

New Member
6 0 0

Want a pre extended bar so they dont have to click on search to extend it

using venture theme

fsdfsf.PNG

0 Likes
Shopify Expert
390 27 74

If clicking on the search icon replaces that area with a search box, then you can replace the icon with the search box.

 

The code for those will probably be in either theme.liquid, or maybe a snippet / section called header.liquid, search.liquid, etc.

 

Before experimenting, duplicate the theme and preview it on both mobile / desktop to make sure everything is working before publishing live.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
New Member
6 0 0

ive tried to copy online tutorials with people asking same question but code has been updated and changed. 

 

I got close to where it always stays open but its opposite, when i click to search it vanishes lol

 

Idk how to do it, i guess ill have to leave it off

0 Likes
Shopify Expert
390 27 74

Sounds like there's a javascript event listener on the element that toggles the show/hide when clicking, that should be removed. I'd guess it's either in a <script> in that same area as the search box code, or in your theme's javascript file (usually theme.js).

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes