Skip to content
All blocks
Commerce

Product Detail

7 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.

A block is one finished section of a page — a pricing table, a hero, a footer.

Open the full page for this block

Variant & Add-to-Cart Box

Price, variant radiogroup, quantity stepper and add-to-bag — with sold-out sizes disabled and visible rather than hidden.

Product Detail347 lines1 dep
Open the full page for this block

Product Details Accordion

Description, materials, delivery and returns in named <details> elements — no JavaScript, and the copy stays indexable while collapsed.

Product Detail156 lines1 dep
Open the full page for this block

Rating Distribution Summary

Average rating with a clickable histogram — because a 4.3 of forties and fives is a different product from a 4.3 of ones and fives.

Product Detail126 lines1 dep
Open the full page for this block

Size Guide

The panel that decides whether the parcel comes back: what the model is wearing and what previous buyers did, above a table whose inches are converted rather than maintained twice.

Product Detail227 lines1 dep
Open the full page for this block

Product Spec Split

The specification table beside the product image, with the two or three figures that decide the purchase pulled out of it.

Product Detail159 linesNo deps
Open the full page for this block

Back In Stock Form

The capture that replaces a dead sold-out button, with the honest caveat that a notification is not a reservation.

Product Detail177 linesNo deps