How to insert the search box to a Jekyll site using Google Custom Search Engine in Shopify
Drive 20-40% of your revenue with Avada
If you are looking for the best solution to add search to a Jekyll site, then we would like to recommend Google Custom Search Engine. It would be very easy to get started with this engine. However, please keep reading our instructional writing on How to insert the search box to a Jekyll site using Google Custom Search Engine to know more deeply about this topic.
How to insert the search box to a Jekyll site using Google Custom Search Engine
What is Google Custom Search Engine?
With Google Custom Search, you are enabled to create a search engine for your blog, website, or even a colelction of websites. More into details, Google Custom Search allows you to include a search engine right on your website to help your viewers easily find the information that they are looking for. Because Custom Search is grounded in Google’s core search technology, you are able to be confident that your users are receiving high quality and relevant results. Also, you are capable of customizing a lot of your search engine, including:
- Apply your site’s look and feel to the search box and results page
- Use search features like refinements, promotions, and autocomplete to enhance your users’ search experience
- Understand your users’ behavior by linking your search engine with Google Analytics
- Make money from your search engine with Google AdSense
There are 2 main use cases for Custom Search, you are able to create a search engine which only searches the contents of 1 website, or you are allowed to create one that focuses on a specific topic from various sites.
Instructions
Register on Google Custom Search Engine
-
Step 1: From the Google Custom Search homepage, click Create a custom search engine or New search engine.
-
Step 2: Type one or more sites you want to include in the search results in the Sites to search box. You are allowed to include any sites on the web, even sites you don’t own. Don’t worry, you can always add more later.
-
Step 3: Enter a name in the Name of the search engine field to identify your search engine
-
Step 4: Click Create.
You may need to provide a domain and title to create a new “search engine”.
Click “Get the Code” and copy the source into an include _includes/google-search.html. Your cx may be different but otherwise it should look like this:
<script>
(function() {
var cx = '012084064073534095313:hl3e_tosrlq';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
Use the include in layouts or on pages in which you want search:
{% include google-search.html %}
Customize
Google does have several options for customizing the look and feel of the results and the way search box is displayed, options for how content is indexed, statistics and other options.
Conclusion
It’s time to put it on your site. Let your customers use it now from today!
Catalog
