How to Add Google Search to Your Website (and Customize It)

How to Add Google Search to Your Website (and Customize It)

Learn how to embed Google search on your website and customize its look to match your brand.

Why Add Google Search to Your Website?

Adding Google’s search functionality to your website provides users with a familiar and powerful way to find content across your site (or the entire web). Instead of building your own search engine, you leverage Google’s technology for better speed and accuracy.

What You Need Before You Start

To add Google search to your website, you’ll need:

✅ A Google Account – You’ll log in to create your search engine.
✅ Your website already indexed by Google – Make sure your website is accessible and indexed in Google Search so your pages can appear in search results. If your site is new, submit it to Google Search Console first.
✅ Basic HTML knowledge – So you can paste code into your site.
✅ Access to your website’s code or CMS – To embed the search box.

How to Add Google Search: Step by Step

Step 1: Sign up for Programmable Search Engine

Google’s product for adding search to websites is now called Google Programmable Search Engine (formerly Custom Search).

1.1 Visit: Programmable Search Engine

1.2 Click Get started.

1.3 Sign in with your Google account.

Step 2: Create a New Search Engine

2.1 Enter your website’s URL(s) (e.g. www.example.com) so Google knows which sites to search.

2.2 Decide whether to let your search box search:

2.2.1 Only your website, or

2.2.2 The entire web

2.3 Give your search engine a name.

Click Create.

Step 3: Get the Embed Code

After creating your search engine:

3.1 Go to the Control Panel for your new search engine.

3.2 Click Get Code under Setup.

3.3 Copy the HTML snippet provided.

It will look something like this:

<script async src="https://cse.google.com/cse.js?cx=YOUR_CX_ID">script>
<div class="gcse-search">div>

Replace YOUR_CX_ID with your unique search engine ID (Google generates this).

Step 4: Embed the Code in Your Website

4.1 Open the HTML file for the page where you want the search box to appear.

4.2 Paste the code where you’d like the search box displayed.

If you use a CMS like WordPress, paste it into an HTML block or widget.

How to Customize Your Google Search Box

By default, the search box will look fairly plain. But Google allows customization to match your design (e.g. the orange button in your image).

Using the Programmable Search Engine Control Panel:

- Go to your search engine’s Control Panel.

- Click Look and Feel.

- Choose:

1. Layout – e.g. results on same page or a new page

2. Themes – predefined color schemes

3. Custom colors – set background, text, border, and button colors

4. Thumbnail display – show images with results

This is where you’d customize:

- Button color (e.g. orange #ff9000)

- Search box borders and text colors

- Font styles

Advanced Customization with CSS

If you want precise styling beyond the panel’s options, use CSS:

Example:

.gsc-input-box {
    border: 2px solid #ff9000;
    border-radius: 4px;
    height: 40px;
}

input.gsc-input {
    padding: 10px;
    font-size: 16px;
}

.gsc-search-button {
    background-color: #ff9000;
    border: none;
    padding: 10px 20px;
}

.gsc-search-button svg {
    fill: #fff; /* Change the magnifier color */
}

- Add this CSS to your website’s stylesheet.
- You may need to inspect your search box using developer tools to get exact class names (they sometimes vary).

How Much Does Google Programmable Search Cost?

Good news:

- Free Tier → Includes ads in search results.

- Paid Tier → Removes ads and allows more queries.

For many personal or small business sites, the free tier is perfectly fine.

Benefits of Google Search on Your Site

✔ Familiar look and feel for users
✔ Extremely fast indexing and search
✔ Easy to integrate
✔ No need to build your own search backend
✔ Powerful customization to match your brand

Final Thoughts

Adding Google search to your website is quick, free, and improves the user experience tremendously. Whether you keep it simple or style it to match your brand (like the orange button in your image), it’s a professional touch your visitors will appreciate.