> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/shopify/stylifi-shopify-theme-documentation/search.md).

# Search

*Configure the Search overlay: color scheme and custom CSS*

<figure><img src="/files/9jxeLgOLGj8bz4ncNEPC" alt=""><figcaption></figcaption></figure>

#### **Overview**

The Search section in Stylifi powers the full-screen search overlay that appears when a visitor clicks the search icon in the header. It presents a centered search input, keyboard shortcut hints, a recent searches history area, and a Popular Searches section with quick-access pill buttons.

#### **Accessing the Search Settings**

* In the template selector at the top of the Theme Editor, select Search.
* Click Search in the left sidebar to open its settings panel.

| **Note:** The Search section applies globally across all pages of your store. Any color scheme change here affects the search overlay wherever it appears. |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- |

![](/files/fffac5d61eddbe5f13dfaeb27bcf33a355fbbb4e)

#### **Color Scheme**

The Color scheme setting controls the background and text colors of the search overlay modal, matching it to one of your store's pre-defined color schemes.

| **Setting**      | **Description**                                                                                                               | **Default / Options** |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Color scheme** | Select a pre-defined color scheme to apply to the search overlay. Color schemes are configured under Theme Settings → Colors. | **Scheme 1**          |

#### **Custom CSS**

The Custom CSS accordion at the bottom of the Search settings panel allows advanced users to inject CSS scoped to the search overlay. This is useful for adjusting the modal width, pill button styles, font sizes, or spacing without editing theme source files.

### **Search Overlay Features**

The following features are built into the Search overlay and are not configurable from the Theme Editor — they are controlled by Shopify's native search and the theme's front-end logic.

| **Setting**                | **Description**                                                                                                                                      | **Default / Options**           |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Search input**           | Full-width search bar with placeholder text 'Search Products, Collections, or Pages'. Searches across products, collections, and pages.              | **Always visible**              |
| **Keyboard shortcut hint** | Displays 'Press Esc to close · Ctrl+K to open' below the search bar as a helper hint for keyboard users.                                             | **Always visible**              |
| **No recent searches**     | When a visitor has no search history, the overlay shows 'No recent searches / Your search history will appear here'.                                 | **Shown when history is empty** |
| **Recent searches**        | Once a visitor has searched, their recent queries appear in this area for quick re-access.                                                           | **Shown when history exists**   |
| **Popular Searches**       | A row of pill-shaped buttons showing curated popular search terms (e.g., Shirts, Jeans, Dresses, Shoes). Clicking a pill runs that search instantly. | **Always visible**              |