image

The image object has the following attributes:

image.alt

Returns the alt tag of the image, set in the Products page of the Admin.

image.attached_to_variant?

Returns true if the image has been associated with a variant. Returns false otherwise. This can be used in cases where you want to create a gallery of images that are not associated with variants.

image.id

Returns the id of the image.

image.product_id

Returns the id of the image's product.

image.position

Returns the position of the image, starting at 1. This is the same as outputting forloop.index.

image.src

Returns the relative path of the product image. This is the same as outputting {{ image }}.

Input

{% for image in product.images %}
    {{ image.src  }}
    {{ image }}
{% endfor %}

Output

products/my_image.jpg
products/my_image.jpg

To return the URL of the image on Shopify's Content Delivery Network (CDN), use the appropriate URL filter.

To see a full list of available image sizes, see image size parameters.

Shown below is an example of loading a product image using the img_url filter.

Input

{{ image | img_url: "medium" }}

Output

//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311

image.variants

Returns the variant object(s) that the image is associated with.

Input

{% for image in product.images %}
    {% for variant in image.variants %}
            {{ image.src }} - used for the variant: {{ variant.title }}
      {% endfor %}
{% endfor %}

Output

products/red-shirt.jpeg - used for the variant: Red
products/green-shirt.jpg - used for the variant: Green
products/yellow-shirt.jpg - used for the variant: Yellow

Want to discuss this page?

Visit the Shopify Community