Promotions Element|Shopper App


You can add a promotion element to display promotion campaign details. Customers can browse the campaigns on the app. The app supports adding up to 10 Promotion elements, with each element displaying up to 10 campaigns.


In this article, you will be introduced to:


1. Add a Promotion element

Step 1

Proceed to the SHOPLINE Admin > [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to enter the page and start configuring the Promotions element. 



Step 2

Click on Add an element (there are two entries on the page, as shown below).



Step 3

Select the "Promotions" component and drag it to the blue-background Preview Area in the middle where it says "Place the element here." Once the message "Confirm placement" appears, you can consider the addition successful.



Step 4

Edit the content of the Promotion element. You can select either "One banner on a line" or "Two banners on a line" (i.e. displaying one promotion campaign or two on a line) and then set up your "Release Schedule" according to your requirements.



Step 5

Click on the Promotion bar (in this case, Promotion 1) in the Element Area on the left, and the corresponding setup options will appear on the right side of the page for you to edit the content.



Step 6

Click on ⊕ add an image. It is recommended to use an image size of 700 px x 350 px, and the image should not exceed 2 MB.



Step 7

Set the "Jump Link" for the campaign. There are three options available: "Categories," "Promotions," and "Custom URL."

  • The system defaults to "Promotions." After clicking on ⊕ Select a promotional campaign, a pop-up window will appear where you can choose the campaign according to your needs. Once you have made your selection, click Confirm to complete the process. 

  • If you choose Categories, please click on ⊕ Select a product category. In the pop-up window, choose the appropriate category, and then click Confirm.

  • If you choose Custom URL, please enter a link in the field below that begins with either "https://" or "http://".


Step 8

Enter the "Campaign name." This name will be displayed below the campaign's image, as indicated in the picture below.



Step 9

Click Add Promotion(x/10) to add multiple images for a single Promotion element if needs be.



Step 10

If you need to move or delete a component, you can perform the related actions in the left Element Area, middle Preview Area, or at the bottom of the Edit Area on the right (as indicated by numbers 1 to 3 below).



Step 11

Once you have completed the setup, click Save to save the changes on the element. If you have completed all editing on the homepage of the app, click Update and use to publish your edits.




2. Display effects of the Promotion element

One campaign banner on a line

If a single Promotional campaign element contains more than one image, the images will be arranged vertically in descending order.



Two campaign banners on a line

If a single Promotion element contains more than two images, they will be arranged vertically in descending order. It is recommended to set campaigns in pairs.







Have more questions? Submit a request