How do I add videos to the product image slides?

Update: Pipeline now supports Shopify's product media formats which includes native support for MP4, MOV videos, YouTube and Vimeo streaming videos, 3D models GLB files directly. Please update your theme if you are running Pipeline 4.5 and earlier. The following article is for older versions of Pipeline only. Learn more about product media files in Shopify.

If you add a Vimeo or YouTube link to the product image alt text, a play button for the video will be added to the image. 

Result:

To add a link to the alt text you'll want to go to the product page editor in the Shopify admin. You'll see a box with all the product images. When you hover an image you'll see options for preview, edit, alt, and delete. When you press "alt" it opens the alt text editor. That's where the link goes.

The link must be a full URL link without added params

Valid:

 https://www.youtube.com/watch?v=EeuICRNMqRg

https://vimeo.com/99275308

Invalid:

https://youtu.be/EeuICRNMqRg

https://www.youtube.com/watch?v=EeuICRNMqRg&feature=youtu.be&t=33s

Be careful of YouTube's various URL formats. The short or longer versions will not work with the player.

Walk Through:

Hover over the image which will have a video associated with, click on the ALT icon:

Add the correct YouTube or Vimeo URL to the Image alt text field:

Press the Done button and now when you preview your product, you'll see a video play button overlaying the image:

Press the play button and the video will open in a popup modal window:

Support for Vimeo

Vimeo might be a good option for for your product videos. The player tends to be cleaner and ad-free which is suitable for high quality videos.

Note: This works with Pipeline 2.4 and higher. See at the bottom for a link to check which version of Pipeline you have and how to update.