Help Center
    Help Center
  1. Managing your business
  2. Business solutions & apps
  3. Wix apps
  4. Wix Site Search
    5. Customizing Your Site Search Bar

Customizing Your Site Search Bar

4 min read
Let your visitors search for anything on your site using the Search Bar in Wix Site Search. The results of the search are displayed in a list, so that your visitors can easily find what they are looking for. You can change the layout and design of your Search Bar so that it matches your site's design.
A screenshot showing the Wix Site Search Bar on a live site.
In this article learn more about: 

Customizing the Search Bar settings

Customize your Search Bar's placeholder text and result suggestions. 

To customize the settings of your Search Bar:

  1. Click the Search Bar in the Editor.
  2. Click Settings.  
  3. Customize the settings options:
    • Placeholder text: Add a short text that displays when the search bar is empty.
      Note: This text disappears when your site visitor starts typing in the search bar.
    • Result Suggestions: Enable or disable result suggestions displaying when a user starts typing.
    • Trending Items: Enable or disabling showing items that are trending before a user starts typing.
      Note: Enabling trending items is only possible if result suggestions are also enabled. 
A screenshot of the Search Bar Settings panel in the Editor.

Changing the Search Bar layout

Set the layout, alignment and spacing on your Search Bar from the Layouts panel.

To change the layout of your Search Bar:

  1. Click the Search Bar in the Editor.
  2. Click the Layouts icon .
  3. Customize the layout options:
    • Choose a layout: Choose a style for your Search Bar.
    • Icon alignment: Select the position of the search icon.
    • Text alignment: Select the position of the text.
    • Text spacing: Set the spacing between the edge of the Search Bar and the text.
    • Icon spacing: Set the size of the icon area.
A screenshot of the Search Bar Layout panel settings in the Wix Editor.
Note:
The options available depend on the layout you choose.

Customizing the Search Bar design

Personalize the design of your Search Bar for the different states:
  • Regular: When your bar is not in use.
  • Hover: When visitors hover their mouse over the bar.
  • Focus: When visitors have clicked the bar.

To customize the design of your Search Bar:

  1. Click the Search Bar in the Editor.
  2. Click the Design icon .
  3. Select a preset design.
  4. Click Customize Design to design it further.
    1. Click a tab to choose which state you want to customize; Regular, Hover, or Focus.
    2. Customize the state using the options:
      • Fill Color & Opacity: Change the color of the bar background and the icon:
        • Input Field Background: Click the color box to select the background color of the input field and drag the slider to increase or decrease the opacity.
        • Button Background: Click the color box to select the background color of the search icon and drag the slider to increase or decrease the opacity.
        • Button Icon: Click the color box to select the color of the search icon and drag the slider to increase or decrease the opacity.
      • Border: Add and customize a border for your bar:
        • Opacity & Color: Click the color box to select the border color and drag the slider to increase or decrease the opacity.
        • Border Style: Select the style of your border and which sides it appears on.
        • Width: Drag the slider to make your border thicker or thinner.
      • Corners: Curve the corners of your bar:
        • Enter a value on a corner, or click the Lock icon and change all the values together.
      • Shadow: Add a shadow to your bar:
        1. Click the Enable Shadow toggle to add a shadow.
        2. Customize your shadow using the options:
          • Angle: Select the shadow angle.
          • Distance: Drag the slider to increase or decrease the distance of the shadow.
          • Size: Drag the slider to increase or decrease the size of the shadow.
          • Blur: Drag the slider to increase or decrease the shadow blur.
          • Opacity & Color: Click the color box and select the shadow color and drag the slider to increase or decrease the shadow opacity.
      • Text: Format the text on the bar:
        • Placeholder color: Click the color box to select the placeholder text color and drag the slider to increase or decrease the opacity.
        • Color: Click the color box to select the input text color.
        • Theme: Click the drop-down menu and select the text theme.
        • Font: Click the drop-down menu and select the text font.
        • Font size: Drag the slider to set the text size.
        • Bold/Italics: Click the options to format the text.
A screenshot of the Wix Site Search bar design panel in the Wix Editor.
Change the position of your search bar:
To reposition your search bar, click and drag it to the header or footer of your site. 

Did this help?

|

In This Article

  • Customizing the Search Bar settings
  • Changing the Search Bar layout
  • Customizing the Search Bar design

Related Content

Understanding & Customizing Your Search Results Page
About Wix Site Search

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched