Skip to main content

image

An image, such as a product or collection image.

To learn about the image formats that Shopify supports, visit the Shopify Help Center.


Tip

Use the image_url and image_tag filters to display images on the storefront.


Properties

The alt text of the image.

Anchor to
aspect_ratio

The aspect ratio of the image as a decimal.

Anchor to
attached_to_variant?

Returns true if the image is associated with a variant. Returns false if not.

The attached_to_variant? property is only available for images accessed through the following sources:

If you reference this property on an image from another source, then nil is returned.

The height of the image in pixels.

The ID of the image.

If you reference the id property for preview images of generic_file or media objects, then nil is returned.

The media type of the image. Always returns image.

The media_type property is only available for images accessed through the following sources:

If you reference this property on an image from another source, then nil is returned.

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

The position of the image in the product.images or product.media array.

The position property is only available for images that are associated with a product. If you reference this property on an image from another source, then nil is returned.

The presentation settings for the image.

Anchor to
preview_image

A preview image for the image.

The preview_image property is only available for images accessed through the following sources:

If you reference this property on an image from another source, then nil is returned.

The ID of the product that the image is associated with.

The product_id property is only available for images associated with a product. If you reference this property on an image from another source, then nil is returned.

The relative URL of the image.

Anchor to
variants
array of variant

The product variants that the image is associated with.

The variants property is only available for images accessed through the following sources:

If you reference this property on an image from another source, then nil is returned.

The width of the image in pixels.

{
"alt": "Charcoal",
"aspect_ratio": 1.50016818028927,
"attached_to_variant?": false,
"height": 2973,
"id": 29355706875969,
"position": 1,
"product_id": 6790277595201,
"src": {},
"variants": [],
"width": 4460
}
Anchor to Referencing the `image` object directly

Referencing the image object directly

When an image object is referenced directly, the image's relative URL path is returned.

{{ product.featured_image }}

Output

products/mushrooms-on-a-table.jpg
Was this section helpful?