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
@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
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.
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
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
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
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
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
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.
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.
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!
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
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 }}
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
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
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
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
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
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
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
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
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
![[LIVE] : ONE ลุมพินี 86 | คู่เอก "คมเพชร vs ชาติพยัคฆ์"](http://i.ytimg.com/vi/m3q_dRYDuU8/mqdefault.jpg)
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
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
Bro you're a cool teacher! Love your energy and guidance! Thank you
You deserve an award bro❤❤❤ thanks for everything
Thank you so much and i appreciate that and you're very welcome.
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.
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
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.
Perfekt video just what needed help with, now how to I customize with css 😅
is there a way to change the transparency of the search bar?
Thanks Brother. your the best for real
I appreciate that and you're very welcome.
Cheers
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
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
if i dont see the render header in my code section what should i do? ill apprucuate if you wull answer me
looks great but the old search icon is still showing on my store. have a fix?
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
Great video!! thank you!
You're very welcome and glad you liked it!
Cheers
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
Hey there! your code works but i still have the search icon. Im using the Sense Theme
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
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
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
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.
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?
Thanks
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.
Hi Anas you are amazing 👏
Thank you brother, i appreciate that.
Cheers
Hey, perfect video
Thank you
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
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
Much needed 😍😍😍😍😍
Glad to hear that
Thankssss ❤❤❤❤❤
please i cant find the render 'header-search in my code , what do i do?
Search Icon bar is too big, Can you pls tell how to reduce the overall size of the 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
For me on the trade theme, it just came up with a whole lot of errors???
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
i have no header.liquid when i search for it ??
same here , please were you able to fix the problem
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. :)
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
assalmu alikum thank you anas
Alaykom Salam brother and you're very welcome
Make a video for updated trade theme "visible search bar"/ "Expanded 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
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. 😍
Link not working anymore
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
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.
brother your code links are not working
I just checked and its working fine, try with vpn.
Cheers
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.
the old one is still there. its not going😭
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
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😀
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