Make spyglass icon in search bar link to a different website?

Hi everyone, weird question here, but is it possible to force the spyglass icon in the main navigation to link to a different website entirely? I work for a nonprofit that uses a Squarespace-based site for most of our content: https://www.strongtowns.org/ However, there is an auxiliary website we want to direct users to when they click the spyglass icon: https://actionlab.strongtowns.org/hc/en-us Is there a way to accomplish this (with code or otherwise)?

I'd also love for the actual /search URL on our site to redirect to https://actionlab.strongtowns.org/hc/en-us. Right now, I have a code on the /search page that disables the search function, so it just appears as a blank page--which isn't ideal.

Any advice would be greatly appreciated. Thank you!

You mean

Click Search icon >> redirect to actionlab.strongtowns.org/hc/en-us?

The site uses Personal or Business or Commerce Plan?

Yes, precisely: we want that icon to link to actionlab.strongtowns.org/hc/en-us

We're using the basic commerce plan (and we're on 7.0)

On 12/22/2022 at 11:38 PM, ShinaShayesteh said:

Yes, precisely: we want that icon to link to actionlab.strongtowns.org/hc/en-us

We're using the basic commerce plan (and we're on 7.0)

Hi,

Can you enable search icon? I don't see it now

we can use script code to force search icon open a custom url

Yes, sorry about that; we had disabled the icon temporarily over the holiday weekend. It should be visible now!

On 12/27/2022 at 10:38 PM, ShinaShayesteh said:

Yes, sorry about that; we had disabled the icon temporarily over the holiday weekend. It should be visible now!

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$(".tweak-header-search-style-icon-only .Header-search").click(function() {
			var link = $(this).text(),
				href = "https://actionlab.strongtowns.org/hc/en-us";
			window.location.href=href;
		});
});
</script>

It doesn't seem to be working, unfortunately? It still goes to the /search page, which we've disabled.

Update! I've gotten it to sort of work by making these changes to the code:

<script>
$(document).ready(function() { 
		$(".tweak-header-search-style-icon-only .Header-search").click(function() {
         window.open("https://actionlab.strongtowns.org/hc/en-us", "_blank");
		});
});
</script>

The spyglass does open the "Action Lab" website now, but in a new tab... Meanwhile, on the old tab, the user gets directed to a blank page (our old search page, now deactivated). Any ideas on how I can get the link to open in the same tab, instead of opening a new one?

Try changing "_blank" to "_self".

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Let us know how it goes.

Tried it, and it didn't work, unfortunately! It wouldn't open the new link at all when it was "_self", so I changed it back to "_blank".

That worked perfectly, thank you so much!!!