Depict UI

The Depict UI allows you to integrate with our systems quickly.

We highly suggest trying out our intuitive and efficient UI SDK before committing to building your own - it allows you to get up and running in minutes. We’ve designed it with your productivity in mind, aiming to deliver a high-quality user experience with less development time than a custom build would require.

There are multiple advantages to using our UI components:

• They are intuitive and well-thought-out, avoiding your users getting frustrated.
• We have extensive experience in the fashion industry, and our UI choices reflect that. Depict UI gives you a smooth shopper experience out of the box, that makes them want to buy now and come back later.
• We deal with all the intricacies of frontend state management, UX, and interactions with the backend and ensure the UI is always on point. This saves you time and money and lets you focus on what matters: your brand and your products.

Key capabilities

• Dedicated: The Depict Search UI SDK was built for modern eCommerce platforms. It follows all the industry’s standards for building a best-in-class search functionality.
• Personalized: The SDK uses Depict’s proprietary recommendations AI to offer personalized product suggestions based on user activity.
• Customizable: The SDK offers styling and layout customizations. You can customize your application by overriding our default SCSS boilerplate. Product cards are fully custom (in code). For more information, see Modifying styling.
• Seamless navigation: The Search UI SDK handles dynamic routing to search result pages with minimal routing configuration.
• Best practices: The Depict UI SDK follows the industry’s best practices on responsiveness, accessibility, and performance.

Full list of supported features

Click here to expand

These are features you can expect to get up and running out-of-the-box or with minimum developer work using the Depict UI:

General

• Easy access to new features (update the SDK)
• Provide your own product card (in code - fully customisable) and styling
• Easy to add content blocks to search and category pages

Search

• Sorting and filters
  • Facet counts
  • Dynamic filters
  • Mobile-friendly (easy to navigate on mobile - mobile-first design choices
  • Hierarchical filters (for categories)
  • Color filter with swatches
  • Easy to scan, yet compact size filter
  • Checkbox, range slider and radio-button filters
  • Searchable filters when many options
  • URLs dynamically update to filters (for sharing links)
  • Sophisticated heuristics on when filters are cleared/kept
  • Accessible filters (keyboard navigation)
• Search Modal
  • Content Search
  • Query, category, & product suggestions
  • Instant results preview
  • Search History
  • Accessibility features (keyboard navigation)
• Search results page
  • Content Search
  • PLP results
  • Smooth animations and transitions
  • Search recommendations
  • Scroll restoration
  • Infinite scroll pagination
  • Content block support (in code)

Product Listing Pages

• Sorting and filters
  • Facet counts
  • Dynamic filters
  • Mobile-friendly (easy to navigate on mobile - mobile-first design choices
  • Hierarchical filters (for categories)
  • Color filter with swatches
  • Easy to scan, yet compact size filter
  • Checkbox, range slider and radio-button filters
  • Searchable filters when many options
  • URLs dynamically update to filters (for sharing links)
  • Heuristics on when filters are cleared/kept
  • Accessible filters (keyboard navigation)
• Smooth animations and transitions
• Breadcrumbs
• Quicklinks - downwards and sideways navigation
• Scroll restoration
• Infinite scroll pagination
• Content blocks (both in-code and nocode in depict portal)

Recommendations

• API wrapper
  • Can send one product if you want recommendations based on one product, or
  • send two products if you want recommendations based on more products, or
  • Send “landing_page” if you want landing page recommendations
  • and it will calculate which endpoint to call. etc., automatically.
  • Guarantees you get a list or an empty list of recs
• Pre-built grid and slider components
  • “View more” button
  • Snapping slider
  • Server-side rendering for the recommendation grid

Tracking (DPC)

• Easy impression and Depict attribution tracking for feeding back data to Depict

Supported frameworks

We currently support the following frameworks:

Framework	Description	Relevant links
Vanilla JS	A vanilla Javascript SDK that also can be integrated with other frontend frameworks	Integration guide for vanilla JS
React	A React SDK that can work with client-side frameworks as well as server-side frameworks (like Next.js)	Integration guide for React users

👍 Customizing the default UI

We provide ways to customize the default UI so that it integrates smoothly with the rest of your website.