Turbo's product page template includes a Product Gallery feature to showcase product media.
View our Turbo Image Size Guide
Product Gallery Settings
Open Products, then Default product with the page selector.
In the left sidebar, click Product information to open its settings.
For the product images themselves, use 1024 x 1024px dimensions. We recommend using images that are the same size and image aspect ratio to maintain consistency.
Product Media Position
Select a Product media position to display your product image gallery on the Left or Right side of the product page.
Adjust Product Media Height
Enable Set height of product media, then adjust the Product media height slider to restrict the height of the product media within a range of 200 - 800px.
More information on videos, 3D models, and images with Shopify's Product Media
Show 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.
Show Arrows
When enabled, the Show arrows setting will display subtle previous/next arrows on the product gallery when hovered over the image.
Select the color for these arrows in Theme Settings > Colors > Layout > Slideshow arrow. You can also choose an arrow style under Colors > Layout > Arrow style.
Enable Lightbox
The Enable lightbox setting will allow your customers the ability to open up a modal window viewer for the product images.
Magnify Product Images On Hover
Enable Magnify product images on hover and provide customers with a zoom feature to get a closer look at the product images.
Transition and Gallery Speed
Select Slide or Fade with the Transition dropdown.
Use the Gallery speed slider to control the display duration for each slide. To disable autoplay altogether, move the slider to the left to set it at 0.
Thumbnails position
Select Left, Right, or Bottom from Thumbnails position to control the position for additional media. The left and right positions will display vertically while the bottom position displays horizontally.
Enable Thumbnail Slider
Gather the additional media with a slider by activating Enable thumbnail slider. This will display when you have 7 or more thumbnail images.
