Product Previews

Product Card

Product Card usage blocks

Usage

ProductCard Vertical

The most popular option for presenting detailed product information in a group.

LuiProductTileBasic

API Reference

Prop	Default	Type
`productId`		`string`
`variantId`		`string`
`href`		`string`
`image`		{ type: "image"; sources: { provider: string; src: string; width?: number \| undefined; height?: number \| undefined; responsive?: "static" \| "mobile" \| "desktop" \| undefined; focalPoint?: [number, number] \| undefined; }[]; alt?: string \| undefined; meta?: any; placeholder?: ["solid" \| "thumbhash", string] \| undefined; } \| { type: "video"; sources: { provider: string; src: string; width: number; height: number; length?: Duration \| undefined; format?: string \| undefined; responsive?: "static" \| "mobile" \| "desktop" \| undefined; }[]; alt?: string \| undefined; meta?: any; preview?: { type: "image"; sources: { provider: string; src: string; width?: number \| undefined; height?: number \| undefined; responsive?: "static" \| "mobile" \| "desktop" \| undefined; focalPoint?: [number, number] \| undefined; }[]; alt?: string \| undefined; meta?: any; placeholder?: ["solid" \| "thumbhash", string] \| undefined; } \| undefined; }
`title`		`string`
`price`		`Money`
`imageAspectRatio`	`'1/1'`	`"3/4" \| "1/1"`
`flags`	`[]`	`{ text: string; variant: "promo" \| "sale" \| "new"; }[]`
`colors`	`[]`	`Swatch[]`
`selectedColor`	`void 0`	`Swatch`
`colorPosition`	`'bottom'`	`"top" \| "bottom"`
`brand`	`void 0`	`string`
`brandHref`	`void 0`	`string`
`titleLines`	`1`	`number`
`subtitle`	`void 0`	`string`
`strikethroughPrice`	`void 0`	`Money`
`unitPrice`	`void 0`	`{ price: Money; quantity: Measurement; reference: Measurement; }`
`showAddToCart`	`true`	`boolean`
`isAddToCartLoading`		`boolean`
`isAddToCartDisabled`		`boolean`
`color`	`'default'`	`"default" \| "on-light" \| "on-dark" \| "on-bright"`
`fallbackColor`	`void 0`	`UserColor`
`showFlags`	`true`	`boolean`
`showBrand`	`true`	`boolean`
`showProductDescription`	`true`	`boolean`
`rating`	`void 0`	`number`
`imageFit`	`'fit'`	`"fit" \| "fill"`

Event	Type
`addToCart`	`[productId: string, variantId: string]`

TODO

Product Slider

The ProductSlider allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products.