How To Have A Search Bar Instead Of Search Icon In Shopify

Today i will show you how to have a search bar instead of search icon in Shopify and show the search bar on the header of your store.
Having a search bar prominently displayed on your Shopify store allows customers to quickly find what they are looking for whether they have a specific product in mind or are browsing for something specific a search bar enables them to enter keywords and get instant results this saves time and effort, making the shopping experience more convenient and efficient without having to look for the search icon and click on it.
Adding and showing a search bar instead of a search icon on your Shopify store is essential for several reasons, It enhances the user experience, saves time, and provides a sense of familiarity for customers and it also allows for better organization and filtering of products and making it easier for customers to find what they are looking for on your Shopify store.
Code to find on header.liquid : {% render 'header-search', input_id: 'Search-In-Modal' %}
Code : pastebin.com/p...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 9 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this KZbin channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#shopify #searchbar #searchicon

[@astrowave5702]

You can also paste the code into a new snippet and call it "full-search-bar" and use the render tag to display it in the header. Its easy and more organized. Very helpful video

[@lownermusic]

what is that render tag?

[@ShopRetroGrade]

thank you so much

[@astrowave5702]

@@lownermusic its {% render 'full-search-bar' %}

[@Jawad.Rizvi1985]

@OnHOWGuy yes absolutely right... based on the location....! French people can access their own language, Dutch can their own , Spanish can be like wise..... I know there is an app translation by Shopify, but that app does translations limited, not the complete page.

[@OnHOWGuy]

I see, I will research more about this as its not static edit or something because it will require using a third party API and never did that before on Shopify. I noted it and i'll see what i can do. Cheers

[@felipegacitua4451]

Thank you for the code! it works great. Do you know how to remove the old search Icon? Your one is on the right and looks great. But the old one is still on the left side. Thanks again

[@OnHOWGuy]

You're very welcome and glad i could help. My code removes the old icon and displays the search bar instead so not sure where you saw the old icon on the left in my store. Please let me know in new comment as its difficult or me to see replies now. Cheers

[@user-ec5di9ss3k]

hey buddy Thanks! really helpful video. Just an addon - how do I make the search bar smaller or larger in appearance based on aesthetics?

[@jackdilger7540]

Hi, thank you for the vid. This worked but I need to change the search bar colour. Do you know how?

[@ouchylon6612]

Bro you're a cool teacher! Love your energy and guidance! Thank you

[@BOYALONE011]

You deserve an award bro❤❤❤ thanks for everything

[@OnHOWGuy]

Thank you so much and i appreciate that and you're very welcome. Cheers

[@rukiruki9741]

Anas, god bless you for sharing your knowledge. You are truly a gift and blessing to many of us. :)

[@OnHOWGuy]

Thank you and god bless you too, Im really happy to see comments like yours and no worries a lot of videos on the way. Cheers

[@gnazario3]

Hey thank you so much for the code. Question, How do I change the color of the border? I want it to be a certain color when not clicked and to remain the same when in focus.

[@Melvin-s8n]

Perfekt video just what needed help with, now how to I customize with css 😅

[@KeijiGer]

Great Work thank you! Is there a possibility to hide the "old" search Icon - but only for desktop not mobile?

[@OnHOWGuy]

You're welcome, Not sure if understand the question correctly but what you saying is exactly what the code does in this video. It shows a search bar on desktop but on mobile it shows the old search icon because on mobile the search is taking too much space. Let me know if got this wrong, also please let me know in a comment as its difficult for me now to see replies. Cheers

[@hzq16]

He means that the old search Icon still shows after adding the search bar Pls let us know how to fix it

[@WilliamEnzo-u2n]

A new upgradeeee! thanks

[@OnHOWGuy]

Yes indeed haha and many more on the way. You're very welcome

[@WilliamEnzo-u2n]

@@OnHOWGuy thank you soon much you helped me a lot, I recently completed my store

[@morayofficialug]

Thanks Brother. your the best for real

[@OnHOWGuy]

I appreciate that and you're very welcome. Cheers

[@MabiniBookstore]

Thanks bro, it worked even in Trade Theme

[@OnHOWGuy]

You're very welcome and yes it will, i do test my codes on most of the free themes. Cheers

[@williamfedz6229]

Hello, how can we make the box wider and place it in the center of the header?

[@DonSeo-l2y]

is there a way to change the transparency of the search bar?

[@beham1016]

Hi there Anas, as always you are the best! Can you please show us how to make the product image on the product page full width on the mobile version and maybe make the thumbnail carousels for the product pictures smaller? this can be a great video NGL!

[@OnHOWGuy]

Hey, Thank you, i appreciate that. Absolutely, i noted your request and i will work on it but keep in mind that images on mobile is full width on most themes so which theme are you using ? Please let me know in new comment as its difficult or me to see replies now. Cheers

[@beham1016]

@@OnHOWGuy hey there thanks Anas for everything! I use dawn theme . I wanted it to be like the product page of the store acemend, one thing that they do best is that they also have narrowed carrousel thumbnails.

[@Legc26]

Great video!! thank you!

[@OnHOWGuy]

You're very welcome and glad you liked it! Cheers

[@Jawad.Rizvi1985]

Hi Anas you are amazing 👏

[@OnHOWGuy]

Thank you brother, i appreciate that. Cheers

[@Nav_channel]

Hi bro, I did change my search logo to visible bar, but it only worked when i open it in my pc so mean to say it does not work when i open it as moble view. Please let me know.

[@RoshSalaver]

Hey there! your code works but i still have the search icon. Im using the Sense Theme

[@vedvaze6782]

thank you so much for this code i just had one doubt as my code has transparent header the search bar is not transparent could you please make a video on how to make that transparent as well

[@OnHOWGuy]

You're very welcome, Well i actually did that on purpose because if it was transparent as well the search bar will not be visible properly, it will show just a thin black line as the search bar and visitors might not even notice it specially if you have a light color background but again the choice is yours and if you are interested let me know and i'll work on it. Please let me know in new comment as its difficult or me to see replies now. Cheers

[@Mr.Mwamoto]

Nice video, are you able to help me do the same on the impulse 5 theme, I cant t´find the render 'header-search'

[@Mr.Mwamoto]

I have found out that I have the Shopify Search & Discovery app, do I have to uninstall that?

[@Mr.Mwamoto]

I have some think that it calls, search-bar.liquid, can it be that area I have to wokr with? code is: {%- unless search_btn_style -%} {%- assign search_btn_style = 'btn' -%} {%- endunless -%} {{ 'general.search.submit' | t }} icon-search {{ 'general.search.submit' | t }}

[@OnHOWGuy]

Thanks, i apologise at first as im unable to help you with that because i dont have access to paid theme's code so i dont how the structure works over there. Let me know if i can help you with anything else. Cheers

[@Mr.Mwamoto]

@@OnHOWGuy Okay. Thank you. :)

[@juancarlosmartinez9845]

Hi Anas! I got a question: what if I wanted to make it SQUARE-LIKE? How could I tweak that? Thanks a lot for the info tho! Keep up the good work...

[@OnHOWGuy]

Hey, Yeah sure, on the third line of my code there is --inputs-radius: 20px and simply decrease the value if you want it less rounded. You're very welcome and glad i could help. Cheers

[@annagryfik7924]

Please help, did all step by step and unfortunately shows error in the line 😕 unknown tag '

[@bluesapphire4780]

assalmu alikum thank you anas

[@OnHOWGuy]

Alaykom Salam brother and you're very welcome

[@zesneakers]

if i dont see the render header in my code section what should i do? ill apprucuate if you wull answer me

[@TAPCN]

Hi Anas, me again :) I wonder if you have a video on how to change the search icon only. I just wanted to make it a bit bolder. I tried to mofify the stroke-width on the liquid, but doesn't work!

[@OnHOWGuy]

Hey, Yeah i do actually, i made that video like a year ago . Cheers

[@matejjindra5240]

Hey, perfect video

[@OnHOWGuy]

Thank you

[@Jawad.Rizvi1985]

Hi Anas, can you please make a video about the translation of any language of the complete page. By default, it is in English, but if the customer wants to translate in his own language, the complete with text, descriptions, everything should be translate. I have already requested you before in your last video. Your sincere student.❤

[@OnHOWGuy]

Hey, You mean translating the content based on the visitor's location ? please confirm because i could understand your request correctly. Also please let me know in a new comment as its difficult for me to see replies now. Cheers

[@Jawad.Rizvi1985]

@OnHOWGuy yes absolutely right... based on the location....! French people can access their own language, Dutch can their own , Spanish can be like wise..... I know there is an app translation by Shopify, but that app does translations limited, not the complete page.

[@OnlyCr-7fans]

Thankssss ❤❤❤❤❤

[@ShekharUnleased]

Much needed 😍😍😍😍😍

[@OnHOWGuy]

Glad to hear that

[@garrysingh8387]

Thanks

[@orderoutofchaos6897]

hi i have a question, how do i change the placeholder text, i was trying it myself and try changing the value " to the text i want" , in the placeholder attribute, but didnt work

[@slipseahq]

Make a video for updated trade theme "visible search bar"/ "Expanded Search Bar"

[@adarshdadwal2833]

how to align that search bar to the center?

[@OnHOWGuy]

And the menu to where ? Please let me know in new comment as its difficult or me to see replies now. Cheers

[@InRagingDesigns]

looks great but the old search icon is still showing on my store. have a fix?

[@AnimalMoments-bs6qs]

Hey OnHow, I'm trying to find a specific drop shipping store one of my competitors is running but I don't know what I could type into the search bar to do so. All I really have is that I know he made the website through shopify and I know how much revenue he made today. Could you help me out?

[@OnHOWGuy]

Thats a needle in a haystack, if you know his niche then you can try my trick on how to find shopify competitors using different keywords for products in that niche but even with this its difficult. Cheers

[@GEORGEOBINDIKEOKONKWO]

please i cant find the render 'header-search in my code , what do i do?

[@felipebascunantips]

it appears to cretae some conflict with other codes im am runnig ( custom liquid banners)

[@OnHOWGuy]

Its hard to tell without looking the code you have, does it have to do with header as well ? Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@ecomempire-n2g]

bro one video for circle collection

[@OnHOWGuy]

I got you, i noted it and i will work on it. just keep in mind a lot of videos have already been made and uploaded so it might take some time Cheers

[@tinhluk]

How can I reduce the search size box? After I copied and pasted your code it is too big in my header menu.

[@OnHOWGuy]

Hey, you can do that in the file component-search.css and the first line will be ".search__input.field__input" and decrease or increase the value 9.8rem; for your preferred design. Cheers

[@tinhluk]

@@OnHOWGuy Thank you my friend. I appreciated your offer. 😍

[@Movies-guru-t4i]

My search is changed with search bar. That's good. But, i also want search icon in the search bar. How i can get it?

[@matejjindra5240]

Can you please let me know how to move this beautiful search bar to left side of my store on the desktop ? 😀

[@OnHOWGuy]

It will require a custom a code to do that and i dont have it now so i noted your request and i will make a video about that titled with your question, keep in mind that you have the menu on the left and that can cause visibility issues. Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@leecollinson640]

mine only shows the bar and text search inside the bar, it doesn't show the search icon to the right of the box ? please advise

[@JonesInTheGame]

i have no header.liquid when i search for it ??

[@GEORGEOBINDIKEOKONKWO]

same here , please were you able to fix the problem

[@betzy7560]

THe search icon dissapeared how can i add it to your custom search bar?

[@praveenbalaji2279]

Search Icon bar is too big, Can you pls tell how to reduce the overall size of the search bar

[@Jae-gv2uu]

For me on the trade theme, it just came up with a whole lot of errors???

[@SameerZulfiqar-f5i]

I cannot find the render 'header code

[@OnHOWGuy]

Are you sure this still the case ? because if you cannot find that it means the theme you using doesn't have a search function and i dont know any theme that doesn't have that. Just make sure you are on the correct file and searching for the correct code. Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@SameerZulfiqar-f5i]

@@OnHOWGuy thanks, Can you please make a video on minifing HTML code because it is giving an error when I put the HTML code in a HTML minifier.

[@cocoabrowneyes]

I added the search bar, but my icon is still showing also. How do I hide it?

[@OnHOWGuy]

Thats strange, what theme/version are you using ? did you copy the full code ? because my code has a line to disable the original search icon from displaying on the header. Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@hzq16]

​@@OnHOWGuyit will work perfectly if the desktop logo position is set to middle left instead of middle center in the theme editor.

[@riz1659]

@@OnHOWGuy How about I would like to show the icon with the bar ? you said you had disable the original search icon however i want it to be visible.

[@hamzarana801]

brother your code links are not working

[@OnHOWGuy]

I just checked and its working fine, try with vpn. Cheers

[@Paramraj-b7q]

My header completely gone man😢

[@AkshayDesai-x7i]

Link not working anymore

[@RANBROSLLC]

i didnt saved my original code and it broke down

[@RANBROSLLC]

please help now the website is not opening up

[@OnHOWGuy]

Hey, on the code editor below the file name you'll see "Recent changes" and below it "current" with a down arrow, just click on it and you'll see the history for previous versions of the file for all the changes. If somehow that didn't work you can add another theme (same one) to your library below your main theme and access the code editor for it and then simply copy the code from that file (same file name) and paste it on your main theme file (same file name). Cheers

[@nikibeam.]

the old one is still there. its not going😭

[@Chicken_here_Gen_Z]

Actually if you doing this in your main store, first create a duplicate guys

[@OnHOWGuy]

Undoing the steps is easy for this video incase you dont want it anymore, And if it did break something for you it would be beneficial sharing the data as that can help me updating/fixing the code. Cheers

[@Chicken_here_Gen_Z]

@@OnHOWGuy OK bro thanks for the replr bro hats off you broo😀

[@TitansOfAvalon301]

I need help, i cant find {% render 'header-search', input_id: 'Search-In-Modal' %} in my header.liquad only other search stuff.. but i dunno how that work pls help

[@OnHOWGuy]

try just ( render 'header-search' ) or ( render 'search' ) instead, Also what theme are you using ? render 'header-search' Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@TitansOfAvalon301]

@@OnHOWGuy Hello, im using a premium theme, i;; try search these liquads