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

[@PeterVantine]

Awesome! I'm a newbie at Shopify and everything else I found about adding a search bar was either too confusing or too complex. This worked like a charm! I will definitely check out more of your videos. Thank you and keep up the great work! 👏👏👏👏

[@nicholas4581]

thats a much better search bar, appreciate man!.

[@ProgressiveCalisthenics]

I just want to say ive used so many bits of code from your videos and they work amazing so please carry on what your doing.

[@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' %}

[@4WDIndustriesRutherford]

Works perfectly. Wanting to know how to move the search box to left side as the logo & menu are set to middle? Would this also have an effect on the mobile menu which displays on the left currently?

[@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

[@הלללהב]

First of all, I wanted to say thank you - I've used a lot of your codes and it's simply life-changing. Now, can you explain to me how to replace the search icon with a different search icon?

[@Shanksinho]

Amazing, it helped me a lot, thanks brother Anas

[@HollyH-x2s]

Thank you for this and your other videos, saving lives ;) I want the search bar to stay at the top on my mobile site, which I've managed to do, but the main menu navigation bar has disappeared , assuming behind the search bar. Please can you explain how to move the navigation bar down the page on mobile only ?

[@ouchylon6612]

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

[@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

[@allenh2972]

@@OnHOWGuy hi I have the same, the old search icon still show in the left, and your new search bar does not show the magnifier icon, but you can click on it? please help

[@BOYALONE011]

You deserve an award bro❤❤❤ thanks for everything

[@OnHOWGuy]

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

[@TheDigitalActivator]

Hi Anas, thanks so much for such meaningful content. I was able to put the search bar on my windows PC just as you taught but it's not showing as a search bar on mobile. In mobile form, it's still showing as search icon instead. Can you kindly show me how to make it show as a search bar in the mobile version too

[@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

[@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.

[@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?

[@GamingWithJollyRoger]

perfect this works great thanks a lot !

[@jackdilger7540]

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

[@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.

[@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

[@allenh2972]

@@hzq16 I have the same as well, and worse, the new search bar does not have a magnifier icon in it, does anyone know why?

[@DonSeo-l2y]

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

[@allenh2972]

Hi I have tried many times, why the magnifier icon disappear? but you can still click on it?

[@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

[@morayofficialug]

Thanks Brother. your the best for real

[@OnHOWGuy]

I appreciate that and you're very welcome. Cheers

[@boris-nathanrwe9878]

can you make a video about how to add 30 days return badge please?

[@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.

[@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

[@williamfedz6229]

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

[@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

[@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

[@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.

[@Melvin-s8n]

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

[@RoshSalaver]

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

[@ShekharUnleased]

Much needed 😍😍😍😍😍

[@OnHOWGuy]

Glad to hear that

[@Legc26]

Great video!! thank you!

[@OnHOWGuy]

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

[@zesneakers]

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

[@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

[@Jawad.Rizvi1985]

Hi Anas you are amazing 👏

[@OnHOWGuy]

Thank you brother, i appreciate that. Cheers

[@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

[@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

[@annagryfik7924]

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

[@hulasi495]

while searching for the code in header liquid with CTRL+F, click next, you probably replaced the 1st one, it's the 3rd or 4th one, I made same mistake

[@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. :)

[@KavinMN]

hi search icon is not showing inside the bar can you help to solve it

[@allenh2972]

yes, happen the same to me as well, someone please help

[@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?

[@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???

[@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

[@matejjindra5240]

Hey, perfect video

[@OnHOWGuy]

Thank you

[@InRagingDesigns]

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

[@allenh2972]

I have the same problem

[@garrysingh8387]

Thanks

[@OnlyCr-7fans]

Thankssss ❤❤❤❤❤

[@GEORGEOBINDIKEOKONKWO]

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

[@slipseahq]

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

[@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. 😍

[@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

[@allenh2972]

yes, I have the same situation, please help

[@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

[@JonesInTheGame]

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

[@GEORGEOBINDIKEOKONKWO]

same here , please were you able to fix the problem

[@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

[@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

[@bluesapphire4780]

assalmu alikum thank you anas

[@OnHOWGuy]

Alaykom Salam brother and you're very welcome

[@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.

[@AkshayDesai-x7i]

Link not working anymore

[@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.

[@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😢

[@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😭

[@Vanakam_2008]

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

[@Vanakam_2008]

@@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