Support product media
Merchants can add media to their products, like images, 3D models, videos, and YouTube or Vimeo videos.
In this tutorial, you'll learn how to support product media in your theme.
mediaattribute of the
- Media filters
Implementing product mediaAnchor link to section titled "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
media attribute of the
product object and apply the associated media filter, depending on the media type.
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
media.liquidto host your media display.
Each media type in the example above is wrapped in a
<div> element with custom
style and data attributes. These are based on the considerations documented in UX considerations, and should be adjusted accordingly to match your approach.
UX considerationsAnchor link to section titled "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 elementsAnchor link to section titled "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 elementsAnchor link to section titled "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.
Use media preview imagesAnchor link to section titled "Use media preview images"
Every media type has a
preview_image attribute. This could be useful in scenarios like the following:
Product thumbnailsAnchor link to section titled "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.
Social media imagesAnchor link to section titled "Social media images"
Rather than only showing images for social media previews, you can include media preview images as well.
Support AR functionalityAnchor link to section titled "Support AR functionality"
If merchants have 3D models of their products, then you can give them the option to showcase those models through AR. To do this, 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 libraryAnchor link to section titled "Initialize the library"
Launch the displayAnchor link to section titled "Launch the display"
You can launch the display in two ways:
Launch the display with a buttonAnchor link to section titled "Launch the display with a button"
You can launch the display with a button that has the following attributes:
||The Shopify-XR library scans the DOM for elements with this attribute and attaches a click handler to launch the display.|
||The media ID of the current model.|
||The title of the product.|
||A base data attribute for the Shopify-XR library to reference.|
You would include a button for each model type media source.
Control video functionality with parametersAnchor link to section titled "Control video functionality with 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- Whether to automatically play the video after it’s loaded.
loop- Whether to loop the video.
muted- Whether to mute the video’s audio.
controls- Whether a user can control the video playback.
Each parameter is
false by default, however you can set them to be
true like the following: