# Product Layouts

The below layout options are available when setting up your Categories. These only apply t Product layout, and not to Collections, sub Categories, or other content.

## Grid

### 2 Column

A simple two column layout of Products.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/2ekimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/2ekimage.png)

### 3 Column

A simple three column layout of Products.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/48Rimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/48Rimage.png)

### 4 Column

A simple four column layout of Products.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/UXQimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/UXQimage.png)

## List

### Standard List

Sets the Category to be in list view. This will display the Product Summary on the Product Listing Page.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/UEFimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/UEFimage.png)

### Compact List

Sets the Category to be in a compact list This will display the Product Summary on the Product Listing Page, and also split out the Variants for immediate purchase from the Product Listing Page.

<p class="callout info">This is ideal for Products for simple options, e.g. sizing, or where you expect a Customer to purchase multiple items from the same Product Listing Page</p>

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/QOyimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/QOyimage.png)

## Advanced

### 3 Column (first large)

A three column layout, with the first Product displayed at double height.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/JAQimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/JAQimage.png)

### 4 Column (first large)

A four column layout, with the first Product displayed at double height.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/Q1jimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/Q1jimage.png)

### 3 Column (original aspect)

A three column layout, which will retain the original aspect ratio of the uploaded image without cropping.

### 4 Column (original aspect)

A four column layout, which will retain the original aspect ratio of the uploaded image without cropping.

## Funky

### Funky (alternating)

An alternating layout, which moves between two and three column layouts.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/oEqimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/oEqimage.png)

###   
Mega-Funky (mixed)

The largest variety of layouts in a single view; this will combine a mix of all other layouts to break up the page.

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/scaled-1680-/ERPimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2025-12/ERPimage.png)