Display ongoing store promotions in the app, allowing customers to claim available coupons.
⚠️ Before you start:
- For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.
- The old Discount Code element is no longer available. However, if you have already configured and published it on your app, it will continue to display and function normally.
The article will cover the following:
1. Set up the Coupon Code 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.
Step 2
Click Add an element and select the "Coupon Code" element. Drag it to the preview area at the center to the location where you can insert the element.
Step 3
Complete the following settings in the right editing area.
i. Title
Set the title. It is recommended that you enter the discount type of the discount code. You can enter up to 100 characters.
ii. 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 promotions
Step 1
Add up to 5 promotions in the left panel. You can also enable, disable, or delete the Coupon Code element here.
Step 2
Select a promotion, then click Select a promotion campaign in the right editing panel. Make your selections and click Confirm.
*Note:
- Please go to SHOPLINE Admin > [Promotion & Rewards] to create a campaign first. Supported promotion types include: Promotions, Free Shipping, Bundle Promotions, and Reward Campaign.
- Currently, only promotions with the Apply Method set to "Auto Apply Promotion" or "Coupon" are supported. If your coupon’s Acquisition Method is set to "Display Coupon in the Shop Coupon Center" or "Send Coupon via Links or Customer Groups", customers can also claim the coupon through this element if they have not received it yet.
Step 3
Click Save to save the changes. And once you finish all editing, click Update and use to publish the changes to your app.
3. App display effect
- When there are multiple promotions, customers can swipe left and right to view more.
- Different icons are shown for Discount, Free Gift, and Free Shipping promotions. Free Shipping promotions are styled in orange, while other promotions are styled in red.
- Coupons that need to be claimed will display a "Claim" button. Once a customer successfully claims the coupon, it will update to a "View" button.
Comments