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.
⚠️ Before you start: For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.
Step 1
Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Current Template]. Click Set up to enter the app page editor.
You can also go to [Shopper App Management] > [App Design] > [Member Center] and click Set up to enter the app page editor.
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. Full width
Enable this option to display images/videos edge-to-edge without blank margins.
iii. 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.
iv. 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
A. Native page
If you select "Promotions / Selected Category / Product detail page", click ⊕ Select a promotion campaign/product category/products, then choose the item in the pop-up window and click Confirm.
If you select "Top Ranking", choose an existing page from the dropdown menu.
B. Custom URL
If you select "Custom URL", 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.
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