E-commerce
The storefront path end to end: product detail, grid, cart, checkout, and order confirmation.
These compose the product components into whole screens. As with those, money arrives as raw numbers and is formatted through formatPrice, so one override changes every figure on the screen at once.
Ceramic Pour-Over Mug
Stoneware, 340ml. Fired twice for a matte finish that hides the inevitable coffee rings.
Product grid
showFilterBar is a real prop rather than being inferred from the product count — a three-item curated collection usually shouldn't offer sorting, and only you know which lists are curated.
New in
Ceramic Pour-Over Mug
-21%Linen Apron
Walnut Tray
Cotton Tea Towel
Cart
Unlike the bare CartItem component, this block does total the line items and render the summary. shippingCost defaults to 0, which shows as "Free".
Your cart (3)
Ceramic Pour-Over Mug
Color: Sand
$38.00
Linen Apron
Size: M
Checkout and confirmation
On OrderConfirmationBlock, passing estimatedDelivery is what adds the delivery row and Track order button — the same derive-don't-flag pattern the product components use.
Shipping address
Order summary
Ceramic Pour-Over Mug
Color: Sand
$38.00
Linen Apron
Size: M
$54.00
Order confirmed
Thanks for your order. We’ve sent a confirmation to your email.
Order #ORD-2481
Ceramic Pour-Over Mug
Color: Sand
$38.00
Linen Apron
Size: M
$54.00
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.