• Topic 主题 トピック Topic Topic
  • Sign in

Custom Styles for Automatic Discounts - Display Settings of the Product Detail Page

After you create an automatic discount activity in the SHOPLINE admin panel, the automatic discount will be displayed on the applicable product detail page. Customers can view the key discount information of the activity within the product detail page, allowing them to understand the current promotion for the product.

You can also customize the display style and copy text of the activity information on the product detail page to motivate customers to purchase more products, thus increasing sales.


In This Article



Points for Attention

  • To custom the automatic discount style, you need to configure it in the Design Maker for Campaigns app. First, download the app from the application market.
  • Automatic discount activities created in the SHOPLINE admin panel can be displayed within the Product detail page in various forms such as banners, tags, texts, and bulk purchase buttons. By default, automatic discount activities are displayed in a banner style.
    • For activities that involve quantity-based discounts (where customers need to purchase a minimum quantity of items), discount for the Mth item, lowest priced item free, or M items for USD N, you can choose to display them in the form of a bulk purchase button within the Product detail page.
  • The display style for an automatic discount activity on the Product detail page is a dimension setting for the activity. You can set different styles for different activities, or choose not to display the style for some activities.
  • If you set up a “Buy X Get Y” promotional activity, the automatic discount banner is displayed only on the product detail page for item X, but not on the product detail page for item Y.



Setting Custom Styles for Product Detail Pages

To set the style of an automatic discount on the Product detail page, you can perform the following steps:

  1. On the activity details page for the automatic discount, click Set up now in the Custom style module. You can also go to the Design Maker for Campaigns app, select the activity for which you want to set a style, and then click the Product detail page tab.
  2. Follow global style: If this option is enabled, the style configuration for this activity will follow the configuration you set in the Global settings. You only need to set the discount copy. If this option is disabled, you need to separately set the display style for this activity, including the template, color, and background image.
    Custom Styles for Automatic Discount Codes_PDP01.png
  3. Template selection: Select the type of template for display.
    Custom Styles for Automatic Discount Codes_PDP02.png
  4. Design: You can set the Style Follow Store’s Theme option. If this option is enabled, the activity style will be consistent with the theme style in terms of colors, fonts, and corner radius. If this option is disabled, different options are available for you to customize the style based on the selected template type.
    • Color settings: Select a pre-defined color plan from the system or custom the color.
    • Background image: For banners, you can upload background images and set their display rules.
      • After you upload a background image, the banner will display the image instead of following the color settings.
      • If you only upload an image for the PC, the background of the banner on both the PC and the mobile device will display the PC image you uploaded.
      • If you only upload an image for the mobile device, in order to ensure clarity, only the mobile device will display the background image you uploaded, and the PC will display the style of the banner.
    • Placement: You can set the campaign style to display near the product title or the product price.
      Custom Styles for Automatic Discount Codes_PDP03.png
  5. Content settings:
    • In the Discount section, enter the activity copy you want to display on the product detail page.
    • If you select a banner-type template, you can set a redirect link for customers to go to after clicking the banner. This link can direct them to an activity landing page or any other custom page you specify.

      Custom Styles for Automatic Discount Codes_PDP0_eg.png

      Custom Styles for Automatic Discount Codes_PDP0_eg1.png

Note: If your store’s theme is set to OS 2.1 theme, the banner click-through functionality is not supported on the product detail page.


  1. When you customize the style, the preview will change in real time. Please save your changes only after confirming that everything is correct. Note that if you enable Follow global style, the actual effect needs to be viewed on the product detail page.
  2. Click Update to save the changes.


Have more questions? Submit a request