​

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.

​

👇 2. The search modal opens, this is what 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.

You can choose which of the SearchModal variants you want to use. The v2 modal is the default, follow these steps to use the classic one.

​

👇 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