At the start of this year Shopify launched the product media feature. With this new feature, in addition to images you can now also add videos and 3D models to your product pages too. This gives us developers a huge amount of additional flexibility when it comes to things like images galleries on product pages, as we can now allow clients to add this full range of media types to showcase their products not only with static images, but now also with 3D views and videos too. This feature is something we’ve wanted for a very long time… Shopify heard us, and they delivered! 

In order to fully take advantage of this new feature, there are some key things to know…

You’re probably familiar with this screen by now...

From a user perspective, the media types are added to the product gallery in the same way images have always been added. You can also add images or youtube videos from an external source under the options in the dropdown menu.

For us developers, however, there are a couple of different things we need to do in our code.

The first and most pertinent change is that we can now access a product’s media content using the property {% product.media %}. This returns an array of all media applied to a product so we need to loop through it like so...

{% for media in product.media %}
....
{% endfor %}

Within that loop, we need to check for the different media types that we want to display on the page. We can do this by querying the media object’s media_type property, which tells us whether the media is an image, 3D model, or video. For each media type we can then use the appropriate tags to output the elements.

{% case media.media_type %}
    {% when 'image' %}
         <img src="{{ media | product_img_url: 'medium' }}">
    {% when 'model' %}
        {{ media | model_viewer_tag }}
    {% when 'video' %}
        {{ media | video_tag: controls: true }}
    {% when 'external_video' %}
        {{ media | external_video_tag }}
{% endcase %}

You can see the full list of media filters available at https://shopify.dev/docs/themes/liquid/reference/filters/media-filters.

And with that, we can finally wave goodbye to the days when we had to find creative and very unorthodox ways of adding things like YouTube videos to our product pages. No more sideways rigging of code to maintain video footage, no more delicate ecosystems where the slightest change could crash everything surrounding your media… Shopify now officially supports these and more via the product settings, and with the right code in place in your theme, your client can add these at the touch of a button.

Welcome to the future! We’ve arrived! Next up, VR product images and holograms… but we’ll tackle that in another blog post!