Variables use case: show discount percentage in an email only when a discount exists

 

Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.

Highlighting discounted prices and their percentage discounts on recommended products increases conversions in eCommerce. Through CSS styles and classes, you can display the discount percentage and the original price struck through, alongside the current value, only on products that are on sale.

In this article, you will learn how to show the discount percentage in an email only when a discount exists.

 

Note that this method is compatible with most managers, however, Outlook does not support the CSS function it uses, so this guide will not be functional in this manager.

  

Implementation time: 15 minutes.
Difficulty: Medium
When to use it: In emails that show products with and without discounts.

 

STEP 1. Create an email design

1. Go to “Content > Email” and click on  Create new email.

Show discount percentage only when there is a discount in an email - 1-min.png

2. Include at least one advanced component of type Products in the design.

Show discount percentage only when there is a discount in an email - 2-min.png

  

To learn more about how to use the Email Editor, click here.

To learn more about how to create a custom product block in an email, click here.

 

STEP 2. Create the variable in dynamic content

3. Select the product block and, in the editor included in Properties, click on Variables to create a new one in the place where you want the discounted price to be displayed.

Show discount percentage only when there is a discount in an email - 3-min.png

4. Name the variable that will show the discounted price. You can call it: "originalPrice".

Show discount percentage only when there is a discount in an email - 4-min.png

5. Click on  Accept to save the changes.

6. Following the same steps, create the variable that will contain the discount. You can call it: "discount".

Show discount percentage only when there is a discount in an email - 5-min.png

 

Take the opportunity to style the variables so that they stand out from each other. The design makes it easier for the contact to pay attention to what you want to highlight.

In the example, the discount is shown in white letters on a red background and the original price is struck through using CSS (you have the code in STEP 3).

7. Go to the Variables tab and click on  (Edit) on the newly created variable ("originalPrice").

Show discount percentage only when there is a discount in an email - 6-min.png

8. Assign the data type "Currency" to the variable.

Show discount percentage only when there is a discount in an email - 7-min.png

9. Click on  Accept to save the changes.

  

The "discount" variable is not formatted to facilitate the operation of the code introduced in the next step to customize its behavior using CSS rules. However, the percentage symbol (%) is added in the editor to be displayed in the content.

10. Select the dynamic product block again and, in the Editor section, click on the HTML option.

Show discount percentage only when there is a discount in an email - 8-min.png

11. In the dynamic content editor, assign the following CSS styles to the elements that display the original price and discount variables:

  • The block that includes the discount percentage is as follows:
<h5 style="text-align: center;"><strong>{{title}}&nbsp;&nbsp;<span style="font-size: min(calc({{discount}} * 100000px), 16px); background-color: #FF0000; color: #FFFFFF;">&nbsp;{{discount}}%</span></strong></h5>
  • The block that includes the struck-through original price is as follows:
<h5 style="text-align: center;"><br><span style="font-size: min(calc({{discount}} * 100000px), 13px); color: #808080; text-decoration : line-through;">{{originalPrice}}</span><span style="font-size: 12pt;">&nbsp;&nbsp;{{price}}</span></h5>

 

12. Click on  Apply to save the changes in the HTML code and close the email editor by clicking on  Save.

 

STEP 3. Create a workflow to display web content

13. Go to “Workflows” and click on  Create new workflow.

 

To speed up the task, you can use our template Recommended Weekly Product Campaign. Remember that you will need to configure the workflow following the instructions before continuing with this article.

If you want to do it from scratch, we recommend taking a look at how to Show Personalized Products in Content.

14. In the “Send email” node, click on   (Edit node settings) and configure the variable assignment.

Show discount percentage only when there is a discount in an email - 9-min.png

15. Click on Apply to save the changes in the node and save all the workflow modifications.

16. Click on  Start to activate the workflow.

17. Access your webmail manager and check that the discount percentages are displayed correctly in the email.

Show_discount_percentage_in_EMAIL-_12.png

 

 Success!
The discount percentages of your products will be displayed when a discount is applied.


Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 0 su 0