Displaying product videos on Shopify: How to check and show them on the main product page?

Other Questions Shopify
1

Hey everyone! I’m stuck with a Shopify problem. Some of our products have both images and videos while others only have images. We want to show the video (if there is one) on the main product page without making customers scroll through tons of images to find it.

I tried putting the video below the ‘Add to Cart’ button on the right side of the page. I found the right template but I’m struggling with the logic to check if a product has a video and display it there.

I’ve been using Liquid but my code only shows the product title no matter what. Here’s what I’ve tried:

{% case product.media.first.media_type %}
  {% when 'video' %}
    <video controls width='250'>
      <source src='{{ product.media.first.src }}' type='video/mp4'>
      Video not supported
    </video>
  {% when 'image' %}
    <img src='{{ product.images.first.src }}' alt='{{ product.title }}'>
{% endcase %}

Any tips on what I’m doing wrong? I’d really appreciate some guidance!

2

Your approach is close, but you’re right to be concerned about efficiency. Here’s a more optimized solution that might work better:

{% assign video = product.media | where: 'media_type', 'video' | first %}
{% if video %}
  <div class='product-video'>
    <video controls width='250'>
      <source src='{{ video.sources[0].url }}' type='{{ video.sources[0].mime_type }}'>
      Video playback not supported
    </video>
  </div>
{% endif %}

This method uses Liquid’s ‘where’ filter to quickly locate the first video in the product’s media, if one exists. It’s more efficient than looping through all media items, especially for products with numerous images. Place this code where you want the video to appear, and it should display correctly when a video is available. Remember to style the ‘product-video’ div to fit your layout.

3

I’ve faced a similar issue with product videos on Shopify before. Your approach is on the right track, but there’s a small tweak that might help. Instead of using product.media.first, try looping through all media items to find the first video. Here’s a snippet that worked for me:

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    <video controls width='250'>
      <source src='{{ media.sources[0].url }}' type='{{ media.sources[0].mime_type }}'>
      Your browser does not support the video tag.
    </video>
    {% break %}
  {% endif %}
{% endfor %}

This code checks each media item until it finds a video, then displays it. If there’s no video, nothing will show. You can place this code wherever you want the video to appear on your product page.

Remember to test thoroughly across different product types to ensure it behaves as expected. Good luck with your store!

4

hey ZoeStar42, had similar issues. try this:

{% assign first_video = product.media | where: ‘media_type’, ‘video’ | first %}
{% if first_video %}

{% endif %}

this checks for videos and shows the first one if it exists. hope it helps!

5

As someone who’s worked on multiple Shopify stores, I can tell you that handling product videos can be tricky. Here’s what I’ve found works well:

{% assign video = product.media | where: ‘media_type’, ‘video’ | first %}
{% if video %}

{% endif %}

This code efficiently finds the first video and displays it if it exists. I’d recommend placing this right after your main product image for maximum visibility.

One thing to keep in mind - make sure your theme’s CSS styles the video container appropriately. You might need to add some custom CSS to ensure it fits well with your layout.

Also, consider adding a fallback image in case the video fails to load. It’ll improve the user experience across different devices and connection speeds.

6

I’ve encountered this issue before when working on Shopify stores. Here’s a solution that might help:

{% assign video = product.media | where: ‘media_type’, ‘video’ | first %}
{% if video %}

{% endif %}

This code efficiently finds and displays the first video if one exists. Place it where you want the video to appear on your product page.

A few tips:

  1. Use ‘width=100%’ for responsive design.
  2. Add ‘preload=metadata’ to improve page load times.
  3. Style the ‘product-video-wrapper’ div to fit your layout.
  4. Test across different products and devices to ensure consistent behavior.

Remember to update your theme’s CSS to properly style the video container. This approach should solve your issue while maintaining good performance.