Customizing Search Results

In a similar way to customizing search box, you can add additional options to the search results element.

For example, in order to change our search engine from webresults-based to image-based, we can utilize the defaultToImageSearch attribute.

First of all, you need to enable Image Search in the Control Panel for your search engine. In the Setup section, in Basics tab, click the Image search option into the "on" position. After that, add the defaultToImageSearch attribute to the <div class="gcse-searchresults"></div> element on your website.

<!-- Insert your own Programmable Search Engine ID here --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> <!-- Try switching the attribute value to "true" or "false" --> 
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>

Now, when you search for something, the image search tab is showing as a default.

There are many more options available. You can read about other search results customization options in Programmable Search Element Control API section.

Next...

Continue to Next steps.