Discount Code Element ｜Shopper App

You can add a "Discount Code" element to incorporate a promo code display element on the app homepage. You can also adjust the position of the component to optimize the app's interface display effect.

 

In this article, you will be introduced to the following:

• How to add a Discount Code element
• How to edit the Discount Code element

 

⚠️ Before you start, please be reminded that: 

• If you want to use the Discount Code element, you need to set the coupon in the SHOPLINE Admin > [Promotions & Reward] > [Promotions] first. Click Edit to the right of the campaign entry and set "3. Set Benefits & Criteria." Currently, the Discount Code element only supports "Single Coupon Code" and "Get Coupon Link." 

 

1. How to add a Discount Code element

Step 1

In the Admin, go to [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to edit the "Discount Code element." 

 

Step 2

Click the ⊕ Add an element button.

Select the Discount code element under "Campaign Element" and drag it to the Preview area in the center. If the Discount code element appears in the Preview area, it means that the new element has been successfully added.

 

Click the drop-down menu to select the discount code you want to display, or directly search by the name of the discount code.

*Note: If you do not set the coupon in the SHOPLINE Admin > [Promotions & Reward] > [Promotions] > [Edit], discounts will be unavailable here. The display of "Single Coupon Code" and "Get Coupon Link" is slightly different; you can check the Preview area in the middle.

 

Step 3

Set the description. If it is a "Single Coupon Code," it is recommended to instruct members to copy the discount code. If it is a "Get Coupon Link" type of discount code, it is recommended to instruct members to claim the discount coupon.

 

Step 4

Set the Display button. The button is switched on by default. As the toggle is switched on, enter the Button title. If you are using "Single Coupon Code," it is recommended to enter "Shop Now"; if you are using "Get Coupon Link", it is recommended to enter "Claim Now."

 

Step 5

Set the Jump link. There are three types of Jump Link options available, "Categories, Discount code campaign page, and Custom URL."

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

ii. Discount code campaign page

For merchants who check "Discount code campaign page," the default page it will redirect to is either the homepage of your Online Store or the specific promotional campaign page. For further details, please refer to Show Promotion Campaign Information on Product Details Page. 

iii. 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 6

Set Release Schedule. This is entirely optional. If you need to set start and end times for your discount code, click on the "calendar" icon to the right of the field.

 

Step 7

Once you finish adding the "Discount code" element, you can click Save to save the changes. And once you finish all editing, click Update and use to publish the changes to your app.

 

 

 

Read more

• Promotion Page Settings
• Show Promotion Campaign Information on Product Details Page
• Set Up a Product Category
• Product List Element | Shopper App