Commerce & Orders

Product Detail

The screen that opens when a customer taps a product in Product Card. Gets all its content from navigation params — it doesn’t fetch anything itself. Deliberately simpler than Menu Item Detail (no option groups, allergens, or nutrition): just image, title, price, description, tags, stock, quantity, and add to cart.

Flow positionProduct Card → Product Detail → Cart

Reached by tapping a product; add-to-cart routes onward to Cart.

Runtime datanavigationParams · onAddToCart

Product fields arrive entirely through navigation params from Product Card.

TierFree

Available on all plans.

What it does

Four things worth knowing

Variants and sizes

Optional color/style swatches (each with their own photo) and size chips. Selecting either updates the cart key so different options are tracked as separate line items.

Stock-capped quantity

The quantity stepper is capped at available stock client-side, for UX only — the backend’s atomic order write is the real source of truth and rejects oversold orders.

Add-to-cart confirmation sheet

After adding to cart, a bottom sheet confirms the item and offers “Continue shopping” (back to shopScreenId) or “View cart” (to cartScreenId).

Two layouts

hero (full-bleed image with overlaid back button) or classic (image inline, back button above it).

Placeholder note: without navigation params (e.g. viewed directly in the builder canvas), the screen shows a hint that it displays real data only when reached from Product Card.

Builder setup

Find it, drop it, wire the flow

Where to find itAdd it to your product screen

Component picker → Commerce & Orders → Product Detail.
Place it on its own screen, then set that screen as Product Card’s detailScreenId.
Set cartScreenId and shopScreenId for the post-add-to-cart sheet.

Before you publishThree things to check

Navigation wiring: cartScreenId and shopScreenId both set.
Confirm orderButtonLabel and quantity selector match your store’s tone.
If products use variants/sizes, verify each variant has its own photo.

Category: Commerce & OrdersComponent: BuilderProductDetailRegistry key: product-detailFlow: Product Card → Product Detail → Cart

Props

Data, navigation, and content

Prop	Type	Default	Description
`navigationParams`	object	Injected by AppPlayer	All product data (title, price, image, tags, stock, variants, sizes) arrives here from Product Card.
`layout`	`hero` / `classic`	`hero`	Image treatment and back button placement.
`onAddToCart`, `onGoBack`, `onScreenNavigate`	function	Injected by AppPlayer	Callbacks for cart updates, back behavior, and screen routing.
`cartScreenId`, `shopScreenId`	screen-select	`”`	“View cart” and “Continue shopping” destinations in the confirmation sheet.
`showQuantitySelector`, `showOrderButton`, `showStock`	boolean	`true`	Feature visibility toggles.
`orderButtonLabel`	string	`’Add to cart’`	CTA button copy.
`lowStockThreshold`	number	`5`	Stock count at or below which the low-stock banner appears.

Toggles & colours

Make it yours

Most visual customisation lives in Builder style props. Keep component defaults in sync with registry defaultProps when updating branding tokens.

Prop	Default	What it controls
`backgroundColor`, `cardBackgroundColor`	Theme defaults	Screen and CTA bar surfaces.
`titleColor`, `priceColor`, `descriptionColor`	Theme defaults	Text hierarchy.
`accentColor`	Theme defaults	Selected variant/size border highlight.
`orderButtonColor`, `orderButtonTextColor`	Theme defaults	Add-to-cart CTA styling.
`cartConfirmBackgroundColor`, `cartConfirmIconColor`, `viewCartButtonColor`	Theme defaults	Add-to-cart confirmation sheet styling.
`stockLowColor`, `stockOutColor`	`#F59E0B`, `#EF4444`	Stock banner colors.
`titleFontSize`, `padding`, `fontFamily`	Component defaults	Typography scale and spacing.

Tips

Common mistakes to avoid

Client-side stock cap isn’t the final word

The quantity selector limits to available stock for UX, but the backend’s atomic order write can still reject an order if stock changed since the screen loaded.

Variants need their own photos

Colors and styles can’t be simulated from one photo — each variant needs a real, separate image uploaded in Admin Product Manager.

Always set both confirmation destinations

Without shopScreenId, “Continue shopping” falls back to a plain back navigation instead of returning to the catalog.

Pair with Product Card, not Menu Item Card

Product Detail reads the navigation param shape Product Card sends (variants, sizes, stock) — pairing it with Menu Item Card will leave those fields empty.