Customizing the Display Style for Discount Codes

The Design Maker for Campaigns app enables you to customize how your discount codes are displayed across different storefront pages, including the Product detail page, Activity landing page, and Checkout page.

Easily customize the layout, colors, and text for each campaign to match your brand identity, ensuring customers immediately notice and apply their savings. You can also create a unified style to apply across multiple discount codes, guaranteeing a professional and consistent look throughout your campaigns.

Follow the steps below to begin configuring your display design.

Display Settings for the Product Detail Page

Displaying discount codes on the Product detail page helps customers quickly notice promotions, encouraging them to apply the discount and complete their purchase.

The display design can be set in two ways: customize each discount code individually, or enable Follow global style to apply your unified settings.

Customizing Individual Discount Code Designs

To configure the display for a specific discount code:

1. From the Design Maker for Campaigns dashboard, go to the Discount code campaigns tab and select the code you want to customize.

2. Go to the Product detail page tab and turn on the Display coupon toggle.

   

3. In the left-side settings panel, configure your design options:
   • Template selection: Choose a preferred display template.
   • Design: Depending on the selected template, the following options may be available:
     • Enable smart color matching: For templates that support this option, you can enable it to allow the system to automatically match style (such as colors, fonts, and corner radius) to your store's templates.

     • Color settings: Manually set colors if Enable smart color matching is disabled or unsupported in the selected template.

       

     • Banner background image: Upload banner background images for Desktop and Mobile, then adjust the Image display rule and Placement as desired.
   • Content settings: Configure the information to display:
     • Display discount copy: Select to show and customize the discount copy and code.

     • Display expiry date: Select to show the discount expiry date and choose the display format, either Display text or Display countdown timer.

       Note: The Display expiry date option is available only if the discount code has set the expiry date in your SHOPLINE admin.

     • Jump page after applying discount code: Enable redirect to an activity landing page or custom page after customers click the discount code.

4. The right-side preview updates in real time. Switch between Desktop and Mobile views to check the effects.

   

5. Click Update to save your changes.

Once saved, customers can view and apply the discount code directly on the applicable product detail page.

Applying a Unified Design with Global Style

To ensure a consistent design across your discount code campaigns, use the Follow global style feature. This allows the selected discount codes to follow a uniform display style on the product page. You must first set up the Global Settings and enable Follow global style for each discount code you wish to apply the settings to. 

Configuring the Global Style Design

Follow these steps to set the global style for discount codes using the Follow global style option on the product detail page:

1. On the Design Maker for Campaigns dashboard, click Style setting in the Multi-discount code banner section.

   

2. In the left-side settings panel, configure your design options:
   • Template selection: Choose the preferred display template for the global style.
   • Design: Depending on the selected template, the following options may be available:
     • Enable smart color matching: For templates that support this option, you can enable it to allow the system to automatically match style (such as colors, fonts, and corner radius) to your store's templates.
     • Color setting: Manually set colors if Enable smart color matching is disabled or unsupported in the selected template.

     • Design: Adjust the following design elements as desired, based on whether your selected template supports, such as Upload Banner background images for Desktop and Mobile, Image display rule, and Placement.

       

     • Set banner style of acquiring discount code: For templates that support this feature, when multiple discount codes apply to the same product, they will be collapsed into a single banner. Customers can click the banner to expand and view all available codes. For supported templates For these templates, you can also customize colors (banner, button, text) based on your chosen template.

     • Upload coupon background image: For templates that support collapsing multiple discount codes into one banner, you canU upload background images for the collapsed banner on Desktop and Mobile when multiple codes apply.

       

3. Review the discount code settings on the right side. You can switch between Desktop and Mobile views, or between Style of a single coupon and Style of multiple coupons to preview the effects.

   

4. Click Update to save your changes.

Enabling Global Style for Discount Code Display

After configuring the global design settings, follow these steps to enable Follow global style for individual discount codes:

1. From the Design Maker for Campaigns dashboard, go to the Discount code campaigns tab and select the desired discount code.

2. Go to the Product detail page tab and turn on the toggle for Follow global style.

   

3. Configure the Content settings (these are independent of the global style):
   • Display discount copy: Select to show and customize the discount copy and code. 

   • Display expiry date: Select to show the discount expiry date and choose the display format, either Display text or Display countdown timer.

     Note: The Display expiry date option is available only if the discount code has set the expiry date in your SHOPLINE admin.

   • Jump page after applying discount code: Enable redirect to an activity landing page or custom page after customers click the discount code. 

4. Switch between Desktop and Mobile views to preview the display style in real time.

   

5. Click Update to save your changes.

All discount codes set to Follow global style on the Product detail page will now use the same unified global display settings.

Display Settings for the Activity Landing Page

The Activity landing page lets you showcase discount code campaigns on a dedicated page to attract customers and highlight active promotions. Follow these steps below to set it up:

1. From the Design Maker for Campaigns dashboard, go to Discount code campaigns and select the discount code you want to customize.

2. In the Activity landing page tab, click Create to generate the page.

   

3. Once created, the page will be added to your store. On the settings page, the following configuration options are available on the left-side panel:

   

   • Activity landing page URL:  Click Copy to share the activity URL. To enhance page SEO, click Search engine optimization to adjust the title, description, and other details in your SHOPLINE Admin.
   • Activity banner: Upload banner images for Desktop and Mobile and adjust the Image display rule as desired.
   • Display discount banner: Toggle on to show discount campaign banners on the activity landing page. 
   • Design: 
     • Select style template: Choose a preferred display template for the campaign banner.
     • Color settings: Customize the banner color based on the selected template. 
   • Content setting: Edit Banner text and/or enable the Display countdown timer to add urgency.

4. The right-side preview updates in real time. Switch between Desktop and Mobile views to check the effects.

   

5. Click Update to save your changes.

Once completed, the discount code campaign’s landing page will be visible on your storefront.

Display Settings for the Checkout Page

Displaying discount code campaigns on the Checkout page helps remind customers of available savings and encourages them to complete their purchase. Follow the steps below to set it up:

1. From your Design Maker for Campaigns dashboard, go to the Discount code campaigns tab and select the discount code you want to customize.

2. Go to the Checkout page tab and switch on the toggle under Display coupon.

   

3. Choose how the discount information is displayed at checkout:

   

   • Display saving amount of discount code: Show the amount customers can save.
   • Display activity title of discount code: Show and customize the campaign name associated with the discount.
4. The preview on the right updates in real time as you adjust the style.
5. Click Update to save your changes. 

Once completed, the configured discount details will appear on your store’s checkout page.

Customizing the Display Order of Discount Codes

If you have multiple active discount code campaigns, you can customize the order in which they appear on the Product detail page:

1. On the Design Maker for Campaigns dashboard, click Discount code order under Multi-discount code banner.

   

2. In the pop-up window, choose how discount codes should be sorted on the storefront. Select a sorting rule from the Sort by dropdown:
   • Created: New → Old
   • Created: Old → New
   • Updated: New → Old
   • Updated: Old → New
   • Discount level: Big → Small
   • Custom: Manually adjust the order.
3. Click Save to update your changes.