Views:

There are three different product gallery layout options available to use on Storbie.

They are:

  • Column

  • List

  • Table  

These gallery options can be changed on an individual product gallery level and as a site-wide default.

Below is a breakdown of the three different product gallery layouts and the custom options each offers:
Column Modifiers
These settings apply to page galleries that are using a column layout, in either grid or masonry format.
 
LAYOUT
Display in a masonry layout - Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn't have fixed-height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps.

A screenshot of a website<br><br>Description automatically generated
 
 
Auto-align contents  – Vertically align products for a cleaner, more symmetrical layout.

Display a shadow around each item – The product item has a shadow box around it
A screenshot of a screen<br><br>Description automatically generated

Hide the View button - The view details button does not display on the product gallery view

A screenshot of a screenshot of a screen<br><br>Description automatically generated

Use the List layout on mobile – on mobile view the product items are shown in list view
A screenshot of a computer screen<br><br>Description automatically generated
TYPOGRAPHY
Centre-align the text - The product’s title is centered instead of left aligned
A screenshot of a screenshot of a pair of hands holding peas<br><br>Description automatically generated
Show titles in a bold font - Product title font is formatted as bold

A screenshot of a screenshot of a plant<br><br>Description automatically generated

Show titles in a larger font - the product name appears lager

A screenshot of a website<br><br>Description automatically generated

Show titles in theme colour - The name text renders in your site's theme colour
A screenshot of a website<br><br>Description automatically generated
Overlay the title on the image - the product title is displayed in an overlay across the bottom of the product image 


Hide the description text – if the product has a description summary this will be hidden

IMAGES
Hide all images – No product images are displayed in the product gallery view
A screenshot of a web page<br><br>Description automatically generated
Light grey background for images - Clear cut product images have a grey background

A screenshot of a phone<br><br>Description automatically generated

Show a placeholder if there is no image - A grey placeholder image is shown, if the product has no image assigned
A screenshot of a web page<br><br>Description automatically generated
List Modifiers
These settings apply to pages galleries that are using the List layout.
 
LAYOUT
Display a shadow around each list item - The product item has a shadow box around it

A screenshot of a computer<br><br>Description automatically generated

Smaller fixed-width thumbnail images – the product image size is reduced in the product gallery view
 
A screenshot of a computer<br><br>Description automatically generated
Hide the View button - the view details button does not display on the product gallery view
A screenshot of a website<br><br>Description automatically generated

Use the Two Column layout on mobile - On small devices such as mobile, the list view shows as two columns
A screenshot of a computer<br><br>Description automatically generated
TYPOGRAPHY
Show titles in a bold font - Product title font is formatted as bold

A collage of images of food<br><br>Description automatically generated
Show titles in a larger font - Product titles have a larger font size
A collage of images of food<br><br>Description automatically generated
IMAGES
Hide all images – Hide product images in the page gallery view

A white rectangular object with black lines<br><br>Description automatically generated

Light grey background for images - Clear cut product images have a grey background
A group of objects on a white background<br><br>Description automatically generated

Show a placeholder if there is no image – the placeholder image is removed for products with no image assigned. A white square with black lines<br><br>Description automatically generated with medium confidence
Table Modifiers
These settings apply to pages galleries that are using the Table layout.

Show titles in a bold font - Product title font is formatted as bold


Show titles in a larger font - Product titles have a larger font size