Product images are one thing, but product videos, that’s a whole new level of awesome. I’m sure you’ve considered putting YouTube videos up in your product image galleries, and there are a few ways to make that happen, but most people who work in the film industry will tell you that Vimeo is the way to go for quality. Although YouTube gets the job done, Vimeo is where you go for high-res quality. This might not be necessary to those that don’t rely on that sort of quality, but if your product is better suited for a more advanced video experience, Vimeo is the way to go.

Now that i’ve sold you on Vimeo, let’s actually discuss how to get these Vimeo videos into your product gallery.

First, it is a good idea to create a new template before starting the back-end build for this feature. You can create a duplicate of the product.liquid file that you already have, or you also create a duplicate of the product-template.liquid section. Now for the code changes...

We want to create this feature completely dynamically so that we don’t have to worry about any outside forces acting on it when it is in use. This is why we have to find a way to send the Vimeo videos IDs to our code. Where do we take these from? Go into the product administration and use some images’ Alt texts to send this information where it needs to go. Just by adding or changing these Alts, the Vimeo videos are modified in the gallery

Having the vimeo IDs set, we can go to our newly created product template file and look for the “for” line of code that loops through the products images to generate the large images. In this “for”, we can add a condition: if the image Alt text contains a vimeo ID, we include here the Vimeo iframe code and in this iframe’s SRC we include the ID of the Vimeo video received from the Alt. If the condition is not met, we let the normal code that came with the theme run.

That’s not all, there is one more area where we need to make changes. There is another “for” loop that needs to be changed, and it’s the one that creates the thumbnails. Here we see that the initial theme has an “<a>” item, our change comes inside it. We have to insert into this item a condition again to check if the Alt contains a vimeo ID, in this case instead of attaching the <img>, we put the iframe code for Vimeo videos. If you add

"?api=1&background=1&mute=0&loop=0"

That’s it! You just turned your image gallery in a more complex and dynamic showcase of beautiful high-res videos.  Of course, you could use a similar strategy to put YouTube videos into a gallery as well, and that might be enough for you, but if you are someone who prefers Vimeo or already uses it, just follow the steps above, and make your products jump off the screen with a gorgeous moving showcase.