Overview - Depict AI Documentation

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

Adding a search field or button to your site
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.

or

SearchField

A search button

Modal V2, Click to enlarge

Classic modal, click to enlarge

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

Setting up your product card Creating a search page

On this page

There’s two main parts to adding Depict UI Search 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.
👇 3. The user submits a query and goes to a new URL, like /search