KAWWA Markup Pattern Library

eCommerce

Product Template

The "Product template" — which can be copied here below – groups most of the identifiable product data based on the current "h-product" microformat2 specifications, independently of the type of product you're displaying :

Product title

Product category

Main picture

Extras (new/promo)

Product description

Product info

Availability

Rating

Discount info

Old Price/Price data

Add to basket link

The order in which the product data appear in the HTML template is not relevant, as long as the CSS takes the placement changes in account.

The demonstration below is just a display of all product data. It is not a defined layout. For examples on specific displays of the product block and its style, please check the "Product catalog" or the "Product Sheet" components.