On the product page, you can place a video in the photo gallery and in the description block. The video must be pre-uploaded to any platform that provides an iframe code for embedding on the product page, such as YouTube.
For placing a video:
On the video page in the service, copy the iframe code to paste.
Place the obtained code in the Image, Gallery, or Product description field according to the instructions.
Getting a code to embed in the product page
Let's consider getting a code to embed a video using YouTube as an example. It's better to post videos for products on your own channel, because videos on other people's channels may contain ads that annoy your customers.
On the YouTube video page, select Share → Embed.
Copy the code. An example of what it should look like can be seen below.
Example code for embedding a video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/NKFpndpdx1M?si=-VNNrRfO7tT0xNOS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Getting a Shorts code
Vertical videos up to 60 seconds long are included in the Shorts section when uploaded to YouTube.
To get the code for Shorts video:
Right-click on the YouTube video viewing page, .
Select Copy embed code. An example of such a code is shown below.
Example code for embedding a Shorts video:
<iframe width="378" height="672" src="https://www.youtube.com/embed/-xPm2UYh0uE" title="Програми для менеджменту" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Placing videos in the Image and Gallery blocks
For placing videos in the Image and Gallery blocks:
Go to the product settings in the admin panel.
In the Image or Gallery field, select the image that will become the video preview.
Click the image to edit, paste the copied code in the Video code field, and then click Save.
Video block on the product page
Додано можливість виводити на сторінці товару окремий блок Відео, в якому автоматично відобразяться всі відео, додані в полях Фото та Галерея.
Video block on the product page
To enable the block, go to the Website → Design → Design editor section of the admin panel, expand the Product page section, go to the Page layout tab and turn on the Video element.
Video sticker in the mini-card
If you have added a video to the image gallery, the Video system sticker will be displayed on the product page and in the mini-card.
Video sticker in the mini-card
How to set up the sticker:
In the admin panel, go to Website → Product stickers.
Click Video sticker to enter the settings. You can choose a sticker color, edit text, and change other settings.
In the Activation way field, Video must be selected for the sticker to be automatically displayed in products to which a video has been added.
Check the Show on storefront box and click Save.
You can quickly turn a sticker on or off using the checkbox in the list of stickers.
Placing a video in the product description
You can also place a video in the product description block. To do this:
In the visual editor of the Product description block, click Source to display the text in HTML format.
Place the code in the desired location in the description and click Save.
Click Product on storefront to check if the video is displayed correctly on the product page.