> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> An overview of the search components and flow

Adding Depict search to a site has two parts:

| Part | Component | Role |
| - | - | - |
| Entry point | `SearchField`, or any element wired to `openModal` (for example a search button in the header) | Opens the search modal |
| Results page | `SearchPage`, mounted at a route such as `/search` | Renders the results of a submitted query with filters, sorting and recommendations |

## The shopper's flow

### 1. The shopper clicks the search field or the search button

<CardGroup cols={2}>
  <Frame caption="A SearchField in the site header">
    <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/search/search-field.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=ce7e05725dbce116226529e860679b2a" alt="Site header with a rounded search field labelled Search, a magnifier button beside it, and the store's navigation links" width="2880" height="114" data-path="images/search/search-field.png" />
  </Frame>

  <Frame caption="A search button that opens the modal">
    <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/search/search-button.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=22d68e00bf7a828b92edb5d966490b9e" alt="Site header with only a magnifier icon button in place of a search field" width="2880" height="114" data-path="images/search/search-button.png" />
  </Frame>
</CardGroup>

### 2. The search modal opens and shows results while the shopper types

<CardGroup cols={2}>
  <Frame caption="V2 modal (default)">
    <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/search/modal-v2.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=4e251446de6b6094a36af5406319efb4" alt="V2 search modal for the query shirt: a search input at the top, a Products section with four product cards showing image, title and price, and a View all 7 results button" width="2304" height="1024" data-path="images/search/modal-v2.png" />
  </Frame>

  <Frame caption="Classic modal">
    <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/search/modal-classic.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=ca8c62c947e9839e16a4ea6bf8d6d267" alt="Classic search modal for the query shirt: a search input at the top and a list of four product rows with thumbnail, title and price, and a View all 7 results button" width="1602" height="1230" data-path="images/search/modal-classic.png" />
  </Frame>
</CardGroup>

The modal aligns to the `SearchField` that opened it, to any other element you pass to `openModal`, or to the center of the screen. The V2 modal is the default; [switch to the classic modal](/other-guides/introduction#switching-to-the-classic-search-modal) if you need it.

### 3. The shopper submits the query and lands on the results page

The results page URL carries the query, for example `/search?query=shirt`.

<Frame caption="The SearchPage: result count, filters, sorting, the product grid, and recommendations below the results">
  <img src="https://mintcdn.com/depictai/mnkMPPk8QdG7xfO6/images/search/search-page.png?fit=max&auto=format&n=mnkMPPk8QdG7xfO6&q=85&s=8197d1edf8de6a7ef35831b018f5cb51" alt="Search results page for the query shirt: the line Showing 7 products for shirt with Filter and Sort controls, a grid of seven product cards with image, title and price, then an Other alternatives section with more product cards" width="2784" height="3120" data-path="images/search/search-page.png" />
</Frame>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.