Knowledgebase

How Can I Add a Video to My Product Page?
 

The power of video in e-commerce is noticeably bringing products to life, improving visitors experience and increasing conversions. The Product Video feature allows easily adding a product related video, whether it's a product review, demonstration, or viral commercial; and displaying it within your product pages.

Note
This video feature does not support the ability to add videos with timestamp markings to play the video from a specific point.

To Add a Video to your product:

  1. Go to Product >Product List
  2. Find the product you'd like to edit and click on either its ID or Name to open it.
    You can also look to the far right of the product and click on the "Action >Edit" button
  3. When viewing the product's details, click on its Images Tab located along the top.

You will now be in the Product's Images tab where you can add your product's main and supplement images. Look beneath your product's Main image and Thumbnail sections, and you should see a "Video" section. 

This section consists of a text field where you will add the URL to your desired YouTube video. Simply copy the URL (from the browser's address bar) of the video that you'd like to display on the page and paste it into the field with the following steps.

  1. Enter the embed URL (include the https:// prefix!) for the video that you'd like to play on the product page into the Video URL field
  2. Click the Save button found along the top of the page.

Note
In some cases, the URL that is being copied may contain additional actions or embedded settings in the URL that are not compatible with the YouTube video display on product pages.

When copying your YouTube video URL, please make sure that the URL only contains the main video path which is typically something like this:

https://www.youtube.com/watch?v=[VIDEO_ID]
or
https://www.youtu.be/[VIDEO_ID]

This is known as the video's WATCH URL and it is the URL that should be used for the store's product page. You can typically copy the WATCH URL simply by copying the path on the address bar (while you're watching the video) or otherwise, click on the SHARE button and copy the youtu.be URL provided. This will ensure you are copying the the correct URL

Any URL that does not follow the above format may cause errors upon playback or not even play at all from your product page.

Examples of non-compatible URLs include

  • Embedded iframe URL: https://www.youtube.com/embed/[VIDEO_ID]
  • URL with object parameters: http://www.youtube.com/v/[VIDEO_ID]?fs=1&hl=en_US
  • Video URL from a playlist: https://www.youtube.com/watch?v=[VIDEO_ID]=[PLAYLIST_ID]

Also note that videos listed as private on YouTube will not display, since they require permission from the video owner to be viewed.

Once the product is saved, your visitors will be able to view the video directly from the product listing page!

Note
While the video function was intended to work with YouTube specifically, you can also embed video from other sources if you'd like (wistia, vimeo, etc). As long as you have the video's path/URL, you can place it in the URL field as needed.

To Add a YouTube Short

Shift4Shop also features support for YouTube Shorts, so you are not restricted against using them natively on our platform. To do so:

  1. Go to Product >Product List
  2. Find the product you'd like to edit and click on either its ID or Name to open it.
    You can also look to the far right of the product and click on the "Action >Edit" button
  3. When viewing the product's details, click on its Images Tab located along the top.
  4. Go to the Video section.

From here, navigate to the YouTube Short on YouTube and copy its URL. Before you paste it into the correct field, you will need to first edit the path to replace the text "shorts" to "watch". For example:

  • Your YouTube Short will be structured to look like: https://www.youtube.com/shorts/[VIDEO_ID]
  • Update this to display as: https://www.youtube.com/watch/[VIDEO_UD]
  • It is now ready to be pasted!

Now, once you have your updated URL:

  1. Return back to the Online Store Manager and paste this edited URL into the Video URL field.
  2. Click the Save button found along the top of the page.
Help Desk Software by Kayako fusion