# Media gallery

The **Media gallery** displays product images and videos for Product pages and Featured products.

In your theme editor (**Customize**), click the **Product overview** section find the **Media** settings.

 

## Gallery layout and size

***

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

{% hint style="warning" %}

#### Version update

**Gallery layouts** options for **Grid** and **Stacked** were added to product pages in [Cornerstone v4.2.0](https://help.fluorescent.co/cornerstone/readme/changelog#id-4.2.0-latest-release). Learn how to [update your theme](https://help.fluorescent.co/cornerstone/general/theme-updates) to access new features.
{% endhint %}

`Click Product overview  to find settings`

<table><thead><tr><th width="222">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop gallery size</mark></td><td>Change the size of the media gallery: <strong>Small, Medium, Large,</strong> or <strong>Extra large</strong>.<br><br>The width of the product details will increase or decrease according the gallery size.</td></tr><tr><td><mark style="color:blue;">Desktop gallery layout</mark></td><td>Display product media as a <strong>grid</strong>, <strong>stacked</strong> list, or show additional images as <strong>thumbnails</strong>.</td></tr><tr><td><mark style="color:blue;">Thumbnails position</mark></td><td>Choose where to display the thumbnails next to the main product image: <strong>Left of media</strong> or <strong>Below media</strong>.</td></tr><tr><td><mark style="color:blue;">Thumbnail size</mark></td><td>Change the size of the thumbnail product images: <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td><p>Choose to crop all product images to be a single uniform shape. </p><p><br>Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).<br><br></p><p><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-a1c288a8c20161326a93dce363d3dfe30bf321af%2Faspect-ratio.png?alt=media" alt="" data-size="original"></p></td></tr></tbody></table>

&#x20;

## Enable video looping

***

By default, videos in the product media will loop after they start playing .

Upload a `.mp4` or `.mov` video file to the product media in your Shopify admin. Videos will be automatically muted and will not show controls.

`Click Product overview or Featured product section to find settings`

<table><thead><tr><th width="222">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable video looping</mark></td><td>Choose to loop the video continuously after a video starts playing, </td></tr></tbody></table>

&#x20;

## Enable image zoom

***

By default, visitors can click a product image to open a large media viewer. We recommend product images that have minimum width of 2500 px for optimal quality across all screen sizes.

`Click Product overview or Featured product section to find settings`

<table><thead><tr><th width="190">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable image zoom</mark></td><td>When enabled, customers can click or hover over product images to see a zoomed-in view.</td></tr></tbody></table>

***

> **Related links**
>
> [Breadcrumbs](https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/breadcrumbs)\
> [Navigation buttons](https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/navigation-buttons)\
> [Sticky product details](https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/sticky-product-details)