How to Upload Your Video to a Product Page on Shopify?

I encountered this issue when a client asked me to add a video to their product page. I could not figure out how to upload my video to a product page on Shopify. However, I found a quick fix for this problem.

Insert video with the rich text editor

Using the rich text editor, you can embed videos in blog posts, pages, product descriptions, and collection descriptions.

If you want to embed a video you’ve created, you first need to upload it to a video streaming site such as YouTube or Vimeo.

Note: YouTube does not allow you to disable related videos, but you can specify related videos should be from the same channel as the video that just played.

• Copy video’s URL by pressing ctrl + C on a PC or command + C on Mac.
• Visit Embed Responsively. Embed Responsively is a tool that will give you an improved embed code for your video.
• Select the site where your video is uploaded, and click the button.
• Paste the video’s URL that you copied into the Page URL box on Embed Responsively by pressing ctrl + V on a PC or command + V on Mac.
• Click Embed. Embed Responsively will create the embed code for you.
• If the video is from YouTube and you want to show only related videos from the same YouTube channel, then find the video’s URL in the embed code. Copy and paste ?rel=0 at the end within the quotation marks:

• Copy all of the code inside the Embed code box.
• In your Shopify admin, click the Insert video button in the rich text editor:

• Paste the embed code into the box in the Insert video dialog.
• Click Insert video. Click Save when you are finished. It will save your changes to the item you were editing.

Upload your video to Shopify

Note: Make sure you use MP4 video format; it is the only supported video format currently available. If your video file is larger than 20MB, you’ll have to upload it to YouTube and use the embed code. Otherwise, you’ll need to find a hosting provider for your video instead of using my Step 1 suggestion of Shopify Files.

Step 1: Add your video to the Files page:

• Log in to your Shopify store, and go to Settings > Files > Upload Files.
• Select a video to upload, then click Open. Copy this video URL and paste it into a notepad file (so that we can copy this URL later).

Step 2: Paste the Video URL to your product with the rich text editor:

• Click the Show HTML button to view the HTML code for the product description inside the rich text editor

• Paste your video URL from Step 1. Add this code to the HTML:

<video controls="controls" style="max-width: 100%; height: auto;">
  <source src="your_url_goes_here" type="video/mp4" />
Your browser does not support our video.
</video>

Be sure to replace “your_url_goes_here” in the code with the URL from Step 1

• Click Save.

Let me know in the comments if you face any problems. If you need help with Shopify and conversion rate optimization, please feel free to contact me.