All Categories Quick Guides How to Customize the Search Bar Placeholder Text in Your Docs Site

How to Customize the Search Bar Placeholder Text in Your Docs Site

By Stefan Dreßler
October 19, 2023

Customizing the placeholder text in the search bar of your Docs site can help personalize your website and make it more user-friendly. This guide will walk you through the simple steps to change the default placeholder text to something of your preference.

Step 1: Access Site Settings

  1. Go to your Docs site.

  2. Select the "Settings" of your Docs site.

Step 2: Navigate to Advanced Styling

  1. In the settings menu, scroll down until you find "Site Styling."

  2. Within the "Site Styling" section, look for "Advanced Styling" and click on it.

    Docs-Search-Placeholder-Text.png

Step 3: Customize the Placeholder Text

  1. Enter the following script into the text area field "Insert between <head></head>":

    <script>
      window.addEventListener('load', function () {
        const customSearchPlaceholder = 'Type in the placeholder text you prefer.';
        document.getElementsByName('Search')[0].placeholder = customSearchPlaceholder;
      });
    </script>
  2. Replace "Type in the placeholder text you prefer" with the text you'd like to appear as the new placeholder text for the search bar.

Step 4: Save Your Changes

  1. After making the desired changes to the script, click the "Save" button.

Was this article helpful?

Thanks for your feedback!