# Support product media

> Display product images, video, and 3D models in a Shoplazza Theme by looping the product media attribute and applying the media_parse filter in a reusable snippet.

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

## Resources

* The `media` attribute of the [product object](/docs/theme/references/liquid/objects/product)

## Implementing product media

Product media is usually displayed on the [product page](/docs/theme/architecture/templates/product). 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](/docs/theme/architecture/overview#snippets) 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](/docs/theme/references/liquid/filters/media#media_parse), 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.

```liquid title="section/product.liquid"
{% include 'product_images' %}
```

```liquid title="snippets/product_images.liquid"
{% 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](https://modelviewer.dev/) component and externally rendered videos are rendered in `<iframe>` elements. Neither of these is a responsive container by default.