CommerceProductDetail
Product detail layout: imagery on the left, product info on the right (name, price, description, option controls, and add-to-cart actions), stacked on mobile. Presentational and theme-driven.
Bags
Canvas Tote
$48.00
A roomy everyday tote in heavyweight natural canvas with reinforced webbing handles and a flat interior pocket. Built to soften and patina with use.
Size
- Shipping
- Free over $75 · 2–4 business days
- Returns
- 30-day returns, free in-store
Installation
pnpm dlx @hex-core/cli add commerce-product-detailAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | ReactNode | — | Product name (renders as the page <h1>). |
pricerequired | ReactNode | — | Display price, e.g. '$48'. |
mediarequired | ReactNode | — | Product imagery (gallery / hero image), left column on ≥lg. |
eyebrow | ReactNode | — | Optional eyebrow above the name (brand, category). |
description | ReactNode | — | Product description / marketing copy. |
options | ReactNode | — | Option selectors (size, color, quantity) — pass your own controls. |
actions | ReactNode | — | Primary actions (add to cart / buy now) — pass <Button>s. |
details | ReactNode | — | Extra details (shipping, materials, an accordion) shown below the actions. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use for the product detail page (PDP). Put the gallery in media, variant selectors in options, and an add-to-cart Button in actions. Wire selection/cart state through those controls.
When not to use
Don't use for a list of products (use commerce-product-grid) or a cart (use commerce-cart). Don't render multiple <h1>s — the product name is the page heading.
Common mistakes
- Hard-coding option selectors into the block — pass them as the options slot so selection state stays with the consumer.
- Missing alt text on the gallery image describing the product.
- Putting price in the name field — keep price separate so its larger styling applies.
Accessibility
The product name renders as the page <h1>. The block is layout; option controls and buttons you pass must carry their own labels. Gallery images need descriptive alt text.
Token budget: 700
Verified against @hex-core/components@1.12.0