Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Configuring the Product Gallery on the Product Page
The Turbo theme's product page includes the option to enable and setup a 'Product Gallery' to display and show off all of your product's images. These settings allow you to configure how the your customers can interact with the product images.
You can choose the position of the gallery itself, and the thumbnail images. You can also decide whether or not you'd like to include certain functionalities such as enabling a slideshow, magnify the images, or have a lightbox popup.
For the product images themselves, our recommended image size is 1024 x 1024px. We recommend using images that are the same size and image aspect ration to maintain consistency.
View our Turbo Image Size Guide
In order to configure the Product Gallery settings for the Product Page, head into Customize > choose 'Product Pages' in the drop-down page selector. Your theme editor on the left will then update with all the Product Page Settings, including the Product Gallery.
Product Gallery Settings
These settings are for configuring your product page gallery!
Show arrows on product gallery
When enabled, the 'show arrows on product gallery' setting will display subtle previous/next arrows on the product gallery when hovered over the image.
You can select the color for these arrows under Customize > Theme Settings > Colors > Layout > Slideshow arrow. You can also choose an arrow style under Colors > Layout > Arrow style:
Magnify product images on hover
If you'd like your customers to be able to zoom in closer on the product images, you can enable the 'magnify product images on hover' which will zoom in on the image on hover.
Enable product gallery popup
The 'enable product gallery popup' setting will allow your customers the ability to open up a 'lightbox' for your product images and click through them.
Enable product gallery slideshow
If you would like the images in your product gallery to automatically transition, you can select the 'enable product gallery slideshow' setting.
Gallery transition
If you've enabled the product gallery slideshow, you can select your 'gallery transition' to be either slide or fade.
Gallery position
You can choose the 'gallery position' to either display your product image gallery on the left side of the product page, or the right.
Show product gallery thumbnails
If you would like to display all of your product images, you can select the 'show product gallery thumbnails' setting to display the images as thumbnails.
Thumbnail position
If you've enabled the thumbnails, you can choose where you'd like to position them! Choose from left, right, bottom (grid), or bottom (slider). The left and right positions will display vertically. The bottom positions display horizontally. For the bottom (slider) option, the slider will kick in when you have 7 or more thumbnail images.
Examples
-
Demo Shop Examples
Here's how we set up the Product Page 'Product Gallery' in our demo shops for Turbo!
-
Portland
Product Gallery SettingsShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery slideshow - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom
-
Seoul
Product Gallery SettingsEnable product gallery popup - enabled
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - left
-
Florence
Product Gallery SettingsShow arrows on product gallery - enabled
Enable product gallery popup - enabled
Gallery position - left
show product gallery thumbnails - enabled
Thumbnail position - left
-
Dubai
Product Gallery SettingsShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery popup - enabled
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom (slider)
-
-
Additional Examples
Example 1
Product Gallery SettingsShow arrows on product gallery - enabled
Magnify product images on hover - enabled
Enable product gallery popup - enabled
Gallery position - right
Show product gallery thumbnails - enabled
Thumbnail position - bottom
Example 2
Product Gallery SettingsMagnify product images on hover - enabled
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - right
Mobile layout
When viewed on a mobile device, all of your product gallery settings will remain!
