# Product page layout options

> Introduced in Pipeline 6.3

### Stacked

Display large product images on the left column, customers can scroll through images while the right column containing the product form and detailed information remains stick in view:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FjH1ASxJ711eeor3R86Mh%2Fstacked3.gif?alt=media&#x26;token=d6f65e81-9eab-46c6-a88c-ca88f8f0ce36" alt=""><figcaption></figcaption></figure>

### Grid

Showcase your product images in this modern Grid design layout. Two images per row with two columns are displayed. Similar scrolling effect to the Stacked option where the product form and details remain in view while the shopper is viewing product images:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2F2DycMrAF3sDmyk2Q7wXa%2Fgrid.gif?alt=media&#x26;token=ebb03822-4064-4c86-a0f1-2f71af430dd7" alt=""><figcaption></figcaption></figure>

### Mosaic

Combines the Stacked view with the Grid view. Display a large-sized version of the featured product image, followed by the Grid design with two images per row and two columns:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FZZyHHkjQhamRxSrHwdJT%2Fmosaic2.gif?alt=media&#x26;token=57932726-1b4d-454f-bb07-e92dfb5d1063" alt=""><figcaption></figcaption></figure>

### Showcase with vertical thumbnails

Smaller thumbnails to showcase all product images. This style presents the thumbnail images on the left, positioned vertically. Clicking a thumbnail changes the main product image:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FLrQ1RIHYQpMaF4TBOOIQ%2Fvertical.gif?alt=media&#x26;token=56165ae2-e217-4996-8e99-95008bd2d45d" alt=""><figcaption></figcaption></figure>

### Showcase with horizontal thumbnails

A classic design to display a large version of the current featured image with small-sized thumbnails placed below the main image:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FaEN2NYJBS14mvmrT5RU7%2Fhorizontal-bottom.gif?alt=media&#x26;token=e272767a-4e07-4a3a-b669-236301865030" alt=""><figcaption></figcaption></figure>

## Image width&#x20;

#### Half

Increase the Product form area by adjusting the Image width option to **Half:**

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FqOVBsJcfOEqTMPpz97FG%2FScreen%20Shot%202022-10-03%20at%203.32.10%20PM.png?alt=media&#x26;token=b82a9021-275f-4be7-9ad2-5388f0edcaec" alt=""><figcaption><p>Half increases Product Details column</p></figcaption></figure>

#### **Wide**

For a larger area to feature the product images, choose the **Wide** option:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FgY40Kz2FP2yYAKeFQhp9%2Fwide.jpg?alt=media&#x26;token=55db7fd3-b00b-4f29-a1e9-f7b1ae1c3cca" alt=""><figcaption></figcaption></figure>

### **Image spacing**

Adjust the whitespace around images to increase or reduce spacing:&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FuGjWnvrDz9WN5Zmr7ruT%2Fimage-spacing.jpg?alt=media&#x26;token=97caaed4-ac78-4cc3-9212-905947411577" alt=""><figcaption><p>Increased spacing around images in Grid view</p></figcaption></figure>

## Mobile Layout

Pipeline includes multiple layout options for mobile devices to choose from.&#x20;

### Carousel

A clean minimal design to swipe through product images:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FaoiDta1G38AYvoaJyO6M%2Fswipe.jpg?alt=media&#x26;token=c43346d9-3d1a-432a-86ef-4aef6c095331" alt=""><figcaption></figcaption></figure>

### Showcase without thumbnails

Adds an indicator overlay with dots representing the number of product images in the carousel:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FPlDl7YbuI69Xd80LoXxD%2Fthumbs-mobile.jpg?alt=media&#x26;token=829e6122-b39c-48cd-a3c0-2778df26652b" alt=""><figcaption></figcaption></figure>

### Showcase with horizontal thumbnails

Displays the thumbnails below the carousel with additional navigation:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fd1d8sFtlSNEQuGikmLe1%2Fthumbs-bottom-mobile.jpg?alt=media&#x26;token=e798f640-052a-4419-86fc-19f9635fa0ea" alt=""><figcaption></figcaption></figure>
