Add product media in Shopify

In Shopify merchants can add media to their products, like images, 3D models, videos, and YouTube or Vimeo videos.

To display 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 media.liquid to host your media display.
Render media.liquid in your product.liquid section.

Add to sections/product.liquid

{% for media in product.media %}
  {% render 'media', media: media %}
{% endfor %}

Add to snippets/media.liquid

{% case media.media_type %}
  {% when 'image' %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
      {{ media | image_url: width: 2048, height: 2048 | image_tag }}
    </div>
  {% when 'external_video' %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | video_tag: controls: true }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
      {{ media | model_viewer_tag }}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
      {{ media | media_tag }}
    </div>
{% endcase %}
lawbaugh_cherlyn@mailxu.com michauxrolf@mailxu.com