Clicking a look opens a drawer showing the products in a look.

Want to display looks for a certain product in a slider or grid? This guide is for you, who have already integrated with @depict-ai/react-ui.

  1. Put together some great looks on app.depict.ai.
  2. Make sure you’re at least on version 4.7.0 of @depict-ai/react-ui.
  3. Add the component to your product detail page like this (don’t forget to pass in your actual product id).
<LooksSliderOrGrid productId="1015_9999-XXL" />

If you want the looks to be in a grid instead, you can do this:

<LooksSliderOrGrid productId="1015_9999-XXL" gridOptions={{ viewMoreButton: { text: "View more" } }} />

Looking for the reference?