ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- 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 TH-cam 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
![How To Change Cart Icon On Shopify [Easy 2025 Tutorial]](http://i.ytimg.com/vi/E_Ugq2hzXnM/mqdefault.jpg)
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! 👏👏👏👏
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.
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
what is that render tag?
thank you so much
@@lownermusic its {% render 'full-search-bar' %}
thats a much better search bar, appreciate man!.
Anas, god bless you for sharing your knowledge. You are truly a gift and blessing to many of us. :)
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
You deserve an award bro❤❤❤ thanks for everything
Thank you so much and i appreciate that and you're very welcome.
Cheers
Amazing, it helped me a lot, thanks brother Anas
Bro you're a cool teacher! Love your energy and guidance! Thank you
perfect this works great thanks a lot !
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?
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?
Thanks for the video. Can you show how to change the text inside the search bar? Also, I'm using the Impulse Theme and there is no code in the header.liquid area with 'modal' anywhere.
Perfekt video just what needed help with, now how to I customize with css 😅
@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.
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
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 ?
Can you do one for Showcase theme? Its default is clicking the search icon will darken the whole site then a search form will appear which kind of a hassle compared to a simple search bar.
Thanks bro, it worked even in Trade Theme
You're very welcome and yes it will, i do test my codes on most of the free themes.
Cheers
Thanks Brother. your the best for real
I appreciate that and you're very welcome.
Cheers
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
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
@@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
A new upgradeeee! thanks
Yes indeed haha and many more on the way.
You're very welcome
@@OnHOWGuy thank you soon much you helped me a lot, I recently completed my store
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.
Much needed 😍😍😍😍😍
Glad to hear that
hey buddy Thanks! really helpful video. Just an addon - how do I make the search bar smaller or larger in appearance based on aesthetics?
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
Hi, thank you for the vid. This worked but I need to change the search bar colour. Do you know how?
Hi Anas you are amazing 👏
Thank you brother, i appreciate that.
Cheers
Great video!! thank you!
You're very welcome and glad you liked it!
Cheers
Thankssss ❤❤❤❤❤
can you make a video about how to add 30 days return badge please?
Hey there! your code works but i still have the search icon. Im using the Sense Theme
Hey, perfect video
Thank you
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.❤
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
@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.
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
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
Hello, how can we make the box wider and place it in the center of the header?
is there a way to change the transparency of the search bar?
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.
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!
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
@@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.
Thanks
thanks, it is looking much nicer on the desktop, but on mobile phone it does not come up.
Great Work thank you!
Is there a possibility to hide the "old" search Icon - but only for desktop not mobile?
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
He means that the old search Icon still shows after adding the search bar
Pls let us know how to fix it
@@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?
if i dont see the render header in my code section what should i do? ill apprucuate if you wull answer me
Make a video for updated trade theme "visible search bar"/ "Expanded Search Bar"
When saving I get an erroer message that says: Liquid syntax error (line 157): Unknown tag ''
assalmu alikum thank you anas
Alaykom Salam brother and you're very welcome
It doesn't work when there are multiple announcement bars. could you help ?
Hi I have tried many times, why the magnifier icon disappear? but you can still click on it?
Nice video, are you able to help me do the same on the impulse 5 theme, I cant t´find the render 'header-search'
I have found out that I have the Shopify Search & Discovery app, do I have to uninstall that?
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 }}
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
@@OnHOWGuy Okay. Thank you. :)
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...
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
bro one video for circle collection
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
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?
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!
Hey, Yeah i do actually, i made that video like a year ago .
Cheers
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
Can you please let me know how to move this beautiful search bar to left side of my store on the desktop ?
😀
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
please i cant find the render 'header-search in my code , what do i do?
THe search icon dissapeared how can i add it to your custom search bar?
how to align that search bar to the center?
And the menu to where ?
Please let me know in new comment as its difficult or me to see replies now.
Cheers
Please help, did all step by step and unfortunately shows error in the line 😕 unknown tag '
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
looks great but the old search icon is still showing on my store. have a fix?
I have the same problem
hi search icon is not showing inside the bar can you help to solve it
yes, happen the same to me as well, someone please help
For me on the trade theme, it just came up with a whole lot of errors???
it works only on desktop
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?
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
Search Icon bar is too big, Can you pls tell how to reduce the overall size of the search bar
it appears to cretae some conflict with other codes im am runnig ( custom liquid banners)
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
i have no header.liquid when i search for it ??
same here , please were you able to fix the problem
How can I reduce the search size box? After I copied and pasted your code it is too big in my header menu.
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
@@OnHOWGuy Thank you my friend. I appreciated your offer. 😍
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
yes, I have the same situation, please help
I added the search bar, but my icon is still showing also. How do I hide it?
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
@@OnHOWGuyit will work perfectly if the desktop logo position is set to middle left instead of middle center in the theme editor.
@@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.
I cannot find the render 'header code
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
@@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.
the old one is still there. its not going😭
My header completely gone man😢
Actually if you doing this in your main store, first create a duplicate guys
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
@@OnHOWGuy OK bro thanks for the replr bro hats off you broo😀
brother your code links are not working
I just checked and its working fine, try with vpn.
Cheers
Link not working anymore
i didnt saved my original code and it broke down
please help now the website is not opening up
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
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
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
@@OnHOWGuy
Hello,
im using a premium theme, i;; try search these liquads