shopify - 在 Shopify / Liquid 中添加非特色图片的预览

Question

在 Shopify 上，产品卡片使用以下流动代码（使用默认 Shopify 主题）显示“特色媒体”（即所有图像的第一张图像）。

  {% 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 %}

我想在将鼠标悬停在产品上时显示另一张图片（例如第二张），这意味着我需要能够调用不同的图片而不仅仅是特色图片。

我如何将代码从 product.featured_media 更改为调用不同的图像？

非常感谢！

标签： shopifyliquid

Answer 1

您可以使用product.media属性访问分配给产品的所有媒体项目。

这是一个数组，因此您可以使用循环，例如

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

因此，您可以使用product.media[1].

有用的链接：

• 媒体过滤器
• 将媒体添加到主题