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
To render recommendations in a grid, do the following:
  1. Fetch recommendations, see: this excerpt of the API integration guide.
  2. Render the recommendations using the RecommendationGrid function.
You will need to add the product card you created in a previous step here. 
import { RecommendationGrid } from "@depict-ai/react-ui";
import { useEffect, useState } from "react";

export default function Recommendations() {
  const { fetchRecommendations } = useFetchRecommendations<YourDisplay>();

  const [recs, setRecs] = useState(new Promise<YourDisplay[]>(() => {})); // So placeholders are shown while loading

  useEffect(
    () =>
      setRecs(
        fetchRecommendations({
          type: "trending",
          // click the link above for more information on the options here
        })
      ),
    []
  );

  return (
    <>
      <h2>You might also like</h2>
      <RecommendationGrid
        recommendations={recs}
        productCard={ProductCard}
      />
    </>
  );
}
Looking for the reference?