Custom Styles for Discount Codes - Display Settings for the Product Detail Page

When you create a discount code campaign in the SHOPLINE admin panel, you can choose to display the discount code on the product detail page. Customers can see the corresponding discount code when they enter the product detail page of your store, and click to apply. Bringing discount codes to the product detail page can help you increase the usage of discount codes, thereby increasing sales.

Points for Attention

• To customize the discount code campaign style, you need to use the Design Maker for Campaigns app. First, download the app from the SHOPLINE App Store.
• The display style of discount code campaigns on the product detail page is determined by the settings at the campaign level. You can set different styles for different campaigns, or choose not to display the style for some campaigns.
• After you display the discount code on the product detail page, customers can view and apply the discount code on the product detail page to which the discount code applies.
• The display effect of discount codes on the product detail page varies with the number of applicable discount codes:
  • If there is only one discount code displayed for the product that the customer browses, the style of the discount code can be set at the campaign level.
    
    
    
  • If there are multiple applicable discount codes on the product detail page, the display style for multiple coupons can be adjusted by going to Multi-discount code banner > Style setting.
    

Style Settings for the Product Detail Page

To set the style of a discount code on the product detail page, you can perform the following steps:

1. Go to the Design Maker for Campaigns app, select the campaign 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 campaign will follow the configuration you make in the global settings: Style setting in Multi-discount code banner on the homepage of Design Maker for Campaigns app .
   
   
   
   You only need to set the discount copy. If this option is disabled, you need to set individual display stylesstyle for different campaigns, including the template, color, and background image.
3. Template selection: You can choose from various types of display templates, including banners, word, tags, Vibrant, etc. Each template has different configuration options available for customization.
   
4. Design: You can enable the Style follows store’s theme option. If this option is enabled, the campaign style will be consistent with the theme style in terms of colors, fonts, and rounded corners (although some themes do not support following their rounded corner settings).  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 customize the color.
   • Coupon 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. You can also customize the display position.
     
5. Content settings:
   • In the Display discount copy section, enter the campaign copy you want to display on the product detail page. You can also insert dynamic test such as Discount requirement, or disable the display of the copy.
   • If the campaign has an end time configured, you can enable Display expiry date. The expiry date will be displayed based on the customer’s time zone. You can also choose to Display text or Display countdown timer for the expiry date.
   • Enable Jump page after applying discount code to direct customers to the Activity landing page or another Custom page when customers click the activity information.
     

6. 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.
7. Click Update to save the changes.