Skip to main content

media

An abstract media object that can represent the following object types:

The media object can be returned by the product.media array or a file_reference metafield.

You can use media filters to generate URLs and media displays. To learn about how to use media in your theme, refer to Support product media.

Note

Each media type has unique properties in addition to the general media properties. To learn about these additional properties, refer to the reference for each type.

Properties

Anchor to
alt
string

The alt text of the media.

Anchor to
id
number

The ID of the media.

Anchor to
media_type
string from a set of values

The media type.

Possible values
image
model
video
external_video
Example
Filter for media of a specific type

You can use the media_type property with the where filter to filter the product.media array for all media of a desired type.

{% assign images = product.media | where: 'media_type', 'image' %}

{% for image in images %}
{{- image | image_url: width: 300 | image_tag }}
{% endfor %}

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300" alt="Viper venom" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300 300w" width="300" height="200">
Anchor to
position
number

The position of the media in the product.media array.

If the source is a file_reference metafield, then nil is returned.

Anchor to
preview_image
image

A preview image of the media.

Note

Preview images don't have an ID attribute.

{
"alt": "Dandelion milk",
"id": 21772527435841,
"media_type": "image",
"position": 1,
"preview_image": {}
}
Was this section helpful?