Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Leveraging The Full Power Of Shopify's Product Media Feature

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!

Niall Gallagher
Senior Web Developer
If there is a new web app, I’ve tried it. If it’s integratable, optimizable, automatable, and customizable it is right up my alley. I manage and lead a team of developers that specialize in making a workable digital solution for your business out of nothing. I identify and make ongoing recommendations based on your business goals and the operational feasibility of what can be implemented to allow your business to scale and grow freely. Long story short, we’ll solve problems you didn’t know you had, in way you never thought possible.
close[x]

Get A Quote

Ready to take the next step? Please fill out the form below. We can't wait to hear from you!

Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields