Overview

​

There’s two main parts to adding Depict UI Search to your site:

1. Adding a search field or button to your site
2. Adding a search results page to your site

​

This will result in the following flow for the user:

​

👇 1. The user clicks on the search button or search field.

SearchField

A search button

​

👇 2. The search modal opens

The SearchModal that the user sees while typing a query

The SearchModal can either align to the SearchField that was used to open it, an arbitrary element, or the center of the screen.

​

👇 3. The user submits a query and goes to a new URL like /search

The SearchPage which displays the results along with sorting options, filters and search recommendations