When editing the app's homepage, you can add a YouTube or Vimeo video to the homepage by adding a Video element and adjusting the position of the video.
⚠️ Before you start: For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.
This article will cover the following:
1. Add Video element
Step 1
Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Homepage Design] > [Current Template]. Click Set up to enter the app page editor.
Step 2
Click the ⊕ Add an element button.
Step 3
Select the Video element and drag it to the middle of the preview area to set the position. Once the element appears, it means that the new element has been successfully added.
2. Edit Video element
Step 1
Enter the YouTube, Facebook, or Vimeo URL.
*Notes: Facebook video URLs only support the "videos" or "watch" formats, for example:
- https://www.facebook.com/Creator/videos/01234567890
- https://www.facebook.com/watch?v=0123456789
Step 2
Enable this option to display images/videos edge-to-edge without blank margins.
Step 3
Click add an image to upload the cover image. JPG/PNG/JPEG/GIF formats are supported, with a maximum file size of 2MB.
*Notes:
- Uploading a cover image is optional. However, if you are using a Facebook video, we recommend uploading a high-quality cover image to avoid a blurry display.
- Once a cover image is uploaded, Facebook videos will no longer play in the preview area, but customers can still watch them in the app without any issues.
Step 4
Below the video link, you can choose the "Image (Video) Proportion." Based on the proportion (aspect ratio) of your video, you can decide whether to use a horizontal or vertical layout for the video presentation or display on the storefront.
- The proportion for the horizontal layout is 16:9.
- The proportion for the vertical layout is 9:16.
Step 5
The title is disabled by default. Switch on the toggle to display the title with no more than 30 characters.
Step 6
The description text is disabled by default. Switch on the toggle to display the description with no more than 30 characters.
Step 7
Set Release Schedule (scheduled shelf time). Click the "calendar" icon next to Start and End Time to select the date and time, or check the Never expires box.
If you click the icon to select the date and time, a pop-up window will appear (as shown below). After completing the settings, click OK to proceed.
Step 8
You can move the element position or delete the element in the element list area on the left (➊), the preview area in the middle (➋), or at the bottom right (➌).
Step 9
Once you have confirmed the setup, click Save to save the changes. If you have finished editing the Video element, click Update and use to publish your updates.
Comments