跳到主要内容

支持商品媒体

商家可以为商品添加媒体，包括图片、3D 模型和视频。

资源​

实现商品媒体​

商品媒体通常在商品页面上展示。但您可能也希望在 theme 的其他区域显示商品媒体，因此建议在 snippet 中构建媒体展示，以便复用。

要展示商品媒体，您可以遍历 product object 的 images 属性，并根据 media_type 应用相应的 media_parse filter。

示例​

如果您希望在商品页面输出商品媒体，且商品页面内容托管在 product.liquid section 中，可以按以下方式操作：

  • 创建一个名为 product_images.liquid 的 snippet，用于托管图片和媒体展示。
  • 在 product.liquid section 中引入 product_images.liquid。
{% include 'product_images' %}
{% for item in product.images %}
  {% assign media = item.src | media_parse %}

  {% if media.mp4 or media.hls %}
    <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" poster="{{ media.preview_image }}">
      {% if media.hls %}
        <source src="{{ media.hls }}" type="application/x-mpegURL">
      {% endif %}
      {% if media.mp4 %}
        <source src="{{ media.mp4 }}" type="video/mp4">
      {% endif %}
    </video>

  {% elsif media.media_type == 'model3d' %}
    <div data-zoom-idx="{{ forloop.index0 }}">
      <button data-model-src="{{ media.sources }}" data-model-poster="{{ item.src }}">
        <img data-img-zoom="{{item.src}}" src="{{ item.src }}" alt="{{ item.alt | default: product.title | escape }}" data-media="{{ media.sources }}" />
      </button>
    </div>

  {% else %}
    <img data-img="{{ item.src }}" src="{{ shop.default_img }}" data-src="{{ item.src | img_url: '{width}x'}}" data-sizes="auto" alt="{{ item.alt | escape }}">
  {% endif %}
{% endfor %}

响应式媒体元素​

Shoplazza 托管的 3D 模型使用 Google 的 model viewer 组件，外部渲染的视频在 <iframe> 元素中渲染。这两者默认都不是响应式容器。