Google Search Configuration - Sample Site

Add Google Programmable Search for site search

Content Type Details

Add a Heading
Add the Code, get this from the Google Programmable Search Engine admin panel under Look and feel > Layout
Ensure to add the queryparametername="q" attribute, this is required for the search bar in the header to work with the results page
e.g.
<script async src="https://cse.google.com/cse.js?cx=97966d58040704e93"></script>
<div class="gcse-search" queryparametername="q"></div>
Add any required Custom CSS, this is output in the <head> section in <style> tags. Note that the search will pick up styles from the main CSS file which may cause display issues with the default Google CSS. Prefix your CSS selectors with body to ensure the CSS added is picked up, e.g.,
body .gsc-control-cse {
padding: 0;
}

Name	Description	Size	Type	Required	Conditionally Shown
Name	The Name element	80 Characters	Plain Text	Yes	No
Heading	Add a Heading	100 Characters	Plain Text	Yes	No
Code	Add the code for the Search Results page	10000 Characters	Plain Text	Yes	No
Custom CSS	Add custom CSS code, this is output in the <head> in <style> tags	10000 Characters	Plain Text	No	No

How to use:

Add a Heading
Add the Code, get this from the Google Programmable Search Engine admin panel under Look and feel > Layout
Ensure to add the queryparametername="q" attribute, this is required for the search bar in the header to work with the results page
e.g.
<script async src="https://cse.google.com/cse.js?cx=97966d58040704e93"></script>
<div class="gcse-search" queryparametername="q"></div>
Add any required Custom CSS, this is output in the <head> section in <style> tags. Note that the search will pick up styles from the main CSS file which may cause display issues with the default Google CSS. Prefix your CSS selectors with body to ensure the CSS added is picked up, e.g.,
body .gsc-control-cse {
padding: 0;
}