💰 How to use the Discount banner?
Last updated
Was this helpful?
Last updated
Was this helpful?
A Discount Banner is a promotional banner that highlights active discount codes on your store, helping customers easily find and apply deals.
✔ Boost Conversions – Make discounts more visible to encourage purchases. ✔ Increase Coupon Usage – Ensure customers don’t miss out on available discounts. ✔ Improve Shopping Experience – Provide a seamless way for shoppers to copy and apply codes at checkout.
In your dashboard, navigate to Banner > Create Banner
Select Discount Banner from the banner type list.
Once selected, you will enter the banner editor, which consists of:
Top Bar: Rename, activate/deactivate, and preview on PC/Mobile.
3.1 Set Up Banner Message
Enter a message to display on the banner. Example: "ALL PRODUCTS {{discount_value}} OFF"
{{discount_value}} → Keep this variable to automatically display the discount percentage from the coupon you will select in the next step.
3.2 Select Coupon
You can select the discount code from Shopify to display the code and discount value automatically.
Navigate to Banner Element > Coupon > Search Discount.
The selected discount will display details: Name, Type, Code, Value, Usage Conditions.
You can remove or replace the selected discount at any time.
💡 Important Note: The app only displays active discount codes but does not check if they are applicable at checkout. Please check the discount conditions configured in Shopify Admin.
If you don't have the discount code, please follow the guide below to create one:
3.4 Add Call to Action
Default Action Type: Copy button → Allows customers to copy the displayed discount code.
Button text: Describes the button action.
Text to copy: Displays the coupon value (cannot be edited when a discount is selected).
Success content: Notification shown after the customer successfully copies the code.
📌 Ensure the banner matches your store’s branding
✔ Editable elements include:
Layout & Background
Positioning (Top, Bottom, Custom)
Font & Button Styling
Custom CSS for advanced styling
💡 Tip: Use the preview mode to check how the banner looks on PC & Mobile.
📌 Control when and how long the banner appears
✔ Schedule:
Choose to display the banner in a period of time or in a fixed time range.
Example: Display the banner only during Black Friday sales.
✔ When to show:
Delay Before Showing (No delay, 5s, 10s, etc.).
Show Again After Closing (After reload, after days, or never).
Where to Display: Show the banner on selected pages.
Who Sees It: Use Shopify Customer Tags to target specific users.
Country Settings: Display different banners based on location.
Support multiple languages so international customers see the correct banner.
✔ Final Check:
Save the banner and preview on Storefront (PC & Mobile).
Ensure conditions target the correct customers to avoid confusion.
Left Sidebar: Configure Content, Style, Schedule, Conditions, and Translation.
In the popup modal, search for the discount by title, select one, and click Select.
Click Save Discount. 👉 For more details, refer to .
💬 If you have any related questions, please contact us via Live chat or for further assistance.
