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. An example looks like this: 
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. 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 possible configuration options, see the reference