Jump to content

Add Google's Programmable Search Engine to site header

Recommended Posts

Currently, I use Squarespace's default site search tool (see top left of webpage: www.bigbiology.org). However, recently it has been buggy, so I do not get consistent results. I use the Brine template.

So, I want to add a Google Programmable Search Engine. Previous posts have discussed how to add it within a code block on a single page, but is there a way to add it to the header? I want to replace the default Squarespace search bar with this Google one. 

Here is the code from Google: 

<script async src="https://cse.google.com/cse.js?cx=a7d8af8c580b74234">
</script>
<div class="gcse-search"></div>

Edited by Steve_BigBio
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

On 11/3/2022 at 10:19 PM, Steve_BigBio said:

Currently, I use Squarespace's default site search tool (see top left of webpage: www.bigbiology.org). However, recently it has been buggy, so I do not get consistent results. I use the Brine template.

So, I want to add a Google Programmable Search Engine. Previous posts have discussed how to add it within a code block on a single page, but is there a way to add it to the header? I want to replace the default Squarespace search bar with this Google one. 

Here is the code from Google: 

<script async src="https://cse.google.com/cse.js?cx=a7d8af8c580b74234">
</script>
<div class="gcse-search"></div>

Have you figured it out? Do you still need help?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/7/2022 at 8:12 PM, Steve_BigBio said:

I have not figured it out. Any assistance would be great!

You can add code to Code Injection or Site Footer (Code Block), then we will give code to move it to Header

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/10/2022 at 10:32 PM, Steve_BigBio said:

I added the code to the Code Injection, but I'm not sure what additional code I need to add to place the search box in the top left corner of the header.

What is your site url? We can check code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/13/2022 at 2:57 AM, tuanphan said:

What is your site url? We can check code easier

Hello! it is www.bigbiology.org.

I removed the code from the code injection section because I was worried it would have unintentional consequences. Should I add it back in to aid you when check things?

Thanks for the help, I really appreciate it

Link to comment
On 11/15/2022 at 9:10 PM, Steve_BigBio said:

Hello! it is www.bigbiology.org.

I removed the code from the code injection section because I was worried it would have unintentional consequences. Should I add it back in to aid you when check things?

Thanks for the help, I really appreciate it

You can duplicate the site & add it there, If we can provide the code, then you can do it on main site. What do you think?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.