We value your feedback. Please take a 1-minute survey to help us improve our Help Center. Click ‘Yes’ to participate.

Yes
✕
Start Strong
Sell Smart
Manage with Ease
Market to Success

Customizing The Display Style on Product Detail Page for Automatic Discounts

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 style and copy of the activity that will be displayed on the product detail page to motivate customers to purchase more products, thus increasing sales.

 

 

Points for Attention

  • To customize the automatic discount style, you need to configure it in the Design Maker for Campaigns app. Download the app from the SHOPLINE  App Store if you haven’t.
  • Automatic discount activities created in the SHOPLINE admin panel can be displayed on the product detail page in various forms such as banners, tags, texts, and bulk purchase buttons. By default, automatic discount activities are displayed as banners.
    • For activities that involve quantity-based discounts (where customers need to purchase a minimum quantity of items), including discount on the Mth item, the lowest-priced item for free, or buying M items for N dollars, you can choose to use the Bulk purchase button template.
    • For “buying M items for N dollars” activities (product level, not order level) that offer multiple tiers of discounts, you can choose to use the Bulk purchase template. Currently, 20 tiers are supported.
  • The display style for an automatic discount activity on the product detail page is set at the activity level. 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” promotion, 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, follow the steps below:

  1. On the activity details page of the automatic discount, click Set up now in the Custom style block. Alternatively, 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 inherit the configuration you set in the Style setting in Global automatic discount setting. You only need to set the Display 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 follows 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 scheme: Select a predefined color scheme or customize your own color scheme.
    • Background image: For banners and bulk purchase templates, 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 scheme.
      • If you only upload the 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 the 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.
      • When using the Bulk purchase template, you can choose the Multiple tires background image settings option to assign different images to different promotion tiers.
    • Placement: You can set the campaign style to display near the product title or the product price. You can also customize the display position.
      Custom Styles for Automatic Discount Codes_PDP03.png
  5. Content settings:
    • In the Discount text setting section, enter the activity copy you want to display on the product detail page.
    • If you select the banner template, you can set a redirect link for customers to go to after clicking the banner by enabling Jump link after clicking. This link can direct them to a campaign 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 is on a 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 use the Bulk purchase template, the actual effect needs to be viewed on the product detail page.
  2. Click Update to save the changes.