Shop
Product Card
Versatile product tile for grids and sliders with pricing and cart.
Overview
The ProductTile component serves as the primary building block for product listings across category pages, search results, and promotional sliders. It maintains consistent height regardless of content variations for grid alignment. Focus order follows accessibility best practices. The tile emits events rather than handling cart logic internally for flexible commerce backend integration. Internationalized price formatting uses the $money helper for proper locale handling.
Key Business & UX Benefits
- One tile for product image, title, price, and add-to-cart across grids and sliders.
- Consistent height keeps grids aligned and scannable.
- Sale pricing and flags support promotions without extra components.
- Event-based cart integration fits any commerce backend.
Pro-Tip from Larry: Use Product Card in grids and sliders so product listings stay consistent everywhere.
Usage
ProductCard Vertical
The most popular option for presenting detailed product information in a group.
LuiProductTileBasic
Feature List
- Flexible content: brand, title, pricing, flags, swatches
- Multiple image aspect ratios (1:1 or 3:4)
- Sale pricing with strikethrough original price
- Add-to-cart button with customizable icon variant
API Reference
| Prop | Default | Type |
|---|---|---|
productIdrequired | string | |
variantIdrequired | string | |
hrefrequired | string | |
imagerequired | ||
titlerequired | string | |
pricerequired | Money { amount, currency } | |
imageAspectRatio | 1/1 | "3/4" | "1/1" |
flags | [] | { text, variant }[] |
colors | [] | Swatch[] |
selectedColor | Swatch | |
colorPosition | bottom | "top" | "bottom" |
brand | string | |
brandHref | string | |
titleLines | 1 | number |
subtitle | string | |
strikethroughPrice | Money { amount, currency } | |
unitPrice | UnitPrice { price, quantity, reference } | |
showAddToCart | true | boolean |
isAddToCartLoading | boolean | |
isAddToCartDisabled | boolean | |
color | default | "default" | "on-light" | "on-dark" | "on-bright" |
fallbackColor | UserColor { dark, light } | |
showFlags | true | boolean |
showBrand | true | boolean |
showProductDescription | true | boolean |
rating | number | |
imageFit | fit | "fit" | "fill" |
| Event | Type |
|---|---|
addToCart | (event: "addToCart", productId: string, variantId: string): void |