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

<div><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2F6UvKwylaF0Bf6nN4zbgR%2Fproduct-page-1.jpeg?alt=media&#x26;token=ee267b0d-83b0-453a-9697-088ae3a9b9d1" alt="" width="563"> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FAIz4nkHzZrcAjNsoEIqf%2Fproduct-page-gridLayout.jpeg?alt=media&#x26;token=486eb962-bf11-4be6-9767-a2c97dcdac86" alt="" width="375"><figcaption></figcaption></figure></div>

## Choose layout style

***

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.

&#x20;

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

<table><thead><tr><th width="225">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>

### Mobile carousel

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>

&#x20;

## Image aspect ratio

***

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

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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

&#x20;

## Media options

***

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

&#x20;

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

<table><thead><tr><th width="285">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="../variant-options/media-grouping">Media grouping</a></td><td>Display specific sets of images for selected variants.</td></tr></tbody></table>

&#x20;

***

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