I need an elongated search bar in my store.
My store currently looks like this:
Whereas I want a search bar that looks like this:
Can someone please guide me as to how may I do this.?
Best Regards
Hi, @Khan01 .
Thank you for your message, I would be happy to offer you some suggestions for this idea. My first question would be what theme are you using for your shop, are you using a Shopify theme or a third-party theme? If you are using a third-party theme, I would suggest reaching out to your theme developer to look into this possibility. If you are using a Shopify theme, this may be possible, depending on the theme you are using and the value this potential customization would bring to your shop. So if you are using a Shopify theme and can elaborate as to why you would prefer the elongated search bar and how it would bring value to your shop rather than the default search icon, feel free to reach back out here and I would be happy to investigate this idea further with you!
Hello @Marty_1 ,
I am using a shopify theme (Debut).
I need an elongated search bar because my store has a huge list of products and I need a pretty visible search bar where a customer can quickly search for the products that may want to buy.
Hello @Marty ,
I am using a shopify theme (Debut).
I need an elongated search bar because my store has a huge list of products and I need a pretty visible search bar where a customer can quickly search for the products that may want to buy.
Hi, @Khan01 .
Thanks for getting back to me with this information, I can certainly see your thoughts here from a design perspective. The debut theme does sort of already have this feature, however, your customers would need to click the search icon first to bring up the “elongated” search option:
Which would then showcase a list of all applicable products when searching keywords:
If you are still hoping to simply have the elongated search option instead, I can understand where your thinking is at there. However, this would not be a customization our themes team could help you out with directly. Perhaps one of our friendly community members could offer you some coding suggestions if you are comfortable with coding, or you could look into third-party applications that could potentially help you achieve this.
For example, if you want a more advanced search functionality than what the search bar offers natively, you could check out an app like Live Search & Smart Filters. If you are not able to achieve what you are hoping for with this app or any community assistance, your next step would be to reach out to a local developer or Shopify Expert for this possibility.
I hope this points you in the right direction, feel free to reach back out here with any questions!
I am comfortable with coding and I would really welcome if someone can guide me on how do I go about it.
Hello @Marty_1 ,
How may I get someone to help me with the code.?
Hi, @Khan01 .
Good to hear from you. You could wait to see if a community member responds to your post here with some suggestions, I do see you posted a new topic as well, so that may get some traction. Alternatively, you could always reach out to a Shopify Expert to look into the possibility of your customization.
try this code:
Copy the HTML code below and paste it to the theme.liquid template: