Este artigo está atualmente disponível em inglês e espanhol. Você pode usar esta documentação enquanto ela não estiver disponível em seu idioma.
Highlighting sale prices and their discount percentage on recommended products helps you to increase ecommerce conversions. Using CSS styles and classes, you can show the discount percentage and the original amount crossed out, together with the current price, on sale products only.
In this article, you’ll learn how to show the discount percentage in web content only when there is a discount.
Implementation time: 15 minutes.
Difficulty: Medium.
When to use it: In content that shows products with and without discount.
STEP 1. Create web content
1. Go to “Content > Web” and click Create new web content.
2. Choose the appropriate type of web content, give it a name, and click Create web content.
If you’re interested in learning more about the five types of web content, click here.
3. Include at least one advanced-type Products component.
For this step we recommend taking a look at Web Content Editor and How to create a custom product block in web content.
STEP 2. Insert CSS classes and styles
4. Add an HTML component at the top of the design.
5. Enter the following code snippet, replacing the content of the HTML element.
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
STEP 3. Create variables in the dynamic content
6. Select the dynamic product block and, in the editor included under Properties, click Variables to create a new block where you want to show the discounted price.
7. Name the variable that will display the discounted price. You can call it: "originalPrice".
8. Click Accept to save your changes.
9. Repeat points 6, 7 and 8 to create the variable that will contain the discount. You can call it: "discount".
Highlighting the discount percentages with an appealing design will draw the contact’s attention to them, so we recommend it giving it some style to increase the likelihood of conversion.
In our example, the discount is shown in white letters on a red background and the original price has been crossed out. You can copy the CSS code in point 14.
10. Go to the Variables tab and click (Edit) on the newly created variable ("originalPrice").
11. In the Data type field, select "Currency".
12. Click Accept to save the changes.
The "discount" variable is not formatted, to make it easier for the code entered in the HTML component to work. However, the percentage symbol (%) is added in the editor so that it is displayed in the content.
13. Select the dynamic product block again, and on the Properties, tab, click the Edit HTML code button.
14. In the dynamic content editor, assign the CSS class "cn_discount_{{discount}}" to the elements that display the original price and discount variables.
The block that includes the discount percentage is as follows (line 2 of the code):
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}} <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>
The block that includes the original price crossed out is as follows (line 3 of the code):
<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span> {{unitPrice}}</span></div>
15. Click Apply to save the HTML changes and Save to save the web content.
STEP 4. Create a workflow to display web content
16. Go to “Workflows” and click Create new workflow.
To speed up the task, you can use one of our templates, for example: Inline in product's page: recommended products or crosselling en home. Remember that you will have to configure the workflow according to the instructions before continuing with this article.
If you’d like to design the strategy from scratch, we recommend taking a look at Show personalized products in content .
17. In the “Send web content”, node, click (Edit node settings) and configure the variable mapping.
18. Click Finish to save changes to the node and Save to save all changes to the workflow.
19. Click Start to activate the workflow.
20. Access your website and check that the discount percentages are displayed correctly.
Success!
The discount percentages of your products will be shown when they have applied a discount.
Keep learning!
To make the most of your Connectif account, we recommend reading these articles next:
- Show discount percentage in an email only when there is a discount, to apply this same feature in emails.
-
Home page recommender, to show recommended products to the contact based on their activity on the website.
- Bestsellers in the product sheet, to show contacts the bestselling items in the same category when they visit a product.
-
Recommender at checkout, to show products related to the cart at checkout.