Support product media

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

You can access this product media through the media attribute of the product object, and then build your displays using media filters.

For example, the following shows a snippet that loops through a product’s media and applies the associated media filter:

That snippet is called in the product section:

UX considerations

Every theme requires a different approach to create responsive media that works across all screen sizes and devices. The following general recommendations can help ensure that you're offering a good customer experience:

A product can have multiple videos, so if your theme has a thumbnail view for each media element, or displays multiple media elements at once, you should ensure that only the active video is playing.

Responsive media elements

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

Shopify-hosted videos are rendered in HTML5 video players, which are responsive by default, however only once they’re rendered.

Given the above, you should consider using an aspect ratio box to create a responsive container for each.

Interactive media elements

Shopify-hosted, and externally-hosted, video elements, and 3D models have interactive components. For example, videos have progress bars and volume control, and 3D models can be rotated.

If any of these media elements are hosted in a carousel or swipe-interactive display, then the interactive components shouldn’t interfere with the ability to interact with the display.

Media preview images

Every media type has a preview_image attribute. This could be useful in scenarios like the following:

Product thumbnails

If your theme displays thumbnails for each media source on the product, then you can utilize the preview_image attribute of the media object in order to show a thumbnail image for each media source.

For example:

Social media images

Rather than only showing images for social media previews, you can include media preview images as well.

For example:

Shopify-XR library for AR functionality

You can use the Shopify-XR library to support AR Quick Look in iOS’s Safari, and Android’s Scene Viewer.

You need to do the following to use this library:

Initialize the library

The following JavaScript needs to be included on product pages to initialize the library:

Launch the display

You can launch the display in two ways:

Launch the display with a button

You can launch the display with a button that has the following attributes:

Attribute Description
data-shopify-xr The Shopify-XR library scans the DOM for elements with this attribute and attaches a click handler to launch the display.
data-shopify-model3d-id The media ID of the current model.
data-shopify-title The title of the product.
data-shopify-xr-hidden A base data attribute for the Shopify-XR library to reference.

You would include a button for each model type media source.

For example:

Launch the display with JavaScript

Rather than include a button to launch the display, you can use JavaScript. For example:

Video parameters

Shopify hosted videos can have all HTML5 video attributes set when they’re rendered with the Liquid video_tag or media_tag filter. For example:

  • autoplay - Automatically play the video once it’s loaded.
  • loop - Loop the video.
  • mute - Mute the video’s audio.

Each parameter is false by default, however you can set them to be true like the following: