Customizing the Display Style for Automatic Discounts

The Design Maker for Campaigns app enables you to customize how automatic discounts are displayed across different storefront pages, including the Product detail page, Cart page, and Activity landing page.

Easily adjust the layout, colors, and text to match your store’s branding, helping customers easily notice active promotions as they browse. You can also apply a unified display style across multiple automatic discounts to maintain a consistent visual experience.

Follow the steps below to configure the display design for your automatic discounts.

Display Settings for the Product Detail Page

Displaying automatic discount campaigns on the product detail page helps customers immediately notice promotions, increasing their likelihood of completing a purchase. 

You can configure how automatic discounts appear in two ways: customize each automatic discount individually, or enable Follow global style to apply your unified settings.

Customizing Individual Automatic Discount Designs

To configure the display for a specific automatic discount:

1. From the Design Maker for Campaigns dashboard, go to the Automatic discount tab and select the automatic discount you want to customize.

2. Click the Product detail page tab and enable Display automatic discount.

   

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: Automatically match style (such as colors, fonts, and corner radius) to your store's theme.

     • Color scheme: Choose a display color from the available scheme options, or select Custom color to manually adjust the display color if Enable smart color matching is disabled.

       

     • 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.
   • Content settings: Configure the information to display:
     • Display discount copy: Select to show and customize the automatic 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 is available only if the automatic discount has set the expiry date in your SHOPLINE admin.

     • Jump link after clicking: Enable redirect to an Custom or Campaign Page after customers click the automatic discount.

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

   

5. Click Update to save your changes.

Once completed, customers can view the automatic discount directly on the product detail page where it is applicable.

Applying a Unified Design with Global Style

To ensure a consistent design across your automatic discounts, use the Follow global style feature. This allows the selected automatic discounts 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 automatic discount you wish to apply the settings to. 

Configuring the Global Style Design

Follow the steps below to set the global style for automatic discounts using the Follow global style option on the product detail page:

1. On the Design Maker for Campaigns dashboard, click Style setting under Global automatic discount setting.

   

2. Click the Product detail page tab.
3. In the left-side settings panel, configure your design options: 
   • Template selection: Choose a preferred display template for your automatic discount.
   • Design: 
     • Enable smart color matching: For themes 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 theme.

     • Color scheme: Choose a display color from the available scheme options, or select Custom color to manually adjust the display color if Enable smart color matching is disabled. 

       

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

4. Review the automatic discount setting on the right side. You can switch between Desktop and Mobile views, or between Style-tier discount and Multi-tier discount to preview the effects.

   

5. Click Update to save your changes.

Enabling Global Style for Automatic Discount Display

After configuring the global design settings, follow the steps below to enable Follow global style for individual automatic discounts:

1. From your Design Maker for Campaigns dashboard, go to the Automatic discount tab and select the desired automatic discount.

2. Go to the Product detail page tab and turn on the toggles for Display automatic discount and 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 is available only if the automatic discount has set the expiry date in your SHOPLINE admin.

   • Jump link after clicking: Enable redirect to an Custom or Campaign Page after customers click the automatic discount.

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

   

5. Click Update to save your changes. 

All automatic discounts with Follow global style enabled will automatically apply the same global display settings on the Product detail page.

Display Settings for the Cart Page

Displaying automatic discounts on the Cart page helps remind customers of available savings and encourages them to complete their purchase. 

You can configure how automatic discounts appear in two ways: customize each automatic discount individually, or enable Follow global style to apply the unified design settings.

Customizing Individual Automatic Discount Designs

Follow the steps below to configure the cart page for a specific automatic discount individually:

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

2. Click the Cart page tab, then turn on the Display discount banner toggle.

   

3. Set up your design in the following sections:
   • Design:

     • Enable smart color matching: Automatically match style (such as colors, fonts, and corner radius) to your store's theme.

       

     • Color scheme: Choose a display color from the available scheme options, or select Custom color to manually adjust the display color if Enable smart color matching is disabled.

       

     • Content settings: You can customize the text displayed on the banner and reset it to the default copy at any time. Customizable banner text options include:
       • Minimum threshold not reached
       • Maximum threshold not reached
       • Enjoyed maximum discounts
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, customers will be able to view the automatic discount directly on the cart page where it is applicable.

Applying a Unified Design with Global Style

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

Configuring the Global Style Design

Follow the steps to configure the automatic discounts display for the Cart page in the Global automatic discount setting section.

1. On the Design Maker for Campaigns dashboard, click Style setting under Global automatic discount setting.

   

2. Then click the Cart page tab.
3. Set up your design in the following sections:
   • Enable smart color matching: The system will automatically match style (such as colors, fonts, and corner radius) to your store's theme if you enable this feature.
   • Color scheme: Choose a display color from the available scheme options, or select Custom color to manually adjust the display color if Enable smart color matching is disabled.
4. Click Update to save your changes.

Enabling Global Style for Automatic Discount Display

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

1. From your Design Maker for Campaigns dashboard, go to the Automatic discount tab and select the desired automatic discount.

2. Click the Cart page tab, then turn on the toggles for Display discount banner and Follow global style.

   

3. Configure Content settings (these are independent of the global style):You can customize the text displayed on the banner, and reset it to the default copy at any time when enabling the Follow global style. Customizable banner text options include:
   • Minimum threshold not reached
   • Maximum threshold not reached
   • Enjoyed maximum discounts
4. Click Update to save your changes. 

All the automatic discounts with Follow global style enabled will apply the same global display settings.

Display Settings for the Activity Landing Page

The Activity landing page showcases your automatic discount campaigns on a dedicated page to attract customers and highlight active discounts. Follow the steps below to configure the activity landing page for your automatic discounts:

1. From your Design Maker for Campaigns dashboard, go to the Automatic discount tab and select the automatic discount you want to customize.
2. In the Activity landing page tab, click Create to generate an activity landing page. 

3. Once created, the page will be automatically added to your store. On the settings page, the following configuration options are available: 

   

   • 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 activity information: Enable this option to display the discount banner on the activity landing page. You can choose the Banner type between Copy banner or Progress bar banner.

   • Design: Select a Color scheme for your automatic discount display, or select Custom color to manually adjust the display color.

     Note: In the Design section, you’ll find the Apply design to product detail page option in the upper-right corner. Click it, then click Synchronize to automatically sync the current design style to the Product detail page, ensuring visual consistency across displays.

   • Content settings: Edit Banner text  to add urgency. 
   • Display countdown timer: Enable the Display countdown timer to count down to the discount's expiry date. You can select the countdown unit to display the time remaining in Days or Hours.

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, customers can see the automatic discount’s landing page on your storefront.

Advanced Settings for Automatic Discount Display

In addition to customizing the appearance of automatic discounts, you can configure advanced settings to display multiple discounts on product detail pages and checkout pages, offering customers a broader range of options and improving transparency about the savings applied to their final order. 

For more information on how to set the display options and rules for your automatic discounts, refer to Enhancing Automatic Discount Visibility with Advanced Settings.