Google Custom Search Bar HTML

Google Custom Search Bar HTML

Rate this article

Share this article

Google Custom Search Bar HTML

Your users must have a reliable and easy method for finding your content. One easy way to achieve this is by including a search powered by Google. But simply adding the default code provided by Google leaves your site’s search lacking. While the functionality is there, the professional styling expected on websites today is notably absent. The tutorial below solves this dilemma, merging the powerful functionality of Google Custom Search with a sleek custom search bar html

You will first have to create a custom search engine from

Once you’ve created your custom search engine, you can add the Custom Search Element to your site. To do this, you’ll need to copy some code and paste it into your site’s HTML where you want your search engine to appear.

  1. In the Control Panel click the search engine you want to use.
  2. Click Setup in the sidebar, and then click the Basics tab.
  3. In the Details section, click Get code. Copy the code and paste it into your page’s HTML source code where you want the Custom Search element to appear.

The <div class="gcse-search"></div> element is a placeholder – this is where the search element (both search box and search results) will be rendered.

Add Custom Search to your Website

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like