When editing an advanced page, you can add the "Video Group Widget" to insert a Youtube or Vimeo video and adjust the video's position.
⚠️ Before you begin:
- SHOP Builder currently 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.
1. Add Video Group Widget
Step 1
Proceed to SHOPLINE Admin > [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 or Vimeo video URL. You can enter a general URL or a shortened URL. You can also click on + Video to add more videos. It supports displaying up to 3 videos in a row for the desktop version.
*Note:
- Currently does not support timestamped URLs.
- Due to the screen size limitation on the mobile version, it only supports displaying one video in a row.
Step 5
Enter the video title and set the text alignment. (Left/ Middle/ Right).
Step 6
Then scroll down to adjust the video-related settings, you can adjust the following options (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, and it will be muted by default when playing.
- Video Proportions: Select the video proportions, you can select 16:9 or 4:3.
- Padding: You can adjust the padding between the video and the page.
*Note:
- It is recommended to use the same video proportions as when it was filmed to prevent black frames on the side.
- According to common browser guideline (applicable to Chrome, Safari, and other browsers), the video will only autoplay with sound under the following circumstances:
-
- The viewer has previously interacted with the website (i.e., clicked on the button and switched pages).
- The viewer is viewing the desktop version, has previously visited the website, and played the video with the sound on.
-
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 video group widget supports "watch on YouTube" and "full screen" buttons.
Step 8
Once the above is completed, click the Publish button, and customers will be able to see the added content of this page in the storefront.
Read more
- Gallery Widget |SHOP Builder
- Image with Text Widget | SHOP Builder
- Product With Text Widget | SHOP Builder
- Category Widget | SHOP Builder
Comments