# 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/product-pages/layout-and-style/pages/lYWBRFiy0wE3kStjLEun#id-4.2.0-latest-release). Learn how to [update your theme](/cornerstone/general/theme-updates.md) 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="/files/7AsjidOO6migDlLE3fAb" 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](/cornerstone/product-pages/layout-and-style/breadcrumbs.md)\
> [Navigation buttons](/cornerstone/product-pages/layout-and-style/navigation-buttons.md)\
> [Sticky product details](/cornerstone/product-pages/layout-and-style/sticky-product-details.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/media-gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.