You can add a slidable banner to highlight campaigns or special products. Each banner can display a maximum of 10 images and URLs. You can also change the location and the content of the slidable banner.
Step 1
In the Admin, go to [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to edit the Slidable Banner element.
Step 2
Step 3
Edit the relevant content in the bar to the right.
i. Set Auto-switch time interval
Click on the drop-down menu for "Auto switch time interval" to see two options: "3s" and "5s."
ii. Set image proportion (aspect ratio)
You can choose from three different settings "Horizontal, Vertical, and Original Image Proportion" according to the banner image's display effect on the storefront.
- The proportion for the horizontal layout is 16:9.
- The proportion for the vertical layout is 9:16.
- The original image proportion displays the complete image without altering its aspect ratio.
iii. Set Release Schedule
Set the release schedule if necessary. Click on the "calendar" icon to the right of the fields to set the start and end time for your banner.
Step 4
Click ⊕ Add (X/10) in the element area on the left to add an image or a video to the Slidable Banner element. You can add up to 10 images or videos. An image is added by default when you click to add an element.
Step 5
Set up the image you add in the Edit area on the right. Click Image as your Slidable Banner Type as shown above.
i. Add an image
Click + add an image. Read the instructions in gray carefully to upload an image in proper size.
ii. Select mask intensity
The system defaults to 20%. You can click on the drop-down menu to select the desired mask intensity. There are five options available: "0%, 20%, 40%, 60%, 80%."
iii. Enter the title and content
The language display of the component will follow the order of "English, Traditional Chinese, Simplified Chinese." That means if all three are filled in, the interface will display English.
iv. Display button setup
Upon switching on the Display button toggle, enter the Button title. The button will be displayed in the center of the Slidable Banner component.
v. Set jump link
There are three types of Jump Link options available, "Product list page, Promotions, and Custom URL."
A. Categories
For merchants who check "Categories," please click ⊕ Select a product category and choose the proper categories in the pop-up window. Upon confirmation, click Confirm. For more details about how to set a Product list element, please refer to this article.
B. Promotions
For merchants who check "Promotions," please click ⊕ Select a promotion campaign and choose your desired campaigns in the pop-up window. Upon confirmation, click Confirm. For more details about how to set a Promotions element, please refer to this article.
C. Custom URL
For merchants who click "Custom URL," please enter the link in the field. Note that the entered link must start with either "https://" or "http://".
vi. Set the font alignment and font color
Step 6
Set up the video you add in the Edit area on the right. Click Video as your Slidable Banner Type as shown back in Step 4.
i. Enter a YouTube or Vimeo embed link
ii. Select mask intensity
The system defaults to 20%. You can click on the drop-down menu to adjust the intensity. There are five options available: "0%, 20%, 40%, 60%, 80%."
iii. Enter the title and content
Please refer back to iii. of Step 5.
iv. Set the font alignment and color
Please refer back to vi. of Step 5.
Step 7
Once you finish adding the "Slidable Banner" element, you can click Save to save the changes. And once you finish editing the entire homepage, click Update and use to publish the changes to your app.
Comments