Adding a search bar to your website

Make it easier for your visitors to find their way around your website using Google's Custom Search Engine.

By integrating Google Search Engine into your website, people are able to conduct specific search queries on your website. It is just like Google, but the results will only be derived from your page.

Step by step guide

Step 1: Creating a Google Custom search field

Please note: to create a custom search engine through Google, you will need an active Gmail-account.

Go to to access the Google Custom Search Engine. Start out by clicking Create a custom search engine.


Step 2: Enter your details

Step 3: Try it out

Once you've created your search engine, click Public URL to conduct a search on your own site.

Step 4: Using the setup panel

Step 5: Changing the design of your search bar

Step 6: Getting the code

Step 7: Adding a Custom HTML element

Return to your PagePicnic canvas, select Add Content and drag and drop a Custom HTML to where you want to add your search bar.

Step 8: Paste your code in the HTML field

Once you've added a Custom HTML block to your canvas, place your cursor over the block and click Edit HTML to access the HTML editor. Paste your code by right clicking and selecting Paste, or press Ctrl + v.

Step 9: Publish your website

Step 10: Have a look at the result

Extra information & Tips

Make your subpages visible on Google

To allow Google to index your subpages, making them easier for people to find, you can upload a sitemap to Google. 

Learn more about uploading sitemaps using Google Webmaster Tools here

Article was last updated: 2014-03-17

Was this information helpful?

Sorry, we will try to improve it. Thanks to your response!.

That’s great! Thanks for your response.