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


---

# 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/stiletto/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.