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