How to Add a Search Bar Feature in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

If you’re using Hostinger Website Builder and want to add a search bar to your website, you’re in the right place. In this tutorial, I’ll walk you through the entire process of adding a fully functional and customizable search feature using Google’s Programmable Search Engine.

Why Add a Search Bar to Your Hostinger Website?

A search bar improves your website’s user experience by helping visitors quickly find the content they’re looking for. Whether you run a blog, an online store, or a service-based site, having a search feature can make your website more professional and easier to navigate.

Step 1: Log in to Your Hostinger Website Builder

First, log in to your Hostinger account and go to your website dashboard. Click on Websites, then click Edit Website next to the site where you want to add the search bar.

Make sure you’re working on a website built using Hostinger Website Builder (not WordPress). You can distinguish between them by the small icon next to each website in the list.

Step 2: Add a Blank Section for the Search Bar

Inside the website builder:

  • Add a new blank section under your header.
  • Add a text element with a title like “Search This Website”.
  • Resize and position it as you like.

Step 3: Create Your Search Engine with Google

Visit Programmable Search Engine by Google and click Get Started.

Here’s what to do:

  • Name your search engine (e.g., “BenTutorial Search Engine”).
  • Choose to Search only specific sites and enter your full website domain (like https://bentutorial.com/*).
  • Enable options such as Image Search and Safe Search.
  • Confirm you’re not a robot and click Create.

Once your engine is created, copy the embed code Google provides.

Step 4: Embed the Search Bar in Hostinger

Back in the Hostinger Website Builder:

  • Click the + (Add Element) button.
  • Scroll down and choose Embed Code.
  • Paste the code from Google.
  • Adjust the size and placement of the search bar.

Step 5: Fix the Search Results Display

If your search results aren’t showing correctly, go back to the Programmable Search Engine settings:

  • Click on your engine.
  • Go to Look and Feel → All Settings.
  • Change the layout from Overlay to Full Width.
  • Copy the updated embed code and replace the old one on your website.

Step 6: Customize the Search Engine Design

You can customize your search engine to match your site’s design:

  • Change the theme (Minimal, Bubblegum, Espresso, etc.)
  • Remove Google branding.
  • Adjust font, button color, background, and more.
  • Add your own logo and link.
  • Set a specific region for search results (e.g., United States).

Final Thoughts

Adding a search bar feature in Hostinger Website Builder is simple and highly customizable when using Google Programmable Search Engine. Not only does it make your website more user-friendly, but it also helps visitors quickly find the content they need—resulting in a better overall experience.

If you’d like to learn more, make sure to check out my free Hostinger Website Builder course where I teach everything from setup to advanced integrations.

👉 Get access here: https://university.bensexperience.com

Have questions? Leave them in the comments or reach out directly.

4o

Similar Posts