> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/search-modal.md).

# Search modal

Open a full search window from anywhere on your store, with live results, quick links, popular searches and recently viewed products.

***

The **Search modal** section is the search window that opens when shoppers click the search icon in the header or the mobile dock. Before they type, it shows quick links, popular searches, featured products, their recent searches and recently viewed products. As they type, it shows matching products, collections, pages, articles and search suggestions. It lives in the **Overlay** group, so one Search modal serves every page of your store.

{% hint style="info" %}
**Note:** The Search modal replaces the **Search input** theme setting (predictive search) from earlier versions of the theme. All search options are now set in this section.
{% endhint %}

### 1. Our guide to set up a Search modal section:

{% hint style="info" %}
**Steps:**

* In the theme editor, find the **Overlay** group in the left sidebar. The **Search modal** section is included there by default.
* Click **Search modal** to open its settings. The search window opens in the preview while it is selected.
* If you removed it, click **Add section** in the **Overlay** group and locate **Search modal.**
* Click **Save.**
  {% endhint %}

### 2. Section settings

* **Color scheme:** Color scheme of the search window: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
* **Layout**
  * **Position:** Where the window opens on the screen: Top / Center.
  * **Width:** Maximum width of the window, 56–96rem.
  * **Backdrop opacity:** How much the page behind the window is darkened, 0–80%.
  * **Corner radius:** Roundness of the window corners, 0–32px.
  * **Blur page behind modal:** Blurs the page behind the window.
  * **Show icons next to links:** Shows an icon beside each quick link and popular search.
* **Search input**
  * **Placeholder:** Text shown in the empty search field.
  * **Open with ⌘K / Ctrl+K:** Lets shoppers open the search window with the keyboard shortcut.
  * **Show keyboard hints in footer:** Shows navigation hints (↑ ↓ to navigate, ↵ to select, esc to close) at the bottom of the window. Desktop only.
* **Quick links**
  * **Heading:** Title shown above the Quick link blocks.
* **Results**
  * **Show results while typing:** Shows live results as shoppers type. When off, shoppers press Enter to go to the search results page.
  * **Show suggestions:** Shows suggested search terms.
  * **Show products:** Shows matching products.
  * **Sold-out products:** How sold-out products appear in results: Show last / Show / Hide.
  * **Products to show:** Maximum number of products in results, 2–8. Only shown when **Show products** is on.
  * **Show collections:** Shows matching collections.
  * **Show pages:** Shows matching pages.
  * **Show articles:** Shows matching blog articles.
  * **Results to show:** Maximum number of collections, pages and articles shown in each group, 2–6.
* **Product card**
  * **Show image:** Shows the product image in product rows.
  * **Show price:** Shows the product price in product rows.
  * **Show vendor:** Shows the product vendor in product rows.
* **Recent searches**
  * **Show recent searches:** Shows the shopper's own recent searches, with a Clear button. Saved in the shopper's browser.
  * **Number to show:** 3–8. Only shown when **Show recent searches** is on.
* **Recently viewed products**
  * **Show recently viewed products:** Shows products the shopper recently viewed. Saved in the shopper's browser.
  * **Number to show:** 2–6. Only shown when **Show recently viewed products** is on.

### 3. Quick link block settings

Quick links appear at the top of the window before the shopper types. You can add up to 6.

* **Icon:** Star / Heart / Shopping bag / Store / Truck / Percent / Price tag / Sun / Snowflake / Timer / Globe / User.
* **Label:** Text of the link.
* **Link:** Where the link goes.

### 4. Popular searches block settings

You can add 1 Popular searches block. Clicking a term runs that search.

* **Heading:** Title shown above the terms.
* **Search terms:** The terms to suggest, separated with commas.

### 5. Featured products block settings

You can add 1 Featured products block. The products appear before the shopper types.

* **Heading:** Title shown above the products.
* **Products:** Up to 4 products.

### 6. Tips

* Reorder the Popular searches and Featured products blocks to change the order they appear in. Quick links always appear first; recently viewed products and recent searches appear last.
* Use Quick links for your most visited pages, such as New arrivals, Sale or Shipping info.
* Recent searches and recently viewed products only appear once a shopper has searched or viewed products on your store.
* If you remove the Search modal section, the search icon takes shoppers straight to the search results page instead.