Announcement Bar Element

You can add an announcement bar to promote upcoming campaigns. Currently, the Admin supports 3 announcement bars, where you can set up the background and text color of the bar, the content to be displayed, and the jump link.

⚠️ Before you start: For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.

 

The article will cover the following:

• Set up the Announcement Bar element
• Set up the Announcement Bar content

 

1. Set up the Announcement Bar 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.

Click Add an element and select Announcement Bar Element. under "Campaign Element."

 

Step 2

Click the Announce Bar in the left panel.

 

Step 3

Complete the following settings in the right editing area.

i. Display mode

• Horizontal transition
  
   
• Vertical transition
  
   
• Flash transition
  

ii. Interval time

You can set an interval of 1 to 5 seconds.

 

iii. Color settings

You can change the font and the background color if needs be.

 

iv. Release schedule (optional)

If you have set a release time, the element will be displayed in the app at the specified time.

 

2. Set up the Announcement Bar content

Step 1

Add up to 3 announcement bars in the left panel. You can also enable, disable, or delete the Announcement Bar element here.

 

Step 2

Click the announcement bar, then choose a style in the right-side editing panel and complete the following settings.

i. Select a type

• Text
  
• Countdown
  

 

ii. Announce Bar content

In the Edit area to the right, fill in the text content for the announcement bar.

 

If you select the countdown style for your announcement bar, you will also need to set the campaign period and customize the content displayed before and after the countdown.

 

iii. Jump link

There are three types of Jump Link options available, "Categories, Promotions, and Custom URL."

• 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.

 

• 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.

 

• 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://".

 

Step 3

Click Save to save the current settings. Upon finishing all the editing, click Update and use to publish the settings to the app.

 

 

 

 

Read more

• Product List Element | Shopper App
• Promotions Element｜Shopper App