Configuring the Search Box

Last Updated on

The search box is a rectangular field that lets users type in a text in order to search for information on your website. After the user types a text and clicks the search button, the system searches the database and gathers the information that is related to the specified terms that the user searched for. Therefore it is better to use the search box if you have a website that has a large amount of content.

In this article you will find some information about displaying the search box in different areas of the website, and configuring the design and search results.

To see the search box in action, check out the demo page.

In this article


You can display the search box in various areas of the Jupiter theme. It can be in the header area or in a widget area. The design and type of the search box can be changed according to the placement you selected.

Displaying in the Header Area

To display the search box:

1
Go to Theme Options > Header.

Configuring search box - Header

2
Select the desired location in the Search Form In Header menu in order dropdown to display the search box.

The search box will have a different style and type according to the selected location. Below are some details about how search box will look in each area.

Setting Description
Header Toolbar  Displays the search box as a text field in the header toolbar area.
Header Main Area  Displays the search box as a text field in the main header area.
Inside Main Navigation With Tooltip Adds a search icon to the main navigation. The search box displays in a tooltip that triggered by a click on the search icon.
Inside Main Navigation With Fullscreen Layer Adds a search icon to the main navigation. The search box displays in a fullscreen layer that is triggered by a click on the search icon.

3
Click on Save Settings.

Displaying in the Widget Area

1
Go to Appearance > Widgets.

Configuring search box - Widgets

2
Find the Search element and drag and drop it into the widget area where you want it to be shown.

Configuring search box - Search widget


Configuring the Design

The configuring the design options lets you change the background and input text colors for the search box.

To configure the search box design:

1
Go to Theme Options > Header Toolbar.

Configuring search box - Header toolbar

2
There are some options regarding the search box design on this page. Configure your search box settings according to your needs.

Setting Description
Search Form Input Background Color Sets the search box background color.
Search Form Input Text Color Sets the search box input text color.

3
Click on Save Settings.

x
Note: Note that this option only works if the either Header Main Area or Header Toolbar option is selected in the Search Form In Header field. To change the settings, follow the steps in the Displaying Search Box section.

Configuring the Search Results

Jupiter lets you configure the search results page options such as layout, page title and subtitle.

To configure the search results page options:

1
Go to Theme Options > Search.

Configuring search box - Search

2
The page has some options regarding the search results page. Configure your search results page settings according to your needs.

Setting Description
Search Layout Sets the search results page layout as full width without the sidebar left sidebar or right sidebar.
Search Page Title Sets the search results page title.
Search Page Subtitle Enables the search results page subtitle.

3
Click on Save Settings.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket