Adding preview of Non-featured image in Shopify / Liquid

0
votes

On Shopify, product cards display 'featured media' (i.e. the first image of all of its images) using the following liquid code (this is using the default Shopify theme).

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

I want to display another image (e.g. the second one) when hovering over the product, meaning I need to be able to call a different image and not just the featured image.

How would I change the code from product.featured_media to instead call a different image?

Thanks a lot!

1
shopifyliquid

1 Answers

1
votes

You can use product.media attribute to access all the media items assigned to products.

This is an array so you can use loops e.g. 

{% for media in product.media %}
  {{ media | img_tag }}
{% endfor %}

Consequently, you can access the second media using product.media[1].

Useful links: