> 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/product-page-sections/product-information/product-media.md).
# Product media
The image and video gallery on the product page. Choose from six desktop layouts and two mobile layouts, with control over zoom, video playback, and variant images.
***
## Desktop Layout
{% tabs %}
{% tab title="Left thumbnails" %}
Vertical thumbnail strip on the left, main image in the center.
{% endtab %}
{% tab title="Bottom thumbnails" %}
Horizontal thumbnail row below the main image.
{% endtab %}
{% tab title="Grid gallery" %}
Two-column grid where every third image spans the full width.
{% endtab %}
{% tab title="Stacked images" %}
All images stacked in a single scrollable column.
{% endtab %}
{% tab title="Stacked images (thumbnails)" %}
A stacked scrollable column paired with a thumbnail strip.
{% endtab %}
{% tab title="Two-column grid" %}
A uniform two-column grid.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The lightbox opens images at full resolution — upload large product images so customers can inspect detail up close.
{% endhint %}
***
## Settings
### Mobile Layout
{% tabs %}
{% tab title="Slider" %}
The gallery becomes a swipeable slider. Adds **Show part of next slide** and **Show pagination**.
{% endtab %}
{% tab title="Thumbnails" %}
A horizontal thumbnail row sits under the main image.
{% endtab %}
{% endtabs %}
| Setting | Description |
| ----------------------- | ------------------------------------------------------------------------------- |
| Layout style | **Slider** or **Thumbnails**, as shown above. |
| Full-width media | Stretch images to the full viewport width on mobile. |
| Show part of next slide | Reveal the edge of the next image so customers know there is more. Slider only. |
| Show pagination | Dot indicators below the slider. Slider only. |
### Media settings
| Setting | Description |
| ---------- | -------------------------------------------------------------------------------------------------------- |
| Autoplay | Play product videos automatically when the gallery loads. |
| Loop video | Replay product videos continuously. |
| Zoom | Choose how customers zoom in: open a full-screen lightbox, zoom in place on click and hover, or no zoom. |
### Gap
| Setting | Description |
| ------------- | ------------------------------------------------ |
| Gap — Desktop | Spacing between images or thumbnails on desktop. |
| Gap — Mobile | Spacing between thumbnails on mobile. |
***
## Variant Media
When a customer selects a variant, the gallery scrolls to or highlights images tagged with that variant. Turn on **Show selected variant image** in [**Theme Settings → Variant pickers**](/helix/theme-settings/variant-pickers.md) to show only the images for the selected variant.
{% hint style="info" %}
To add multiple images to a variant, see [How to set up multiple variant images](/helix/how-to-guides/how-to-set-up-multiple-variant-images.md).
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}