Highlighting discounted prices and their percentage off on recommended products can boost conversions in eCommerce. Using CSS styles and classes, you can display the discount percentage and the original crossed-out price alongside the current value, but only for products on sale.
In this article, you will learn how to display the discount percentage in an email only when a discount exists.
Note that this method is compatible with most email clients. However, Outlook does not support the CSS function used, so this guide will not work in that client.
Implementation time: 15 minutes.
Difficulty: Medium
When to use it: In emails showcasing products with and without discounts.
STEP 1. Create an email design
1. Go to “Content > Email” and click Create new email.
2. Include at least one advanced Products component in the design.
STEP 2. Create a variable in the dynamic content
3. Select the product block and, in the Properties editor, click Variables to create a new one where you want the discounted price to appear.
4. Name the variable that will display the original price. You can call it "originalPrice".
5. Click Accept to save the changes.
6. Follow the same steps to create the variable that will hold the discount. You can call it "discount".
Style the variables to distinguish them. Proper design ensures that the contact focuses on the intended highlights.
In the example, the discount is displayed in white text on a red background, and the original price is crossed out using CSS (code provided in STEP 3).
7. Go to the Variables tab and click Edit on the newly created variable ("originalPrice").
8. Assign the "Currency" data type to the variable.
9. Click Accept to save the changes.
Repeat steps 7, 8, and 9 for the "discount" variable to set the data type to "Percentage".
10. Select the dynamic product block again, and in the Editor section, click on HTML.
11. In the dynamic content editor, apply the following CSS styles to the elements displaying the original price and discount variables:
- The block containing the discount percentage is:
<h5 style="text-align: center;"><strong>{{title}} <span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}"> {{discount}}</span></strong></h5>
- The block containing the crossed-out original price is:
<h5 style="text-align: center;"><br><span style="color: #808080; text-decoration: line-through;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">{{originalPrice}}</span><span style="font-size: 12pt;"> {{price}}</span></h5>
12. Click Apply to save the changes in the HTML code and close the email editor by clicking Save.
STEP 3. Create a workflow to send the email
13. Go to “Workflows” and click Create new workflow.
To simplify the task, you can use our template Weekly recommended products campaign. Ensure the workflow is configured according to the instructions before proceeding with this article.
If you prefer to start from scratch, refer to Show custom products in content.
14. In the “Send email” node, click (Edit node settings) and configure variable assignments.
15. Click Apply to save the node settings and save all workflow modifications.
16. Click Start to activate the workflow.
17. Access your web-based email client and check that the discount percentages are displayed correctly in the email.
Success!
The discount percentages for your products will be displayed when discounts are applied.
Keep learning!
To fully leverage your Connectif account, we recommend continuing with the following articles:
-
Show discount percentage only when a discount exists in web content, to apply the same functionality in web content.
-
Weekly recommended products campaign, to send a weekly newsletter with personalized recommendations.
-
Abandoned cart + recommendations, to email contacts the products left in their cart along with related products.
- Post-purchase complements, to send an email with complementary products to purchased items after a period of inactivity.