Buy Box
Product purchase panel: brand and title, rating line, price with compare-at, colour swatches and size pills, stock state, delivery estimate from a fixed now, quantity, Add to cart (lit key) and Buy now, and a trust row.
Preview
Pebble
Ridgeline insulated jacket
$86.00was $115.00−25%
Only 2 left
Free delivery Thu, Nov 5 · order within 3 h 20 min
- Free 30-day returns
- Secure checkout
- 2-year warranty
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / brand | string | — | Product name (names the panel) and brand eyebrow. |
| rating | { value: number; count: number } | — | Stars, average and review count (a button; see onReviewsClick). |
| colors | { value; label; swatch }[] | — | Colour swatches; swatch is any CSS colour (tokens). |
| sizes | { value; label }[] | — | Size pills. |
| variants | { color; size; price; compareAt?; stock }[] | — | Price and stock per colour and size; stock 0 crosses the pill out. |
| defaultValue | { color?: string; size?: string } | first colour, no size | Initial selection. |
| now | string | — | Local time "YYYY-MM-DDTHH:MM" for the delivery date and cut-off countdown. Never read from the clock. |
| shipping | { days; cutoff; fee?; freeOver? } | { days: 2, cutoff: "15:00" } | Business days, same-day dispatch cut-off, fee and free-delivery threshold. |
| lowStockAt | number | 3 | Stock at or below which it says "Only n left". |
| maxQuantity | number | 10 | Quantity cap (also capped by stock). |
| trust | { icon: "returns" | "lock" | "shield" | "truck"; text }[] | returns, secure, warranty | Trust row under the buttons. |
| currency / locale | string | "USD" / — | Price and date formatting. |
| onAddToCart | (variant, quantity) => void | — | Add to cart (asks for a size first). |
| onBuyNow | (variant, quantity) => void | — | Buy now. |
| onReviewsClick | () => void | — | Rating line click, e.g. scroll to reviews. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.