Product video in Collection/Product Grid | Dawn theme

Technical Q&A
1

Hi,

I’ve been seeking a solution to “play” a product videos in a collection product grid on the homepage.

It should be possible to display the video thumbnal/first frame along with video controls in the product grid but I jus can’t work out how.

I accept this won’t autoplay but that’s not wanted as wouldn’t work well for mobile.

Any thoughts on a solution?

2

Hi Paul,

Yes, what you’re trying to achieve is definitely possible.

You can customize the product grid to display the first frame or thumbnail of a product video and on click (or tap) the video can play with native controls all without autoplay, making it mobile-friendly.

involves slight modifications to your theme.

If you’d like, feel free to share your store URL and collaborator code if you grant access, I can implement this for you right away.

3

Hi @Paul_Markham,

Please send the website link, I will check it for you

4

Hi,

Hope this will help

  • Add Video to Each Product
  • Edit the Product Grid Code
  • Add the Video Code (Replace or add a block like this)
    Code example
{% if product.metafields.custom.video %}
  <video width="100%" controls poster="{{ product.featured_image | image_url }}">
    <source src="{{ product.metafields.custom.video | file_url }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
{% else %}
  <img src="{{ product.featured_image | image_url }}" alt="{{ product.title }}">
{% endif %}
  • Use CSS for style