Media gallery

Product page

Update | Gallery styles and the sticky sidebar were added in v2.11.0 on Nov 10, 2022. See our changelog and theme update guide to learn more.

Customize the size and layout of your product media by changing the product Media settings. You can also make the product details Sticky, so they remain fixed in-place when scrolling down.

STEPS

In your theme editor (Customize):

1. Click on the Product overview section to open the settings.

2. (Optional.) For long product forms, uncheck the Enable sticky sidebar checkbox so customers can easily access product details and buy buttons when they scroll down.

   The default "sticky" sidebar keeps the product form in view when scrolling.

3. Select a Gallery style to change the layout of your product media.

   Grid displays product images in two columns. See Minimal demo example.

   List displays product images in on column. See Clean demo example.

   Thumbnails displays all product images as small clickable images next to the main product image. See Chic demo example.

4. Select the Gallery size of your product media. Either Small, Medium, or Large.

   The width of the product details will increase or decrease according the gallery size.

   Set the Mobile gallery style. Either Thumbnails or Carousel.

5. To make all product media a uniform shape, set the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

   The default Natural setting displays the original orientation of your product media.

   
6. Uncheck the Enable video looping checkbox to make product videos play a single time after customers click play.

   See Shopify's Product media ↗ guide to learn more.

7. Uncheck the Product lightbox option if you don't want your product images to appear in a full-size "lightbox" when clicked.

8. Click Save.

Settings reference

Click the Product overview section to find the following settings.

Setting	Description
Gallery style	Grid displays product images in two columns. See demo example. List displays product images in on column. See demo example. Thumbnails displays all product images as small clickable images next to the main product image. See demo example.
Gallery size	Change the size of the thumbnail product images. Select Small, Medium, or Large. The width of the product details will increase or decrease according the gallery size.
Mobile gallery size	For mobile devices, display product media as Thumbnails or in a Carousel.
Enable video looping	After a video starts playing, choose to loop the video continuously.
Product lightbox	Allow visitors to view product images in a full-size popup view.
Image aspect ratio	Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.

Setting	Description
Enable full-width	Display your product page content across the entire webpage without side margins.
Show image thumbnails	Show additional product images as thumbnails that visitors can click to view. Toggle off this option to show product media in a single column.
Thumbnail position	Display product images thumbnails either Below the product image or Beside the product image.
Thumbnail size	Choose to display the product image thumbnails as Small, Medium, or Large.
Thumbnail aspect ratio	Make product media thumbnails a uniform shape by cropping them all as Square, Landscape, or Portrait. Select Natural to display product media with the original shape as uploaded.
Enable video looping	For your products that have product videos added as media, make videos loop continuously after customers click to play them.

---

Related links

Breadcrumbs Navigation buttons