Layouts for Products

Layout

Description

Standard Layout Using CSS

The image is to the left, and the cart button is to the right. The product name is also a different colour. This layout uses CSS, rather than tables, for positioning.

Compact Layout Using CSS

This has no image or description, just the name and price with a cart button and quantity field. This layout uses CSS, rather than tables, for positioning.

Standard With Image On Left

Product image is on the left with all other product details to the right.

Standard With Image On Right

Product image is on the right with all other product details to the left.

Layout For New Products

Product image is on the left with all other product details to the right. Includes a 'New' graphic.

Image On Left With Name Above Image

Product image and product name are on the left with all other product details to the right.

Allows Larger Product Images

The image is on the left, but much more space is given to it by the layout.

No Image No Description Laid Out In Single Line

A compact layout, designed to save space when images and descriptions are not required.

Vertically Centered Text With Image Above

All details are centred on the page.

Product Name And Description Only

You can use this for laying out a product like it is a message, as an alternative to using a fragment.

CSS Product Layout

Looks like a standard product layout, except this layout uses CSS, rather than tables, for positioning.