When you create a discount code in the SHOPLINE admin, 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 usage of discount codes, which helps to increase sales.
On this page
Steps: "Discount Codes" - "Custom Style" - "Product Detail Page" - "Display coupon"
- 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;
- If there is only one discount code displayed for the product that the customer browses, the discount code will be displayed in the form of a banner, and the customer can apply it directly; At this time, the discount code may be different from the display style you see in the admin, you can refer to Single Discount Code;
- If the product browsed by the customer has multiple discount codes displayed, the discount coupon will be displayed in the drop-down box, and the customer can view multiple discount codes at the same time
You can choose from the two templates provided, or customize the display style of the discount code
- If you choose to use template, you can select one of the two provided templates directly and save it
- Note: Color of the discount code will change according to the Admin theme you chose, it may different from the style you preview in the admin
If you customize the display style of the discount code, you can adjust the color and text of the coupon, or upload a background image. The style of the discount code will be changed as your configuration. Please confirm the color and text of the discount code before save. You can customize the following:
- Discount text:
- Discount requirement: If you configured discount requirements for your discount code, then you will see the text input box for the discount requirements, where you can fill in your custom content
- Discount: If you select "None" in the discount requirements section, then you will only see the discount text input box, where you can fill in your custom content
- Variables: The variables you may use is provided below the text input box, and you can add them to the input box by clicking on the variables
- Color settings:
- Coupon background color
- Button background color
- Text color
- Button text color
- Code color
- Background image:
- You can upload the background images for PC and Mobile respectively. After you upload the background images for mobile, the preview of the mobile style will be displayed under the current preview coupon. You can preview the styles of the PC and mobile separately
- If you only upload image for PC, the background of the coupon on both PC and Mobile will display the PC image you uploaded
- If you only upload image for Mobile, in order to ensure clarity, only the mobile will display the background image you uploaded, and PC will display the style of the custom template
The coupon will also display applicable customers and expiration time according to your settings, and you cannot customize these texts.
- When your discount code is set to specified customers, specified customer groups, and specified member tiers, all customers can see these discount codes when they are not logged in, and the text "for specified customers" will be displayed under the coupons to remind them; After customers log in, only customers who can use this discount code will see these coupons.
- When your discount code has an expiration time, the expiration date will be displayed below the coupon as "until: expiration time". At the same time, the expiration time that customers see is displayed according to their time zone.
Display in product detail page
The display style is different according to the number of discount codes that are applicable to the product in current product detail page.
Single discount code
If there is only one applicable discount code on the product detail page, the coupon will be displayed as a banner. Customers can apply the discount code directly to the shopping cart/checkout page on the product detail page.
Please note: If there is only one applicable discount code on the current product detail page, the style of the coupon may be different from the one you preview in the admin. Your custom style settings will still be applied to the banner. If you upload a background image, the background image will be cropped to fit the banner size.
Multiple discount codes
When there are multiple applicable discount codes on the product detail page, the discount codes will be displayed in parallel. Customers click "Get code" and a discount code drop-down box will appear, where customers can view all discount codes and apply the discount code they want to use.