Media gallery

Product page

Customize the layout of your product page with options to change the size, position, and shape of your images.

STEPS

In your theme editor (Customize):

Click on the Product overview section to open the settings.
Select a Gallery style to change the layout of your product media for desktop and mobile screens.
Grid displays product images in two columns.
List displays product images in one column.
Thumbnails displays all product images as small clickable images next to the main product image.
(If mobile carousel selected) Choose whether to Enable looping, Show images full width, and Hide pagination dots.
(For List and Grid styles) Choose to Hide gallery media after 1, 2, or 3 rows or never.
A More media button will appear to reveal additional rows.
Select the Gallery size of your product media. Either Small, Medium, Large, Extra Large.
The width of the product details will increase or decrease according the gallery size.
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.
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.
Uncheck the Enable image zoom option if you don't want your product images to appear in a full-size "lightbox" when clicked.
Click Save.

Settings reference

Click the Product overview section to find the following settings.

Media

Setting	Description
Show featured media first	Choose to display the main image set in the product's admin settings when the page first loads. By default, the image of the first in-stock variant will be displayed. Only applies to thumbnails and carousel styles.
Gallery style	Change how the media gallery is displayed. Grid displays media in two columns. List displays media in one column. Thumbnails displays all media as small clickable images next to the main product image.
Gallery style mobile	Change how the media gallery is displayed on mobile. Carousel displays a rotating row that can be swiped through. Grid displays media in two columns. List displays media in one column.
Gallery size	Change the size of the thumbnail product images. Either Small, Medium, Large, Extra Large.
Hide gallery media after	Choose to show a More media button after a certain number of rows. Select either 1 row, 2 rows, 3 rows, or Never.
Enable video looping	After a video starts playing, choose to loop the video continuously.
Enable image zoom	Allow visitors to view product images in a larger view.
Image aspect ratio	Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Square (1:1), 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.
Media grouping	Display specific sets of images for selected variants.

Setting

Description

Show featured media first

Choose to display the main image set in the product's admin settings when the page first loads. By default, the image of the first in-stock variant will be displayed. Only applies to thumbnails and carousel styles.

Gallery style

Change how the media gallery is displayed. Grid displays media in two columns. List displays media in one column. Thumbnails displays all media as small clickable images next to the main product image.

Gallery style mobile

Change how the media gallery is displayed on mobile. Carousel displays a rotating row that can be swiped through. Grid displays media in two columns. List displays media in one column.

Gallery size

Change the size of the thumbnail product images. Either Small, Medium, Large, Extra Large.

Hide gallery media after

Choose to show a More media button after a certain number of rows. Select either 1 row, 2 rows, 3 rows, or Never.

Enable video looping

After a video starts playing, choose to loop the video continuously.

Enable image zoom

Allow visitors to view product images in a larger view.

Image aspect ratio

Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Square (1:1), 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.

Media grouping

Display specific sets of images for selected variants.

Mobile carousel

The following settings apply when Gallery style mobile is set to Carousel.

Setting	Description
Enable looping	Restart the carousel when visitors swipe through the last image.
Show image full width	Make the current image span the full width of the screen. When disabled, the edges of the previous and next images will appear.
Hide pagination dots	Choose whether to show dots that allow visitors to select a product image to view. This option does not apply when Show images full width is selected.

Setting

Description

Enable looping

Restart the carousel when visitors swipe through the last image.

Show image full width

Make the current image span the full width of the screen. When disabled, the edges of the previous and next images will appear.

Hide pagination dots

Choose whether to show dots that allow visitors to select a product image to view. This option does not apply when Show images full width is selected.

Related links
Breadcrumbs Navigation buttons Sticky product details

Last updated 1 month ago