> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/overlay-group/quick-add/product-media.md).

# Product media

Controls how the product image shows inside the overlay.

{% hint style="info" %}
You can limit the gallery to the images of the selected variant only. Turn this on in [**Theme settings → Variant pickers**](/helix/theme-settings/variant-pickers.md).
{% endhint %}

***

## Settings

**Desktop position** — Whether the image sits above or to the left of the details.

{% tabs %}
{% tab title="Top" %}
![Quick Add — media top](/files/vWvTRtD8h69Ijq2nY1Bw)

The image spans full width above the details. Extra images show as a thumbnail strip below the main image.
{% endtab %}

{% tab title="Left" %}
![Quick Add — media left](/files/DAkrxB2QFVoYR7ZNzUgl)

The image sits in the left column and the details fill the right. This unlocks the width, layout, and autoplay controls below.
{% endtab %}
{% endtabs %}

**Desktop width** — How much of the overlay the media panel takes up. Available when position is **Left**.

**Desktop layout** — How multiple images are arranged. Available when position is **Left**; when position is **Top**, a horizontal thumbnail strip is used automatically.

{% tabs %}
{% tab title="Stacked images" %}
![Quick Add — stacked images](/files/h4dLix5i8iAveqHSm7LV)

Images stack vertically and scroll within the panel.
{% endtab %}

{% tab title="Stacked images (thumbnails)" %}
![Quick Add — stacked images with thumbnails](/files/exsU8rrydTdh0MHhW7M7)

Images stack vertically, with a thumbnail strip for jumping between them.
{% endtab %}

{% tab title="Left thumbnails" %}
![Quick Add — left thumbnails](/files/EkR4Gd8FaEeUiqjRbA3b)

A vertical thumbnail strip sits along the left edge.
{% endtab %}

{% tab title="Bottom thumbnails" %}
![Quick Add — bottom thumbnails](/files/dmdc4t04qwz9WGXnR0oM)

A horizontal thumbnail row sits along the bottom.
{% endtab %}
{% endtabs %}

**Zoom** — How shoppers can enlarge an image to see detail.

* **Click and hover** — hovering zooms in; clicking holds the zoom in place.
* **Open lightbox** — clicking an image opens it full-screen.
* **None** — no zoom.

**Autoplay** — Plays product videos automatically when the gallery opens. Videos start muted. Available when position is **Left**.

**Loop video** — Replays product videos continuously.

**Gap — Desktop / Mobile** — Space between images in the media panel.