DIY Guide to Embed A YouTube Video in Shopify Product Page
Follow this step-by-step code tutorial to embed a Youtube video in your Shopify store:
Step 1: starting
- making a copy of your theme
- Now you are in your admin panel
- go to Online stores, and in the theme where you want this new feature, click Actions, and then click Duplicate.
- 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 you want
- Above the video you will see an arrow to share this video
- click on share button 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-
- go to Vimeo.com
- find the video that you want to embed in your store
- click the Share button below the video.
- A new popup will appear and you will see the link there.
- be sure that the options selected below are the options that you want, and 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.
- Now 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
- you want a different video for each produc
- 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
- now paste your code where you want to be displayed (above or below the text). Make sure that the video is added.
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.