Media filters
Media filters let you get URLs for a product's media.
external_video_tag
Generates an iframe
that contains a Vimeo or YouTube video player.
If alt text is set on the video, then the alt text appears in the title
attribute of the iframe. If no alt text is set, then the product title appears in the title
attribute.
Input
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_tag }}
{% endif %}
Output (YouTube)
<iframe
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"
src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>
Output (Vimeo)
<iframe
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
src="https://player.vimeo.com/video/506225278?byline=0&controls=1&playsinline=1&title=0"
title="Alt Text Here"
></iframe>
You can pass HTML attributes as options to add them to the IFrame:
Input
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_tag: class: "youtube_video" }}
{% endif %}
Output (YouTube)
<iframe
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="youtube_video"
src="https://www.youtube.com/embed/neFK-pv2sKY?controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0"
>...</iframe>
external_video_url
Used to set parameters for the external video player rendered by external_video_tag
.
Available parameters for YouTube videos
Available parameters for Vimeo videos
The following example changes the color of the YouTube player:
Input
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_url: color: "white" | external_video_tag }}
{% endif %}
Output
<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/neFK-pv2sKY?color=white&controls=1&enablejsapi=1&modestbranding=1&playsinline=1&rel=0">
...
</iframe>
The following example plays a Vimeo video muted and on a loop:
Input
{% if product.featured_media.media_type == "external_video" %}
{{ product.featured_media | external_video_url: loop: "1", muted: "1" | external_video_tag }}
{% endif %}
Output
<iframe
frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
src="https://player.vimeo.com/video/506225278?byline=0&controls=1&playsinline=1&title=0&loop=1&muted=1"
title="Alt Text Here"
></iframe>
img_tag
When used with a model or a video object, the img_tag
filter generates an image tag for the media's preview image:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | img_tag }}
{% endif %}
Output
<img src="//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062">
When used with an image object, the filter generates an image tag for the image:
Input
{% if product.featured_media.media_type == "image" %}
{{ product.featured_media | asset_url | img_tag }}
{% endif %}
Output
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
img_url
When used with a media object, the img_url
filter generates an image URL for the media's preview image.
The img_url
filter should be followed by the image size that you want to use. If you request a size smaller than your original image's dimensions, Shopify will scale the image for you. If you don't include an image size, then the filter returns a small (100x100) image.
Input
{% if product.featured_media.media_type == "video" %}
{{ product.featured_media | img_url: 500x500 }}
{{ product.featured_media | img_url }}
{% endif %}
Output
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062
//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_small.jpg?v=1560284062
When used with an image object, the img_url
filter returns the URL of the image:
Input
{% if product.featured_media.media_type == "image" %}
{{ product.featured_media | img_url: 500x500 }}
{{ product.featured_media | img_url }}
{% endif %}
Output
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_500x500.jpeg?v=1459175177
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_small.jpeg?v=1459175177
media_tag
Generates an appropriate tag for the media:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | media_tag }}
{% endif %}
Output
<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
...
</model-viewer>
You can also change the size of the media tag's poster image with the image_size
option:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | media_tag: image_size: "1024x" }}
{% endif %}
Output
<model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>
model_viewer_tag
Generates a Google model viewer component tag for the given 3D model:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | model_viewer_tag }}
{% endif %}
Output
<model-viewer src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
...
</model-viewer>
The model viewer component's attributes can be set by adding options to the filter. By default, the component's alt
attribute is set to the media's alt text, the component's poster
attribute is set to the media's preview image, and the component's camera_controls
attribute is enabled.
The following example sets a new background color for the model viewer component:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | model_viewer_tag: background-color: "#455A64" }}
{% endif %}
Output
<model-viewer background-color="#455A64" src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/0029ee870c5c3cdd/stroller.usdz" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_small.jpg?v=1560284071" camera-controls="true">
...
</model-viewer>
You can also change the size of the model viewer's poster image with the image_size
option:
Input
{% if product.featured_media.media_type == "model" %}
{{ product.featured_media | model_viewer_tag: image_size: "1024x" }}
{% endif %}
Output
<model-viewer src="https://model3d.shopifycdn.com/models/o/af141f14d08f8d30/stroller.glb" ios-src="https://model3d.shopifycdn.com/models/o/7874b0738a5c6c3f/stroller.usdz" camera-controls="true" ar="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/placeholder_image_1024x.jpg?v=1560875434"></model-viewer>
video_tag
Generates a video tag:
Input
{% if product.featured_media.media_type == "video" %}
{{ product.featured_media | video_tag }}
{% endif %}
Output
<video playsinline="true" controls="">
<source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&KeyName=core-signing-key-1&Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL">
<source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4">
<source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4">
<source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&KeyName=core-signing-key-1&Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4"><p>Sorry html5 video is not supported in this browser</p>
</video>
You can change the size of the video's poster image with the image_size
option:
Input
{% if product.featured_media.media_type == "video" %}
{{ product.featured_media | video_tag: image_size: "1024x" }}
{% endif %}
Output
<video playsinline="true" poster="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
<source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/master.m3u8?Expires=1561048057&KeyName=core-signing-key-1&Signature=JXwC7nPWBmTyTjI5_0i-HQCM9Ec=" type="application/x-mpegURL">
<source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/HD-720p.mp4?Expires=1561048057&KeyName=core-signing-key-1&Signature=UmSvwHVNWqsb9lX8-eOOK-3x4-g=" type="video/mp4">
<source src="https://videos.shopifycdn.com/c/vp/80025272edd14aa1960e61881a1e7d7e/SD-480p.mp4?Expires=1561048057&KeyName=core-signing-key-1&Signature=TCJ-rhKIFEwPt1lMXTIm8m-E8NE=" type="video/mp4">
<img src="//cdn.shopify.com/s/files/1/1425/8696/products/dc6b2518bec04c42a7a5239f563d8cb4_1024x.jpg?v=1560875163">
</video>