> 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/stiletto/product-pages/layout-and-style/media-gallery.md).

# Media gallery

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

Change the layout and style 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](/stiletto/product-pages/variant-options/media-grouping.md).
{% endhint %}

<div><img src="/files/il0o7aTLXQGuuNTkzxoJ" alt="" width="563"> <figure><img src="/files/uFinguqqU2dSpDl5UtxY" alt="" width="375"><figcaption></figcaption></figure></div>

<h2 align="center">Gallery layout</h2>

***

Display product media as a **grid**, **list**, or show additional images as **thumbnails**. Adjust the **Gallery size** and choose to show a **More media** button for large galleries.

<sub><mark style="color:$info;">Click Product overview or Featured product section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="221.74713134765625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Gallery style</mark></td><td><strong>Grid</strong> displays media in two columns.<br><br><strong>List</strong> displays media in one column.<br><br><strong>Thumbnails</strong> displays all media as small clickable images next to the main product image.</td></tr><tr><td><mark style="color:blue;">Gallery style mobile</mark></td><td><p>Change how the media gallery is displayed on mobile.<br><br><strong>Carousel</strong> displays a rotating row that can be swiped through.<br><strong>Grid</strong> displays media in two columns.<br><strong>List</strong> displays media in one column.</p><p><strong>Thumbnails</strong> displays all images below the main image</p></td></tr><tr><td><mark style="color:blue;">Gallery size</mark></td><td>Change the size of the thumbnail product images. Either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, <strong>Extra Large</strong>.</td></tr><tr><td><mark style="color:blue;">Hide gallery media after</mark></td><td>Choose to show a <strong>More media</strong> button after a certain number of rows. Select either <strong>1 row</strong>, <strong>2 rows</strong>, <strong>3 rows</strong>, or <strong>Never</strong>.</td></tr></tbody></table>

### <mark style="color:$primary;">Mobile carousel</mark>

The following settings apply when **Gallery style mobile** is set to *Carousel*.

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable looping</mark></td><td>Restart the carousel when visitors swipe through the last image.</td></tr><tr><td><mark style="color:blue;">Show image full width</mark></td><td>Make the current image span the full width of the screen. When disabled, the edges of the previous and next images will appear.</td></tr><tr><td><mark style="color:blue;">Hide pagination dots</mark></td><td>Choose whether to show dots that allow visitors to select a product image to view. This option does not apply when <em>Show images full width</em> is selected.</td></tr></tbody></table>

<h2 align="center">Media options</h2>

***

Adjust options for displaying featured media, video looping, and image zoom.

<sub><mark style="color:$info;">Click Product overview or Featured product section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="256.9921875">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show featured media first</mark></td><td>Choose to display the main image set in the product's admin settings when the page first loads.<br><br>By default, the image of the first in-stock variant will be displayed. Only applies to thumbnails and carousel styles.</td></tr><tr><td><mark style="color:blue;">Enable video looping</mark></td><td>After a video starts playing, choose to loop the video continuously.</td></tr><tr><td><mark style="color:blue;">Enable image zoom</mark></td><td>Allow visitors to view product images in a larger view.</td></tr><tr><td><a href="/pages/K5AkdpuMF0JOJBGa1AWd">Media grouping</a></td><td>Display specific sets of images for selected variants.</td></tr></tbody></table>

### <mark style="color:$primary;">Image aspect ratio</mark>

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

<figure><img src="/files/RFmWGT0O4EPQmXP8F5si" alt="" width="375"><figcaption></figcaption></figure>

<sub><mark style="color:$info;">Click Product overview or Featured product section to find settings<mark style="color:$info;"></sub>

<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>Square (1:1)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

***

> **Related links**
>
> [Breadcrumbs](/stiletto/product-pages/layout-and-style/breadcrumbs.md)\
> [Navigation buttons](/stiletto/product-pages/layout-and-style/navigation-buttons.md)\
> [Sticky product details](/stiletto/product-pages/layout-and-style/sticky-product-details.md)