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 pages 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.
/msdyn_blobfile/$value)
Display a shadow around each item – The product item has a shadow box around it/msdyn_blobfile/$value)
Hide the View button - The view details button does not display on the product gallery view
/msdyn_blobfile/$value)
Use the List layout on mobile – on mobile view the product items are shown in list view
/msdyn_blobfile/$value)
TYPOGRAPHY
Centre-align the text - The product’s title is centered instead of left aligned
/msdyn_blobfile/$value)
Show titles in a bold font - Product title font is formatted as bold
/msdyn_blobfile/$value)
Show titles in a larger font - the product name appears lager
/msdyn_blobfile/$value)
Show titles in theme colour - The name text renders in your site's theme colour
/msdyn_blobfile/$value)
Overlay the title on the image - the product title is displayed in an overlay across the bottom of the product image
/msdyn_blobfile/$value)
Hide the description text – if the product has a description summary this will be hidden
/msdyn_blobfile/$value)
IMAGES
Hide all images – No product images are displayed in the product gallery view
/msdyn_blobfile/$value)
Light grey background for images - Clear cut product images have a grey background
/msdyn_blobfile/$value)
Show a placeholder if there is no image - A grey placeholder image is shown, if the product has no image assigned
/msdyn_blobfile/$value)
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
/msdyn_blobfile/$value)
Smaller fixed-width thumbnail images – the product image size is reduced in the product gallery view
/msdyn_blobfile/$value)
Hide the View button - the view details button does not display on the product gallery view
/msdyn_blobfile/$value)
Use the Two Column layout on mobile - On small devices such as mobile, the list view shows as two columns
/msdyn_blobfile/$value)
TYPOGRAPHY
Show titles in a bold font - Product title font is formatted as bold
/msdyn_blobfile/$value)
Show titles in a larger font - Product titles have a larger font size
/msdyn_blobfile/$value)
IMAGES
Hide all images – Hide product images in the page gallery view
/msdyn_blobfile/$value)
Light grey background for images - Clear cut product images have a grey background
/msdyn_blobfile/$value)
Show a placeholder if there is no image – the placeholder image is removed for products with no image assigned./msdyn_blobfile/$value)
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
/msdyn_blobfile/$value)
Show titles in a larger font - Product titles have a larger font size
/msdyn_blobfile/$value)
Below is a breakdown of the three different product gallery layouts and the custom options each offers:
Column Modifiers
These settings apply to pages 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.
Display a shadow around each item – The product item has a shadow box around it
Hide the View button - The view details button does not display on the product gallery view
Use the List layout on mobile – on mobile view the product items are shown in list view
TYPOGRAPHY
Centre-align the text - The product’s title is centered instead of left aligned
Show titles in a bold font - Product title font is formatted as bold
Show titles in a larger font - the product name appears lager
Show titles in theme colour - The name text renders in your site's theme colour
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
Light grey background for images - Clear cut product images have a grey background
Show a placeholder if there is no image - A grey placeholder image is shown, if the product has no image assigned
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
Smaller fixed-width thumbnail images – the product image size is reduced in the product gallery view
Hide the View button - the view details button does not display on the product gallery view
Use the Two Column layout on mobile - On small devices such as mobile, the list view shows as two columns
TYPOGRAPHY
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
IMAGES
Hide all images – Hide product images in the page gallery view
Light grey background for images - Clear cut product images have a grey background
Show a placeholder if there is no image – the placeholder image is removed for products with no image assigned.
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