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.
import {
  RecommendationGrid,
  onExistsObserver,
  fetchDepictRecommendations,
} from "@depict-ai/js-ui";

const recommendations = fetchDepictRecommendations({
  merchant: "MERCHANT_ID",
  market: "MARKET", // See demo.depict.ai for available markets
  locale: "en_GB", // See demo.depict.ai for available locales
  type: "TYPE",
  // click the link above for more information on the options here
});

const recommendationGrid = RecommendationGrid({
  recommendations,
  productCard, // The productCard component you created in a previous step
});

onExistsObserver("#frontpage-recommendations", (element) =>
  element.append(recommendationGrid)
);
Looking for the reference?