Shop-the-Look (vviinn-shop-the-look)

Interactive "Shop-the-Look" widget that enables visual product search on fashion/interior images. Users can click on hotspots (detected objects) to discover similar products and see recommendations in a modal.

Supports multiple images with swiper navigation, responsive design, and customizable styling.

Generated from vviinn-widgets 2.228.0, the latest release when these docs were built. If you pin an older version, some of these may not be in it yet — check the Changelog.

Try the properties live in the Playground.

Properties

Set them as HTML attributes.

api-path

API endpoint URL (optional, defaults to production)

Type: string

campaign-id

Campaign ID for visual search requests

Type: string · Default: ""

css-url

URL to external CSS file for custom styling

Type: string · Default: null

currency-sign

The currency sign is displayed after the price

Type: string

height

Height of the widget in pixels

Type: number · Default: 500

image-resolution-width

Resolution width of the recommendation tile and product card images

Type: number · Default: PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH

image-urls

Comma-separated list of image URLs to display in the widget

Type: string · Default: ""

locale

Locale for text localization

Type: "de-DE" | "en-US"

number-locale

Locale for number formatting. Falls back to locale

Type: string

product-details-new-tab

Open product links in new tab

Type: boolean · Default: false

product-details-redirect

Enable product detail redirects on click

Type: boolean · Default: true

show-cropper

Enable cropper mode for manual area selection

Type: boolean · Default: false

show-multiple-images

Show multiple images: swiper on mobile, hover on desktop in product cards

Type: boolean · Default: false

token

Vviinn customer's token (required)

Type: string

upload-mode

Enable upload mode to allow users to upload their own images

Type: boolean · Default: false

widget-style

Style variant for corner styling — 'rounded' for rounded corners, 'cornered' for sharp corners

Type: "cornered" | "rounded" · Default: "rounded"

Events

Listen with document.addEventListener(). The pages under Events describe the data each event carries.

Event	Description
vviinnShopTheLookDetectedObjectClick	Emitted when a detected object/hotspot is clicked. Contains the object ID and first recommended product.
vviinnShopTheLookModalClose	Emitted when the recommendation modal is closed by the user.
vviinnShopTheLookProductClick	Emitted when a product in the recommendation modal is clicked. Contains the product details and detected object ID.

Shadow Parts

Style these elements with vviinn-shop-the-look::part(name): Styling Specific Elements.

Part	Description
shop-the-look-actions-container	The actions container wrapping the upload button
shop-the-look-result-image-container	The image container inside a tile
shop-the-look-result-item	A single tile in the grid view
shop-the-look-results-grid	The tiles grid in the grid view
shop-the-look-upload-button	The upload button element
shop-the-look-upload-button-icon	The upload button icon wrapper
shop-the-look-upload-button-text	The upload button text wrapper

CSS Custom Properties

Set them on vviinn-shop-the-look or a parent element: CSS Variables.

Property	Description
--shop-the-look-product-card-width	Width of the product card in the detail view. Defaults to 160px on desktop and 120px on mobile — a set value applies to both.
--shop-the-look-results-grid-width	Width of the tiles grid in the grid view — tiles scale with it. Defaults to 140px.