When editing an advanced page, you can use the "Video Group Widget" to insert a YouTube, Facebook, or Vimeo video and adjust the video's position.
⚠️ Before you begin:
- Currently, SHOP Builder only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
- After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited, and the layout may be messed up. Please take note of this before publishing the page.
This article will cover the following:
1. Add Video Group Widget
Step 1
In the SHOPLINE Admin, go to [Online Store Design] > [Pages] and click Advanced Page/ Edit to open up the Advanced Page settings page.
Step 2
Click the Widget button.
Step 3
Click the Video Group widget.
Step 4
Enter the YouTube, Facebook, or Vimeo video URL.
Click + Video to add more videos. It supports adding up to 4 videos in a horizontal row.
*Notes:
- Currently, inserting a timestamp or shortened URL is not supported.
- Due to the interface limitation on the mobile version, it only supports displaying 1 video in a horizontal row.
Step 5
Enter the video title and set the text alignment (Left/ Middle/ Right).
Step 6
Adjust the following options for the video (the first 3 are set disabled by default):
- Full Screen: Adjust the video width. You can set the video as fullscreen.
- Auto Play: After you switch on this setting, the video will autoplay when customers scroll to the location of the video.
- Auto mute: You can set the video on mute, which will be muted by default when playing.
- Video Proportions: Select the video proportions. You can select 16:9, 4:3, or 9:16.
- Padding: You can adjust the padding between the video and the page.
*Notes:
- It is recommended to choose the appropriate option based on the proportion during video recording to prevent black frames on the side.
- According to common browser specifications (applicable to Chrome, Safari, and other browsers), if you want videos to autoplay, you need to enable mute by default. For more details on the video playback, you can refer to the section below.
Step 7
When setting up, you can click the Save button on the bottom and a preview screen of the added video group widget will display on the right.
Or click the Preview Page button on the top right to view the complete storefront preview.
*Note: The following illustration is based on adding the Facebook video. Full-screen mode and watch on Facebook options are supported.
Step 8
Upon completion, click the Publish button, and customers will be able to see the added content of this page in the storefront.
2. Video playback
Scenario 1
"Auto Play" is enabled + Customers visit the page on mobile device.
Autoplay is currently not supported for this scenario. Customers must tap the play button to start the video. The video will be played directly on the storefront.
Scenario 2
"Auto Play" is not enabled + Customers visit the page on mobile device.
Customers must tap the play button twice to start the video. The video will be played in full-screen mode.
Scenario 3
"Auto Play" is enabled + Customers visit the page on desktop.
You must also enable the "Auto Mute" option to autoplay the video.
Scenario 4
"Auto Play" is not enabled + Customers visit the page on desktop.
Customers must click the play button and the video will be played on the storefront.
3. Notes
- If the video is deleted or restricted to certain viewers, the video will fail to load.
- If you add a livestream video and enable the "Auto Play" and "Auto Mute" options:
- On the mobile version, customers must tap the play button and the video will play in full-screen mode.
- On the desktop version, the video will autoplay if the "Auto Mute" option is enabled.
- The screen will turn black when loading the video. This is a normal loading process on Facebook.
Read more
- Gallery Widget |SHOP Builder
- Image with Text Widget | SHOP Builder
- Product With Text Widget | SHOP Builder
- Category Widget | SHOP Builder
Comments