Can we all just call it like it is: Will Myers is superb. Not only does he give you the code you need in a succinct manner, but he goes above and beyond to teach you about the code as well. Thank you very much, Mr. Myers.
This was soooooo helpful, thank you! I am designing my nonprofit site myself after being overcharged by developers who didn’t deliver a completed site. 😢This empowered me, gave me exactly what i was looking for, and my website will be complete in a few days ❤
Is there a way to make the best of both videos where it doesnʻt navigate you to a search page but rather you can search in a box when you click on the icon like adding a search block on your page?
OMG thanks soooo much love your content quick, simple and easy to understand.. I was able to do this in 5 mins on my online store website and had already spent sooooo long trying to figure out how to do it! glad watched ur video Thx again
This is incredibly helpful, thank you for sharing!! And thanks for explaining how it works for us people who know nothing about coding but are maybe wanting to 🤩
Thank you so much for this video - tremendously helpful! My "Magnifier" icon has appeared on the far left on the Desktop version, next to my social links - is there any way of moving it to the right a bit or positioning it to the right of my social icons?
Hey Matthew, you'll want to adjust where the Social Icon is being injected. At the moment its being added to the beginning of '.header-actions'. You can adjust this on line 19 of the JS.
Thanks so much Will this is a great help! I've got a seperate Squarespace question please. I'm selling artwork prints online and offering them to be sold in frames also, however I don't wish to offer shipping of the frames internationally only the actual prints internationally. I haven't yet figured out a way to do this within Squarespace and was wondering if you could help please. Ideally it would be something like once the customer enters their shipping details into the checkout and if it is an international country of origin a pop up or something of the like might occur with a message that could be customised stating that product isn't available for international shipping. As that version of the product can't be shipped. Many thanks in advance.
thank you so much for uploading these kind of tutorial. its really helpful. however i got one small problem, how can i change the placeholder text for this one? it will be great if you can spare some time to answer this :) have a nice day!
thank you so much! may I know how can i add a hover effect on the search icon? i added :hover, but ended up the mouse cursor need to touch the stroke and the len and handle is hover seperately, please help.
Hi Will. This was so helpful!! I followed the instructions but for some reason the search icon is only showing up in the desktop view and not the mobile view. Do you have suggestions? Thanks so much!
@@nanettesnow3499 , I've fixed this now. This wasn't working on mobile if you didn't have social links toggled on. I just updated on the code on my tutorial page to work around this and should be good now.
Thank you so much for the help😊 Is there any way i can make it so the search bar can be used on the home page rather than having to jump to another page?
Amazing video!! Helped me a lot.❤Still one question left. How can I reorder the cart, log in and search icon in the same order like it is shown in your video?
Hey Will, excellent tutorial, thank you! Any idea on why the size and colour of the icon don't change on my site when I edit the custom CSS? All icons on my site are white, but when I leave it as 'Currentcolor', the icon stays black. I changed the code to 'white', and the icon in the header still stays black?
Hello Will, my search icon has randomly disappeared from the mobile version. It is still on the desktop still tho. I am desperate not sure what to do?? I still have the same code(your html) on my code injection in the footer section. Any help is greatly appreciated.
@@abi-at-WillMyersSupport Hi Will. Thanks! I have the same problem for the mobile version. I can not find the possibility to enable the icon in the navigation bar. do you have a new solution? that would be awesome. thanks a lot.
Hi! Thank you so much for this video! Is there a way to change the place of the icon? For example in the footer, instead of the menu nav. ;-) Thank you for your help!
Does anyone know what this search bar is searching? The search is not very strong. For example, when I search "Episode 20" it pulls it up, but if I search "20" nothing comes up. I would love for the search to be a little more intuitive? In doing some googling I can't seem to find anything to improve search functionality.
Hi is there any way to move the search icon along the header? my icon is placed on the left side alongside social media icons, I would like it over on the right side.
Hey! Yes this is achievable, if you replace '.header-actions' with '.header-actions-action--social' and 'beforebegin' with 'beforeend' this should work! You may want to leave the mobile code as is if you are happy with the placement.
You can check out Squarespace's documentation on this here - support.squarespace.com/hc/en-us/articles/217594457-Adding-search-to-your-site?platform=v6&websiteId=5dec0d775605ee7848f9f1e6#toc-indexed-content
Hey, sorry for the delay in our reply, we've been having a bit of trouble with TH-cam comments! If you're still having trouble with this feel free to reach out via our Support page on our website and we can take a closer look.
Can we all just call it like it is: Will Myers is superb. Not only does he give you the code you need in a succinct manner, but he goes above and beyond to teach you about the code as well. Thank you very much, Mr. Myers.
These tutorials are great. A very specific question I had just got a very specific answer. Thank you so much, Will!
This was soooooo helpful, thank you! I am designing my nonprofit site myself after being overcharged by developers who didn’t deliver a completed site. 😢This empowered me, gave me exactly what i was looking for, and my website will be complete in a few days ❤
So glad this was of use to you! Sorry to hear you got let down by your developers!
This was so helpful. I love this much better than moving my footer to the head and making it a search bar. Thank you thank you thank you
Is there a way to make the best of both videos where it doesnʻt navigate you to a search page but rather you can search in a box when you click on the icon like adding a search block on your page?
Thank you! I have a blog and I really needed a search bar!
Awesome! Thank you for sharing your code with us!
Great content Will - nice and clearly explained and made so easy with the code on your site - well done! Subscribed.
We're really glad you find it useful!
Great tutorial and code, thanks Will
Thanks so much! This worked so quickly and easily. Incredibly helpful.
OMG thanks soooo much love your content quick, simple and easy to understand.. I was able to do this in 5 mins on my online store website and had already spent sooooo long trying to figure out how to do it! glad watched ur video Thx again
Hey Maria, so glad this was helpful!
Thank you. Your tutorials help me a lot🚀
This is incredibly helpful, thank you for sharing!! And thanks for explaining how it works for us people who know nothing about coding but are maybe wanting to 🤩
Thanks for this tutorial! Just wondering can you move search icon to be beside the cart instead of on the menu for mobile? Thanks ☺
Hey, line 27 of the Javascript depicts where this will be positioned on Mobile, you can adjust to your liking!
Thanks a ton. Real simple, really well explained, great work and help. Subscribed :)
Thank you so much for this video - tremendously helpful! My "Magnifier" icon has appeared on the far left on the Desktop version, next to my social links - is there any way of moving it to the right a bit or positioning it to the right of my social icons?
Hey Matthew, you'll want to adjust where the Social Icon is being injected. At the moment its being added to the beginning of '.header-actions'. You can adjust this on line 19 of the JS.
Thank you! great tutorial :)
Thanks so much Will this is a great help! I've got a seperate Squarespace question please. I'm selling artwork prints online and offering them to be sold in frames also, however I don't wish to offer shipping of the frames internationally only the actual prints internationally. I haven't yet figured out a way to do this within Squarespace and was wondering if you could help please. Ideally it would be something like once the customer enters their shipping details into the checkout and if it is an international country of origin a pop up or something of the like might occur with a message that could be customised stating that product isn't available for international shipping. As that version of the product can't be shipped. Many thanks in advance.
Hey, thanks for reaching out! This is a very interesting use case but unfortunately isn't something we have code for.
Love this video and code. Any way to disable the search on mobile?
Hey Jason, try adding 'display: none' under the Mobile Search Icon section of the CSS
Great job on the tutorial
Thank you so much Will Myers.
thank you so much for uploading these kind of tutorial. its really helpful. however i got one small problem, how can i change the placeholder text for this one? it will be great if you can spare some time to answer this :) have a nice day!
Hey, what text is it you're looking to replace?
thank you so much! may I know how can i add a hover effect on the search icon? i added :hover, but ended up the mouse cursor need to touch the stroke and the len and handle is hover seperately, please help.
Hey, unfortunately we can't troubleshoot in the comments, feel free to reach out via our Support page on our site.
thanks
Hi Will. This was so helpful!! I followed the instructions but for some reason the search icon is only showing up in the desktop view and not the mobile view. Do you have suggestions? Thanks so much!
this happened for me too- any chance you got it sorted?
@ unfortunately not :/
@@nanettesnow3499 , I've fixed this now. This wasn't working on mobile if you didn't have social links toggled on. I just updated on the code on my tutorial page to work around this and should be good now.
@@ameetriscaripinterestwhisp8309 see my response above, should be fixed now.
@@will-myers It worked-thank you so much!!! I really appreciate it!!
THANK YOU! How do I get it to be on the left side of the navigation though vs the right?
Hey, you'd need to adjust the positioning on lines 18 & 20 of the Javascript.
Thanks Will! :-)
Thank you so much for the help😊 Is there any way i can make it so the search bar can be used on the home page rather than having to jump to another page?
Hey, this tutorial only adds the Search Icon to the header, it doesn't have any effect on the search function.
Thanks for the video! I have added the code to my website. Now, Is there a way to find what people are searching for in my website, the search terms?
Hey, yep there sure is! If you go to Analytics > Engagement > Site Search Keywords
@@abi-at-WillMyersSupport Thank you. I also would like to know how to reduce size of the search bar in desktop view. Its too big!
Amazing video!! Helped me a lot.❤Still one question left. How can I reorder the cart, log in and search icon in the same order like it is shown in your video?
Hey, I believe this is just the standard order in Squarespace 7.1. Do you have something else?
Hey Will, excellent tutorial, thank you! Any idea on why the size and colour of the icon don't change on my site when I edit the custom CSS? All icons on my site are white, but when I leave it as 'Currentcolor', the icon stays black. I changed the code to 'white', and the icon in the header still stays black?
Hey, in order to troubleshoot we'd need to see the site. If you could reach out via our Support Page on our website we can take a look.
Hello Will, my search icon has randomly disappeared from the mobile version. It is still on the desktop still tho. I am desperate not sure what to do?? I still have the same code(your html) on my code injection in the footer section. Any help is greatly appreciated.
Hey, Squarespace have recently made some changes. Social Icons will now need to be enabled in the Navigation Bar for this icon to display on mobile.
@@abi-at-WillMyersSupport Hi Will. Thanks! I have the same problem for the mobile version. I can not find the possibility to enable the icon in the navigation bar. do you have a new solution? that would be awesome. thanks a lot.
Is there a way I can make the search icon work on the homepage as an overlay once pressed instead of redirecting to the search page?
Hey, we have a code snippet as part of our membership on our website that achieves this.
@@abi-at-WillMyersSupport could you link me to it
legend!!!
Hi! Thank you so much for this video! Is there a way to change the place of the icon? For example in the footer, instead of the menu nav. ;-) Thank you for your help!
Hey Audrey, this tutorial is just to place it in the header, I'll make a note of this request and we may be able to add this as an option.
THANKS!
Does anyone know what this search bar is searching? The search is not very strong. For example, when I search "Episode 20" it pulls it up, but if I search "20" nothing comes up. I would love for the search to be a little more intuitive? In doing some googling I can't seem to find anything to improve search functionality.
Unfortunately Squarespace's search function isn't the best, hopefully they'll improve it soon!
Hi is there any way to move the search icon along the header? my icon is placed on the left side alongside social media icons, I would like it over on the right side.
Hey! Yes this is achievable, if you replace '.header-actions' with '.header-actions-action--social' and 'beforebegin' with 'beforeend' this should work! You may want to leave the mobile code as is if you are happy with the placement.
@@abi-at-WillMyersSupport Hi thank you for the response. I have implemented those changes and the search icon is still showing on the left side.
What can you search?
You can check out Squarespace's documentation on this here - support.squarespace.com/hc/en-us/articles/217594457-Adding-search-to-your-site?platform=v6&websiteId=5dec0d775605ee7848f9f1e6#toc-indexed-content
HELP it's not showing any search results
Hey, our code doesn't adjust the search functionality, but we can take a look if you reach out via the Support Page on our website.
Does not work on my account ):
Hey, sorry for the delay in our reply, we've been having a bit of trouble with TH-cam comments! If you're still having trouble with this feel free to reach out via our Support page on our website and we can take a closer look.