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

# Adding the SearchPage to your site

The next step is to add the `SearchPage` component to the search results page you created, on the URL matching the `searchPagePath`. `SearchPage` is the component that will be used to display the search results.

An example looks like this:

```tsx theme={null}
import { SetupPageReplacer, SearchPage } from "@depict-ai/js-ui";

SetupPageReplacer({
  isPageToReplace: url => url.pathname === "PATH_TO_SEARCH_PAGE",
  selectorToReplace: `.replace-for-depict`,
  renderContent: () =>
    SearchPage({
      searchProvider, // The searchProvider instance you created in the previous step
      productCard, // The productCard component you created in a previous step
    }),
});
```

See a previous page about [`SetupPageReplacer`](/js-ui-guide/search/creating-page).

Use the `columnsAtSize` prop to handle breakpoints on your search results page. It defines the number of product card columns displayed at each screen size.

<Note>To find out more about possible configuration options, see the [reference](/reference/search-sdk/js-ui#searchpage-function)</Note>

<Check>
  Search is done: you can open the modal, type a query, submit it and land on the results page. Next, [set up tracking](/js-ui-guide/tracking/introduction), or continue with [product listing pages](/js-ui-guide/listings/overview).
</Check>


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