Choose a layout for product image thumbnails
Updated today
Choose whether product thumbnails appear to the left of the main product image or below it, and use the gallery's navigation buttons and thumbnails to move between a product's images, videos, and 3D models.
Choose a thumbnail layout
The Thumbnails layout setting lives in the Product media gallery block, inside the Product information section of the product template.
In Online Store → Themes → Customize, open the product template.
Select the Product information section and open the Product media gallery block.
Under Thumbnails layout, choose Left of media or Below media. Left of media is the default.
How the layouts behave on desktop and mobile
Left of media arranges the thumbnails in a column to the left of the main image on screens at least 60em wide. On smaller screens it falls back to placing the thumbnails below the main image. Below media keeps the thumbnails below the main image at every screen size.
Preview the product page on desktop and mobile to confirm the layout, then save.
Navigate between product media
When a product has more than one media item, the gallery shows Previous media and Next media buttons and one thumbnail per item. The previous button is disabled at the start of the media and the next button at the end.
Selecting a thumbnail scrolls the matching media into view and marks it as the active thumbnail. Thumbnails for videos and external videos show a play icon, and 3D models show a 3D-model icon. The active media also updates when a customer selects a variant that has its own featured media.