Update: March, 2020
As of ShowTime version 6.3 and Galleria version 2.2, our themes now support Shopify's new product media functionality. These new features allow you to add YouTube videos and 3D models directly into your product gallery. Shopify is rolling this functionality out slowly, so you may not see these features in your Shopify dashboard quite yet, but they should be available to all soon. For more information on this update, please see this blog post from Shopify.
Legacy Method (for older theme versions)
One of the great features built into all our themes is product video support. By utilizing this option, you can include videos from YouTube or Vimeo as part of your regular product gallery. You can have as many videos is you'd like in your gallery, and setting them up is easy. Let's get started.
To use videos as part of your product gallery, you need to do three things. Get the embed code for your video from YouTube or Vimeo, upload a product photo as normal (preferably with some indication that it will link to a video), and edit that photo's ALT text in your Shopify dashboard.
Getting the Embed Code
- From YouTube: On the YouTube website, visit the page for your desired video, right-click on the video player itself and simply choose "copy embed code."
- From Vimeo: Navigate to the page where your video is located. Look at the video playback window and look for a small paper airplane icon. Click that, then click Share. A new window will popup with some options (see screenshot on the right). You can ignore the size options, but make sure all the checkboxes under Special stuff at the bottom are unchecked, then copy the line of code in the Embed field. It doesn't appear all on one line, so make sure you get it all.
Upload a Product Photo and Edit ALT Text
Navigate to your product page in your Shopify dashboard and scroll down to the Images section. You can use any of your existing images as a link to show a video, or you can upload a new one. In our case, we added a small colored triangle with a video play button to the corner of the image so customers can easily see that it will show a video. This is optional. Once the image is uploaded, click the small pencil image with the word ALT next to it to modify the image's ALT text. Now, simply paste the YouTube or Vimeo embed code you copied earlier in to this box. Click Done and you're all set. Now when customers click that particular thumbnail, instead of seeing a larger version of the image, they'll see your video.
See this functionality in action