There are a few easy ways you can add a video into your product page: adding a video in your product gallery (either Shopify's new product media functionality or our workaround for older theme versions), adding a video in your product's description or adding a video content block in the product.details template.
Online Store 2.0 Compatible Theme Versions
If you're using a theme version with the current theme architecture, use theme editor features to enhance product pages with a video section.
Add a Section to a Product Page
In this Article
- How to get your video embed snippet
- Adding a video in your featured image column
- Adding a video in your product description
- Adding a video with the "split" tag
- Adding a video content block (product.details)
How to get your video embed snippet
-
YouTube Videos
When viewing a video on YouTube, click on the Share button located under the video player. Then click on the Embed sub-link. You can now copy the Embed snippet and paste it into your product's ALT text box. The video size settings do not matter, your video will automatically be resized to fit the 'featured image' column.
-
Vimeo Videos
When viewing a video on Vimeo, click on the Share button located on the actual video player in the right-hand corner. A pop-up box will appear that will allow you to copy the 'Embed' snippet. You can paste this snippet into your product's ALT text box.
Adding a video in your featured image column
Shopify has recently added in support to add YouTube or native HTML5 videos directly in the product gallery. Learn more about Shopify's product media and if your theme version supports it by checking out this article.
Alternatively, our workaround method to include a video in the product gallery below will still work:
You can add multiple videos to the product page that will automatically be resized to fit the entire 'featured image' column. The video will also be resized to accommodate the device's screen size. To embed a YouTube or Vimeo video into the product page, first edit your product and upload an image. Click on the 'ALT' text link for your product image and paste the YouTube or Vimeo embedded snippet.
Keep in mind you still need a still image associated with your video, especially if you show thumbnails in your product image gallery. You can either use an alternate product image, a video camera or "play" button icon or create an image that shows a preview of your video with a large "play" button design to help users realize it's a video.
Adding a video in your product description
When adding embed codes to your product description, please note that you need to be in HTML or code view, otherwise the videos will not work.
Click here to see how to switch to this view.
Select your theme:
-
Turbo & Flex
No additional edits are required for the Turbo or Flex themes, you can simply embed the YouTube or Vimeo snippet.
-
Responsive & Mobilia
For Responsive versions before 6.3.0 and for Mobilia versions before 5.3.0. What theme version am I using?
To embed a resizable YouTube or Vimeo video, you'll want to wrap the embed code snippet with an extra div tag to have it resize for all devices. Here is an example below:
<div class="video-container"> <iframe width="560" height="315" src="http://www.youtube.com/embed/HQId6xDGEVo" frameborder="0" allowfullscreen=""> </iframe> </div>
For Responsive 6.3.0+ and Mobilia 5.3.0+
No additional edits are required, you can simply embed the YouTube or Vimeo snippet.
-
Retina & Parallax
For Retina versions before 4.2.3 and for Parallax versions before 3.3.2. What theme version am I using?
To embed a resizable YouTube or Vimeo video, you'll want to wrap the embed code snippet with two extra div tags to have it resize for all devices. Here is an example below for YouTube videos:
<div class="video-container youtube"> <div> <iframe width="560" height="315" src="http://www.youtube.com/embed/HQId6xDGEVo" frameborder="0" allowfullscreen=""> </iframe> </div> </div>Here is an example below for Vimeo videos:
<div class="video-container vimeo"> <div> <iframe src="//player.vimeo.com/video/32918908?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </iframe> </div> </div>For Retina 4.2.3+ and Parallax 3.3.2+
No additional edits are required, you can simply embed the YouTube or Vimeo snippet.
Adding a video with the "split" tag
Another way would be have a video appear below the description and the product image by making use of the <!-- split --> tag. Go into your Product admin - clicking the <> Show HTML button type in <!-- split --> above your video embed code:
The results would look like this:
Adding a video content block (product.details)
The product.details template in our Turbo, Retina, and Responsive themes contain a 'video' content block (just like the video homepage section) to add.
In the Flex theme, all 3 of the product templates: classic, image scrolling, sections, contain an option to add in a 'video' content block as well.