> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/product-pages/layout-and-style/media-gallery.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.