---
title: Search
description: The Search Block lets visitors search your WordPress website using either a popup search interface or an inline search field. Customize the search title, placeholder text, icons, input field, submit button, popup overlay, typography, colors, and responsive sizing to match…
url: "https://shapekode.com/product/shapeblock/docs/search/"
updated: "2026-10-17"
category: "Header & Footer Block"
---

# Search

The Search Block lets visitors search your WordPress website using either a popup search interface or an inline search field. Customize the search title, placeholder text, icons, input field, submit button, popup overlay, typography, colors, and responsive sizing to match your website design.

## How to Add a Search Block

### Step 1: Add the Search Block

1. Open the page or post where you want to add the Search Block.
2. Click the **+ (Add Block)** button in the Gutenberg editor.
3. Search for **Search**.
4. Select the **Search Block** to insert it into your page.
5. Select the block to open its settings in the sidebar.
6. Choose your preferred search skin and configure its settings, layout, and styling.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-85.png)

### Step 2: Configure the Search Block

The available tabs are:

- **Settings:** Choose the search skin, set the title and placeholder, and select or upload search icons.
- **Layout:** Configure icon positioning, offsets, input height, and field width.
- **Style:** Customize the search icon, input field, submit button, and popup appearance.
- **Advanced:** Configure spacing and background settings for the entire Search Block.

## Settings Tab

### 1. Search Settings

- **Search Skin:** Choose how the search interface is displayed.
  - **Search Popup:** Displays a search icon that opens a popup search interface with a title, search field, and close icon.
  - **Search Fields:** Displays the search input field directly on the page with a search submit button.
- **Search Title:** Enter the title displayed in the popup search interface. This option is available when **Search Popup** is selected.
- **Search Placeholder:** Enter the placeholder text displayed inside the search field. The default text is `Type keywords here...`.
- **Search Icon:** Choose the icon used to open the popup or submit an inline search, depending on the selected skin.
- **Or Upload Search Icon (SVG/Image):** Upload a custom SVG or image to use instead of the selected search icon.
- **Close Icon:** Choose the icon used to close the popup. This option is available when **Search Popup** is selected.
- **Or Upload Close Icon (SVG/Image):** Upload a custom SVG or image for the popup's close button. This option is available when **Search Popup** is selected.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-86-1024x581.png)

## Layout Tab

### 1. Search Icon Position

- **Icon Vertical Position (px):** Set the vertical position of the search icon in pixels. This option is available when **Search Popup** is selected.
- **Icon Position:** Choose whether the search icon appears on the **Left** or **Right** side of the input field. This option is available when **Search Fields** is selected.
- **Offset From Right (px):** Set the distance between the search icon and the right edge of the input field. This option appears when **Search Fields** is selected and the icon position is set to **Right**.
- **Offset From Left (px):** Set the distance between the search icon and the left edge of the input field. This option appears when **Search Fields** is selected and the icon position is set to **Left**.

### 2. Input Size

- **Height (px):** Set the height of the search input field in pixels.
- **Input Field Width (px):** Set the width of the search input field in pixels. This option is available when **Search Fields** is selected.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-87.png)

## Style Tab

### 1. Search Icon

- **Icon Color:** Set the color of the search icon.
- **Icon Size (px):** Set the size of the search icon in pixels. The size can be configured separately for desktop, tablet, and mobile devices.

### 2. Input Field

- **Typography:** Customize the typography of the text entered into the search field. The settings can be configured separately for desktop, tablet, and mobile devices.
- **Input Text Color:** Set the color of the text entered by visitors.
- **Placeholder Color:** Set the color of the placeholder text.
- **Input Background Color:** Set a solid color or gradient for the input field background.
- **Border Radius:** Adjust the roundness of the input field's corners. This option is available when **Search Fields** is selected.
- **Input Border Color:** Set the border color of the input field. This option is available when **Search Fields** is selected.
- **Border Color (Focus):** Set the border color displayed when the input field is focused. This option is available when **Search Fields** is selected.
- **Padding:** Adjust the inner spacing around the input text. Padding can be configured separately for desktop, tablet, and mobile devices.

### 3. Submit Button

- **Submit Icon Color:** Set the color of the search submit icon. This option is available when **Search Popup** is selected.
- **Submit Icon Hover Color:** Set the submit icon color when visitors hover over it. This option is available when **Search Popup** is selected.
- **Submit Icon Background:** Set a solid color or gradient for the submit button background.
- **Submit Icon Hover Background:** Set the background color or gradient displayed when visitors hover over the submit button. This option is available when **Search Popup** is selected.
- **Padding:** Adjust the inner spacing around the submit button. Padding can be configured separately for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-88.png)

### 4. Search Popup

This panel is available when **Search Popup** is selected.

- **Overlay Background:** Set a solid color or gradient for the popup overlay.
- **Title Color:** Set the color of the popup search title.
- **Title Typography:** Customize the typography of the popup search title. The settings can be configured separately for desktop, tablet, and mobile devices.
- **Close Icon Color:** Set the color of the popup close icon.
- **Close Icon Size (px):** Set the size of the popup close icon in pixels. The size can be configured separately for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-89.png)

## Advanced Tab

The Advanced tab controls spacing and background settings for the entire Search Block.

### 1. Spacing

- **Padding:** Set the outer padding around the Search Block. Values can be configured separately for desktop, tablet, and mobile devices.
- **Margin:** Set the outer margin around the Search Block. Values can be configured separately for desktop, tablet, and mobile devices.

### 2. Background

- **Background:** Set a solid color or gradient for the entire Search Block.