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

<Warning>
  This page does not apply to installs made in 2025 or later of the Depict Shopify apps
</Warning>

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: () => {
    const searchPage = 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>