Video Element


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.


This article will cover the following:


1. Add Video element 

Step 1

Go to SHOPLINE Admin > [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to proceed. 

Screenshot 2023-08-23 at 4.16.05 PM.png


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 or Vimeo URL. 

Screenshot 2023-08-23 at 4.23.37 PM.png


Step 2

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.
    Screenshot 2023-08-23 at 4.29.52 PM.png

  • The proportion for the vertical layout is 9:16.
    Screenshot 2023-08-23 at 4.30.02 PM.png


Step 3

The title is disabled by default. Switch on the toggle to display the title with no more than 30 characters.



Step 4

The description text is disabled by default. Switch on the toggle to display the description with no more than 30 characters. 



Step 5

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.

Screenshot 2023-08-23 at 4.34.08 PM.png


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.

Screenshot 2023-08-23 at 4.34.17 PM.png


Step 6

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 (➌).

Screenshot 2023-08-23 at 4.40.39 PM.png


Step 7

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. 

Screenshot 2023-08-23 at 4.46.09 PM.png






Have more questions? Submit a request