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, please note:
- 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 to disabled by default):
- Full Screen: Adjust the video width. You can set the video to full screen.
-
Minimal Mode: After you switch on this setting, third-party controls (such as the progress bar, volume, and logo) will be hidden once the video starts. Customers can only play or pause the video.
- Note: Some controls may remain visible due to platform restrictions. For more details on the video playback, you can refer to the section below.
- Auto Play: After you switch on this setting, the video will autoplay when customers scroll to the location of the video.
- Loop Playback: Set the video to replay from the beginning when it ends.
- 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.
- Auto Play must be enabled to play videos in minimal mode.
- As restrictions for minimal mode and loop playback vary by platform, we recommend enabling "Auto Play" and "Auto Mute" before applying these settings.
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
Once the setup is complete, 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 devices.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 devices.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 the 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 the desktop.Customers must click the play button and the video will be played on the storefront.
Scenario 5
"Minimal Mode" and "Loop Playback" is enabled + Customers visit the page on the desktop.YouTube
You must also enable the "Auto Play" and "Auto Mute" to use minimal mode and loop playback.
*Note: Controls will be hidden 1-2 seconds after playback starts. Customers can tap anywhere on the video to pause, which will display the recommended videos list. Tap again to resume playback.
Vimeo
You must also enable "Auto Play" to use minimal mode and loop playback. The video will be muted by default once it starts.
*Note: Controls will be hidden once playback starts. Customers can tap anywhere on the video to pause and tap again to resume playback.
You must also enable the "Auto Play" and "Auto Mute" to use minimal mode and loop playback.
*Note: Controls such as the progress bar and volume will appear when the video is paused, but they remain inactive. A click on these controls only resumes playback.
Scenario 6
"Minimal Mode" and "Loop Playback" is enabled + Customers visit the page on mobile devices.
YouTube
You must also enable the "Auto Play" and "Auto Mute" to use minimal mode and loop playback.
*Note: Controls will be hidden 1-2 seconds after playback starts. Customers can tap anywhere on the video to pause and tap again to resume playback.
Vimeo
You must also enable "Auto Play" to use minimal mode and loop playback. The video will be muted by default once it starts.
*Note: Controls will be hidden once playback starts. Customers can tap anywhere on the video to pause and tap again to resume playback.
Minimal Mode is not supported, and the video remains unplayable after a tap. You must disable "Minimal Mode" or enable "Auto Mute" to use loop playback.
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