Setup steps

Learn how to import your product data from Shopify.

Shopify

Depict AI Documentation

Welcome to the Depict documentation!

Depict UI

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 through a feed export.

Feed export

Google Analytics

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

Introduction

Data Ingestion

Compatibility and Browser Support for Depict Packages

Installation

Configuring `DepictProvider`

Setting up routing

Transforming and enriching display data

How to import the SDK styling into your project

Import styling

Your product card components needs to meet some specific requirements

Setting up your product card

An overview of the search components and flow

Overview

Adding a way to open the SearchModal

Configuring the DepictProvider for your search page

Adding the SearchPage to your site

Complete - search functionality added

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

Choosing a source of truth

Adding the CategoryPage to your site

Complete - product listing pages added

Rendering recommendations in a slider

Rendering recommendations in a grid

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

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 integrating with the plain JavaScript flavour of the Depict UI

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

Setting up JSX

Creating a search page

Configuring the search provider

Configuring the category provider

Complete - product listing pages

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

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

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

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

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

Looks slider grid

Browser compatibility

Customising price formatting

SCSS styling documentation

React ui

Js ui

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.

Data ingestion

​Setup steps

Setup steps