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

# Product media

Controls how product images and videos are displayed on the product page.

**Layout**\
Choose how the product media gallery is arranged:

* **One column** – Displays media in a single vertical column.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FjGSpK9ESNSj3amr4bmHl%2Fproduct%20media_one%20column.png?alt=media&amp;token=cdc7db36-f4ad-4e28-adef-d725b1e49458" alt="" width="107"><figcaption></figcaption></figure>

* **Two columns** – Shows media in two columns.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FHnXGz0BT6NUKQoCRcKrx%2Fproduct%20media_two%20columns.png?alt=media&amp;token=f6bfbd02-202b-4f57-9eca-e440f976f0b1" alt="" width="272"><figcaption></figcaption></figure>

* **Thumbnails horizontal** – Displays thumbnails in a horizontal row.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FmPKfyDTEKnvyDSMJhQU6%2Fproduct%20media_thumbnails%20horizontal.png?alt=media&amp;token=1b01ec1d-69b5-4859-8989-f820c9881e63" alt="" width="285"><figcaption></figcaption></figure>

* **Thumbnails vertical** – Shows thumbnails in a vertical column.\
  *Note: Automatically switches to horizontal thumbnails on mobile devices.*

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FXPIhAEFZ6Xws9cwfybfT%2Fproduct%20media_thumbnails%20vertical.png?alt=media&amp;token=871f73cf-9abd-4038-a2c2-8b7c560aa2f9" alt="" width="375"><figcaption></figcaption></figure>

* **No thumbnails** – Hides thumbnail previews.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FD0xyDsQqb7F7gTmY3SEi%2Fproduct%20media_no%20thumbnails.png?alt=media&amp;token=9b169f97-ebaf-4440-8179-7ef96e7b5d2f" alt="" width="277"><figcaption></figcaption></figure>

**Show thumbnails on mobile** (works for *Thumbnail vertical* and *Thumbnail horizontal*)\
Displays thumbnail previews on mobile devices.

**Image ratio** *(Only 'Varinat image' type)*\
Set the image style:

* **Default** – Uses settings from *Theme settings ->* [*<mark style="color:$primary;">Product card</mark>*](/triumph/theme-settings/theme-settings.md#product-card).
* **Adapt to first image** – Uses the default proportions of the first image.
* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

**Image fit**\
Choose how images fit inside the container:

* **Default** – Uses settings from *Theme settings ->* [*<mark style="color:$primary;">Product card</mark>*](/triumph/theme-settings/theme-settings.md#product-card).
* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Media background**\
Sets the background style behind product media.

* **Body background** – Applies the default theme's background color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FckklcH0lIubwMezBK3tD%2Fproduct%20page_body%20background.png?alt=media&amp;token=2dd9b5a1-dcf8-46f9-afe0-ccaa512cfd4b" alt="" width="375"><figcaption></figcaption></figure>

* **Secondary color** – Uses the theme’s secondary background color.\
  Works with the '*Contain*' image fit.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Faj7FFsULtaTEWe16b6bz%2Fproduct%20page_media%20secondary%20color.png?alt=media&amp;token=bb2ff0e1-f531-42f5-b06d-29359b5adca3" alt="" width="375"><figcaption></figcaption></figure>

**Main image zoom**\
Allows customers to zoom into the main product image for a closer view.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F2hNOker5MURpcVxSf9dC%2Fproduct%20media_zoom.png?alt=media&amp;token=20dc3019-9226-4e05-be81-aa7b3c280bdf" alt=""><figcaption></figcaption></figure>

**Autoplay video**\
Automatically plays product videos when they appear.\
*Note: Videos are muted by default to allow autoplay.*

**Loop video**\
Repeats videos continuously after playback ends.

**Hide unselected variant media**\
Shows only the media (images or videos) related to the currently selected product variant.\
*Note: This option is useful for products with a single image per product variant.*