# 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](https://help.fluorescent.co/eclipse/product-pages/media-gallery/media-grouping).
{% endhint %}

## Choose layout style

***

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

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FKSVqEHONYWu3kAnWGIiu%2Fmedia-grid.png?alt=media&#x26;token=5a5d12c3-1b7b-485c-b005-895bc5564476" alt="" width="188"><figcaption><p>Grid</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FtPv1RzpafsDomI9BDSGd%2Fmedia-stacked.png?alt=media&#x26;token=0c7cfe3e-ceb8-4518-9609-cd649e5091d4" alt="" width="100"><figcaption><p>Stacked</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F6XgWZBYrOwLD6dRSeL7D%2Fthumbnails-left.png?alt=media&#x26;token=ed155c1a-79bf-45f4-afbf-c726050f0db2" alt="" width="188"><figcaption><p>Thumbnails left</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FrBlwJFmU8xffbrW9FNQj%2Fmedia-thumbnails-bottom.png?alt=media&#x26;token=bd088113-fc9b-401b-8404-1d6b28623867" 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>


---

# 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/eclipse/product-pages/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.