Pieces/Commerce

Catalog tile with a square product photo, a corner New tag, a heart save button, and a name, price, and star rating footer.

Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.

Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.

Urgency row with a pulsing dot that flips emerald, amber, or rose by remaining stock, a watchers count, and a thin stock bar.

Pricing card with the sale price in rose, the original price struck through, a percent-off badge, and a countdown to sale end.

Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.

Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.

Shipping threshold card with a truck icon, an amount-to-go message that flips emerald on qualifying, and a tone progress fill toward the goal.

Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.

Product row with a photo, name, price, and a pill Save button that fills with a rose heart and shows the total wishlist count when active.

Coupon entry with a tag-prefixed code field, an Apply button, and an emerald confirmation row showing the discount and amount saved.

Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.

Customer review with an initial avatar, a verified-purchase badge, five-star rating on the right, review title, and body snippet.

Shipping option picker with tone-bordered selection, a radio bullet, method icon, ETA line, and emerald price for free shipping.

Wallet-pay button row with Apple Pay, Google Pay, and PayPal in their brand colors above an or-pay-with-card divider, with the order total in the header.

Two-by-two reassurance tiles covering secure checkout, free returns, authenticity, and support, each with an icon and a short hint.

Member status card with a tone-filled crown tile, current tier and point balance, and a tone progress bar counting down to the next tier.

Amount selector for a gift card with a gift icon header, four preset value chips where the selected one fills with tone, and a custom amount row.

History strip card showing four recently viewed products as square thumbnails with their prices on a compact grid.

Recurring purchase card with a tone discount badge, a frequency dropdown, next delivery date, emerald per-order savings, and a tone Subscribe CTA.

Vertical attribute list with emerald check icons, label and value columns covering material, care, origin, and certification details.

Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.

Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.

Buy-now-pay-later card with provider header, four-dot installment timeline where paid steps fill in tone and the line progresses, plus a fineprint footer.