> 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/eclipse/product-pages/media-gallery.md).

# Media gallery

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

Change the position and layout of the gallery media, and change the size and shape of images and videos.

{% hint style="info" %}
To show images only for the selected variant, you can set up [media grouping](/eclipse/product-pages/media-gallery/media-grouping.md).
{% endhint %}

## Choose layout style

***

Display product media as a **grid**, **stacked** list, or show additional images as **thumbnails**.

<div><figure><img src="/files/H8h8yVtWmzc41mEEnkCr" alt="" width="188"><figcaption><p>Grid</p></figcaption></figure> <figure><img src="/files/V11H8sRyNy6MV53Tuzg0" alt="" width="100"><figcaption><p>Stacked</p></figcaption></figure> <figure><img src="/files/ccEYTSQ9ZhkyZl3Bihx3" alt="" width="188"><figcaption><p>Thumbnails left</p></figcaption></figure> <figure><img src="/files/KcHFuWOZz2TqQEMtq2Cj" alt="" width="188"><figcaption><p>Thumbnails bottom</p></figcaption></figure></div>

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

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop gallery layout</mark></td><td>Choose how gallery media are displayed.</td><td><strong>Grid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Stacked</strong><br><strong>Thumbnails below</strong><br><strong>Thumbnails left</strong></td></tr><tr><td><mark style="color:blue;">Thumbnail size</mark></td><td>Set the maximum size of thumbnail images in the gallery.</td><td><strong>50 - 100 px</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 75</mark></td></tr></tbody></table>

## Gallery position and size

***

Position the media gallery on the left or right side of the product details. You can increase the width of the gallery on the page.

&#x20;

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

<table><thead><tr><th width="170">Setting</th><th width="422">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop media position</mark></td><td>Choose whether the media gallery appears on the left or right side of the product details.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Desktop gallery size</mark></td><td>Set the maximum width of the media gallery. The product overview will adapt to the remaining width of the page.</td><td><p><strong>35 - 70%</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 55</mark></p></td></tr></tbody></table>

### Mobile gallery

***

Customize the media gallery for mobile screens.

&#x20;

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

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Media size</mark></td><td>Set the size of product media on mobile devices.</td><td><strong>Full width</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Contained</strong></td></tr><tr><td><mark style="color:blue;">Enable slider looping</mark></td><td>Return to the first image after swiping through the last image.</td><td></td></tr></tbody></table>

## Image aspect ratio

***

Make your product media a uniform shape or use their original proportions.

&#x20;

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

<table><thead><tr><th width="159">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

## Enable autoplay videos

***

Choose to **autoplay and loop videos** in the product media gallery. Videos will be automatically muted and will not show controls.

1. Upload a `.mp4` or `.mov` video file to the product media in your Shopify admin.
2. Open the product template in your theme editor, then select **Enable autoplay videos**.

#### Requirements

***

For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td> <code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>1 minute (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>> 10MB (Recommended)</td></tr></tbody></table>

## Enable image zoom

***

Allow customers to zoom in on product images for a closer look.

`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>