How to embed Google Custom Search in Magento

How to embed Google Custom Search in Magento

For those of you who love Google Custom Search and would like to use it with the Magento, here is a little how to. Entire embed process is really easy. It all comes down to copy paste-ing few lines of code from Google to Magento. My idea is to create the static block in Magento CMS section and then use the custom CMS page from which I will call this statick block among other HTML content I might wish to throw into the CMS page.

For starters, we need to create Google Custom Search engine. Attached are few screenshots to see how it looks.

Once we have created the necesery search engine, we will copy-paste the embed code into the static block of Magento, lets say we login to Magento, and create static block with identifier “custom-google-search-engine”.

For our last step, we will create a CMS page, giving it SEF URL Identifier “custom-search”, and placing the following {{block type=”cms/block” block_id=”custom-google-search-engine”}} block call into the content area.

That’s it. Now when you visit the url like http://myshop.domain/custom-search you will see the result like shown on photo below.

CC Image credits.

You made it all the way down here so you must have enjoyed this post! You may also like:

How To Connect Google Analytics 4 To Magento 2 Bojan Mareljic
Bojan Mareljic, | 35

How To Connect Google Analytics 4 To Magento 2

Adding Magento products to Google Merchant Center Toni Anicic
Toni Anicic, | 127

Adding Magento products to Google Merchant Center

Magento & GWT “Googlebot found an extremely high number of URLs on your site” Toni Anicic
Toni Anicic, | 2

Magento & GWT “Googlebot found an extremely high number of URLs on your site”

15 comments

  1. when its put in the header, it will cause a problem on the checkout page because the results are called in HTTP. How can you call these results in HTTPS:

    <form id="search_mini_form" action="getPageUrl( searchresults ) ?>” method=”get”>

    ??

  2. The search results open in a new tab by default but I found a way to get them to open in the same tab. Here is the code for anyone having the same issue:
    Replace this –

    <gcse:search></gcse:search>

    With this –

    <gcse:search linktarget="_parent"></gcse:search>
  3. This is an awesome feature! Magento’s built in search is a disaster and when you integrate your site with a CMS like WordPress for content marketing, you have to use separate search functions for each. This means you cannot find products from your blog or blog content from your store, which is like having two wheels spinning in opposite directions.

    THIS ELIMINATES ALL OF THAT!!! Their are limitations such as your search is limited by Google’s link index. But honestly if you do not want your page indexed by Google, do you really want someone landing on that page from your search box.

    An excellent follow up post here that I cannot seem to find is how to override the original search box with the new Google CSE search box. It looks like it is time to hit the drawing board again!

  4. I followed all the steps but how do you actually get it to work to place search box & button in the standard area in the header. Do you edit the form.mini.phtml?

  5. This is dissapointing as Google commerce search starets at £19k. I guess you get what you pay for. I would much rather see an SOLR search extension for the community edition. If anybody could point me in the right direction I would be very apreciative.

  6. ok, thats what I thought, pretty disappointing. I think you are much better off using the Magento search. At least with that you know all products will show up, you can taylor the results and you see images of all the items.

  7. this looks great, but do the results come from only the pages google has in its index? for example, my site has over 2000 pages but google only has about 1800 of them in its index due to low link juice, etc on some pages. so now those pages will not be part of the search results. correct me if im wrong? (i hope)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.