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.
About Andrew Durot
He is the co-founder of Ecom Experts, a Shopify focused development agency.
Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.
Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.
Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Add A Back-to-top Button On Shopify Step-by-Step Tutorial
- How To Hide Add To Cart Button On Shopify - 2021
- Ask How Customers Heard About Your Store On The Cart Page - 2021 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2021 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2021
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store