Depict AI Documentation

Home

Guide: Data ingestion

Guide: Depict UI integration (React)

Guide: Depict UI integration (JavaScript)

Guide: Shopify app

Guide: API integration

Other guides

Reference

Contact us

Installation

Welcome to the Depict documentation!

Depict UI

A guide for integrating with the plain JavaScript flavour of the Depict UI

Introduction

Data Ingestion

Compatibility and Browser Support for Depict Packages

How to import the SDK styling into your project

Import styling

How to set up JSX in your build environment to create HTMLElements

Setting up JSX

Your product card components needs to meet some specific requirements

Setting up your product card

An overview of the search components and flow

Overview

Creating a search page

Configuring the search provider

Transforming and enriching display data

Adding a way to open the SearchModal

Adding the SearchPage to your site

Complete - search functionality added

Who owns your listing pages? Let's find out!

Choosing a source of truth

Configuring the category provider

Adding the CategoryPage to your site

Complete - product listing pages

Rendering recommendations in a slider

Rendering recommendations in a grid

A guide to setting up tracking for Depict UI (JavaScript) integrations

Import DPC so that your code has access to it.

Importing DPC

Here we'll finally execute the imported code.

Initialising DPC

How to make sure DPC tracks your product cards correctly

Product Card Tracking

How to make sure DPC tracks your Product Details Page (PDP) views correctly.

Product Page Tracking

You need to track both the add-to-cart button on your product page and, if applicable, on your product cards

Add to cart tracking

To calculate revenue figures, you need to track purchases. This is done with the `purchase` event.

Purchase tracking

Tracking - Completed

A guide for React/Next.js/Gatsby users to integrate with the Depict UI

Configuring `DepictProvider`

Setting up routing

Configuring the DepictProvider for your search page

Complete - product listing pages added

A guide to setting up tracking for Depict UI (React) integrations

For product cards that are NOT rendered *through* the Depict UI (SDK)

Product Card Tracking for Recommendations

A guide on integrating with Depict and the Depict UI through our shopify app

Compatibility and Browser Support of the Depict Shopify App

Installing the app

Preparing your theme - <head>

Preparing your theme - <body>

Complete - Depict App now ready to use

Adding Depict blocks to your theme

Adding a Recommendation block

Adding a Search Page block

Adding a way to open the Search Modal

Adding a Collection Page block

The style editor

The product card editor

Integrating with the Depict API

Import

Fetching recommendations

API Client - Completed

Interfacing directly with the API

A guide to setting up tracking for your Depict API integration

We need to make sure you have DPC installed before we can use it.

Installing DPC

A collection of guides to provide examples of more framework specific integrations with Depict.ai

Storyblok + NextJS

A guide to setting up content blocks (React UI)

A guide to setting up content blocks (JS UI)

Switching to the classic search modal (JS-UI)

Switching ot the classic search modal (React-UI)

Depict UI migration v2 -> v3

Depict UI migration v3 -> v4

Naming discrepancies

Types of product listing pages

This page answers more in-depth questions about the product card rendering in the shopify app.

Product card rendering

Product Feed Specification

Category Feed Specification

Discover different ways to send your data to Depict.

Overview of Data Ingestion

Learn how to import your product data from Centra.

Centra

Learn how to import your product data from Shopify.

Shopify

Learn how to import your product data through a feed export.

Feed export

Google Analytics

JavaScript UI Reference

Learn more about the Depict Search UI React SDK, its components and configuration.

React UI Reference

Learn more about our React SDK, its components and configuration.

Placeholder components

Customize PLP Styling with SCSS

Debugging and Error reporting

Browser compatibility

Customising price formatting

This page details how to get started with Depict recommendations using our API

Native

Fetching recommendations with our API wrapper

API client

Reference of the depict Recommendations vanilla JS SDK.

Javascript UI Reference

Reference of the depict Recommendations React components

Use our Depict Performance Client SDKs to track and monitor user behavior on your store.

Introduction to Depict Performance Client

DPC handles performance tracking to enable the Depict AI to optimize recommendations and product listings.