Skip to main content

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.

This page does not apply to installs made in 2025 or later of the Depict Shopify apps
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. You will need to add the product card you created in a previous step here. An example looks like this: 
import { SearchPage } from "@depict-ai/react-ui";
import { ProductCard } from "../../components/ProductCard";

export default function SearchResultsPage() {
  return (
    <main>
      <SearchPage productCard={ProductCard} />
    </main>
  );
}
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.
To find out more about the Search UI SDK’s components and hooks and their usage configurations, see React component API.