DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial

Ever looked at a Shopify store with videos and wondered how they managed to embed YouTube videos in their store? Well we can show you, because as you would see later on, we have also embedded opur YouTube video in this tutorial. 

Videos have been shown to increase customer engagement and with Shopify stores, it works even better giving site visitors a feel of your website and even more information while they browse through your website. 

Think of embedding YouTube videos into your website as giving your customers an online walkthrough of your store ensuring they are making the right purchase. Here how to embed YouTube videos in your Shopify store. 

Embed A Video in Shopify Product Page Tutorial

Follow this step-by-step code tutorial to embed a Youtube video in your Shopify store:

Step 1: starting

We always recommend making a copy of your theme. Once you are in your admin panel, you have to go to Online stores, and in the theme where you want this new feature, click Actions, and then click Duplicate. When you have done this part, you can start to develop.

Step 2: Getting the video from Youtube or Vimeo 

How we can get the video link from both sources? Let's start with Youtube. Go to youtube.com and find the video we want. Above the video you will see an arrow to share this video, click there, and a new pop up will appear. Select Embed, and on the right side of this video, you will see the “iframe” link and some options. Select the options that you want to give style to your video, then click on a copy at the bottom.

If you want it from Vimeo, you have to go to Vimeo.com and find the video that you want to embed in your store, then click the Share button below the video. A new popup will appear and you will see the link there. First, be sure that the options selected below are the options that you want, then copy the code to embed.

Step 3.1: add the video to all Products

Once we have the video in our clipboard (after copy from youtube or vimeo), and our theme duplicated, click on Actions on this theme, then select Edit code. Now we have to find the place where we want to add this video, for example, we will add it on the product page. To do that search under the Sections directory in the left sidebar and choose product-template.liquid. Paste the code from Youtube or Vimeo where you want it to be shown and click on save.

Step 3.2: add the video to specific Products

Now that you copied the video code from youtube or vimeo, go to the Shopify admin and click on Products. Choose the product you want to edit and now we should paste the code we copied in the previous step. 

To do that simply click on the Show HTML button “<>” and paste the code where you want it to be shown. Click on Save. 

Step 4: Testing

Open your site in a new tab and open a product page, you will see the video there.

Step 5: other option

If you want a different video for each product, you will have to add it to the Shopify product backend instead of the template. Go to products, then find the product that you want to add to this video. Open it and in description click on Show HTML., then paste your code where you want to be displayed (above or below the text). Make sure that the video is added. Thanks!

Embed A Video in Shopify 

Now that you have learnt how to embed a Youtube Video in your Shopify product page, you should get started already. Also, let us know if this tutorial works for you by leaving a comment. 

Visit Ecom Experts for more Shopify coding tutorials.