How to use the Discount banner

What is a Discount Banner?

A Discount Banner is a promotional banner that highlights active discount codes on your store, helping customers easily find and apply deals.

Benefits of Using a Discount Banner

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

Create a Discount Banner

Step 1: Navigate to the Discount Banner

• In your dashboard, navigate to Banner > Create Banner

• Select Discount Banner from the banner type list.

  

Step 2: Configure Banner Settings

Once selected, you will enter the banner editor, which consists of:

• Left Sidebar: Configure Content, Style, Schedule, Conditions, and Translation.
• Top Bar: Rename, activate/deactivate, and preview on PC/Mobile.

  

Step 3: Set Up Banner Content

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.

  
• In the popup modal, search for the discount by title, select one, and click Select.
• 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:

📌 How to create a discount in Shopify?

• Go to Shopify Admin > Discounts > Create Discount.

  

• Choose the discount type.

  

• Configure discount settings (code, value, applicable products/collections).

  

• Click Save Discount. 👉 For more details, refer to Shopify’s documentation.

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.

Step 4: Customize Banner Appearance

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

---

Step 5: Schedule Banner Display

📌 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).

---

Step 6: Set Display Conditions

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

---

Step 7: Add Translations (Optional)

• Support multiple languages so international customers see the correct banner.

---

Step 8: Save & Preview

✔ Final Check:

• Save the banner and preview on Storefront (PC & Mobile).

• Ensure conditions target the correct customers to avoid confusion.

---

💬 If you have any related questions, please contact us via Live chat or [e-mail] for further assistance.