Product page layout options

Use Pipeline's product page layout controls to customize the look and design of your product pages.

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:

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:

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:

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:

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:

Image width

Half

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

Half increases Product Details column

Wide

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

Image spacing

Adjust the whitespace around images to increase or reduce spacing:

Increased spacing around images in Grid view

Mobile Layout

Pipeline includes multiple layout options for mobile devices to choose from.

Carousel

A clean minimal design to swipe through product images:

Showcase without thumbnails

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

Showcase with horizontal thumbnails

Displays the thumbnails below the carousel with additional navigation: