Overview - Depict Documentation

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

Site header with a rounded search field labelled Search, a magnifier button beside it, and the store's navigation links — A SearchField in the site header

Site header with only a magnifier icon button in place of a search field — A search button that opens the modal

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 — V2 modal (default)

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 — Classic modal

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 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.

​The shopper’s flow

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

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

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

The shopper’s flow

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

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

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