Section reference › Pricing & commerce

Product page `"type": "product-detail"`

The top of a shop product page: photo gallery, name, rating, price, colour and size pickers, quantity and add-to-cart button, perks, and Details / Specifications / Reviews tabs. Use it on pages generated from your product list.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "product-detail",
  "product": "@item",
  "freeOver": 100,
  "reviews": [
    {
      "rating": 5,
      "text": "Beautiful quality and exactly as pictured. The fabric feels expensive and the fit is spot on.",
      "name": "Hannah R.",
      "date": "Sep 12, 2026"
    },
    {
      "rating": 4,
      "text": "Lovely piece. It runs slightly large, so check the size guide before ordering.",
      "name": "Priya S.",
      "date": "Aug 21, 2026"
    }
  ]
}

Options#

Option	Type	Default	Description
`product`	object \| "@item"	—	The product to show. On a page with "each": "products" use "@item". Without a product the section renders nothing.
`reviews`	array	—	Customer reviews shown in the Reviews tab. Without them the tab says "No reviews yet."
`perks`	array	`free shipping, 30-day returns, 2-year warranty`	The small list of promises under the buy button. See the "perks" fields.
`freeOver`	number	`75`	Amount used in the default "Free shipping over ..." perk. Ignored when you set your own "perks".
`shopHref`	string	`shop.html`	Link of the middle breadcrumb item.
`shopLabel`	string	`Shop`	Text of the middle breadcrumb item.
`cartHref`	string	`cart.html`	Where the "Add to cart" button goes.

Fields of each entry in `product`#

Option	Type	Default	Description
`slug`	string	—	Unique id (lowercase, dashes). Becomes the page file name, e.g. product-camel-wrap-coat.html.
`name`	string	—	Product name, shown as the page H1. Required.
`category`	string	—	Small label above the name.
`price`	number \| string	—	A number is shown with the demo currency and two decimals (420 becomes $420.00). A string is shown as written ("$420").
`oldPrice`	number \| string	—	Previous price, shown crossed out.
`image`	string	—	Main photo.
`gallery`	array of strings	—	Extra photos. When there are any, thumbnails appear under the main photo.
`badge`	string	—	Label on the main photo, e.g. "New season" or "-20%".
`rating`	number	—	Star rating out of 5, e.g. 4.8.
`reviews`	number	—	Number of reviews shown next to the stars and on the Reviews tab. (The review texts go in the section's "reviews" option.)
`colors`	array	—	Colour swatches: [{"name": "Camel", "hex": "#b88a5a"}].
`sizes`	array of strings	—	Size buttons, e.g. ["S", "M", "L"].
`description`	string	—	Short paragraph next to the photos.
`long`	string \| array of strings	—	Longer text in the Details tab (one paragraph per array entry).
`features`	array of strings	—	Check list in the Details tab.
`specs`	array of [label, value] pairs	—	Specifications tab, e.g. [["Fabric", "100% wool"], ["Care", "Dry clean only"]]. Without it the tab is hidden.
`sku`	string	—	Stock code shown in small print.

Fields of each entry in `reviews`#

Option	Type	Default	Description
`rating`	number	—	Stars, 1 to 5. Default 5.
`text`	string	—	The review.
`name`	string	—	Reviewer name.
`date`	string	—	Date shown after the name (optional).

Fields of each entry in `perks`#

Option	Type	Default	Description
`icon`	string	—	Bootstrap Icons name, e.g. "truck".
`text`	string	—	Short promise, e.g. "Free delivery in 2 days".

Tips#

This section is meant for generated pages. Put your products in data.json under "products" and create pages/product.json with "each": "products" and this section. The build makes one page per product: product-<slug>.html.
"@item" means "the product this page is being built for". A products section with "items": {"$data": "products"} then links each card to its page automatically.
The breadcrumb is Home > shopLabel > product name. Home links to index.html.
The common options (id, tone, padding...) are ignored by this section; only "hidden" works.
The cart is a demo: "Add to cart" is a link to cartHref and does not store anything. Connect a real shop system for checkout.

Editing it in the HTML files#

Product pages are generated from data.json, so edit the product there and rebuild. In a built page the name is h1.pd-title, the price is in .pdp-price, the photos are in .pdp-gallery (each thumbnail button's data-src is the large image) and the tabs are in .pdp-tabs.

Where it's used#

Open these pages in template/ to see it working:

Coffee Shop: template/cafe/product-house-espresso.html (source src/demos/cafe/pages/product.json)
Gym & Fitness: template/gym/product-grass-fed-whey.html (source src/demos/gym/pages/product.json)
Interior Design: template/interior-design/product-terra-vase-set.html (source src/demos/interior-design/pages/product.json)
Fashion Store: template/fashion-store/product-camel-wrap-coat.html (source src/demos/fashion-store/pages/product.json)

Product page "type": "product-detail"