AppsThemesSupport

Support product media

Merchants can add media to their products, like images, 3D models, and videos.

Resources

Implementing product media

Product media is usually displayed on the product page. However, you might want to display product media in other areas of your theme, so it's recommended to build your media display in a snippet so that it can be reused.

To display product media, you can loop through the images attribute of the product object and apply the associated media_parse filter, depending on the media_type.

Example

If you want to output product media on the product page, and your product page content is hosted in a product.liquid section, then you might do the following:

  • Create a snippet called product_images.liquid to host your images and media display.
  • Includes product_images.liquid in your product.liquid section.
{% 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 %}

Responsive media elements

Shoplazza-hosted 3D models use Google’s model viewer component and externally rendered videos are rendered in <iframe> elements. Neither of these is a responsive container by default.

Updated 10 months ago