The highlight of a promotion is a visual notification that can be placed on shelves and product pages, informing customers that the item is eligible for a promotion. A common example is the indication of free shipping below the product image.

In this guide, you will find the following sections:

• Promotions eligible for highlight
• Restrictions
• Configuring a promotion
• Promotion highlight in Store Framework
• Promotion highlight in Legacy CMS Portal
  • Page template
  • Shelves template

The promotion highlight can be applied to different types of promotions and discounts. This highlight will be displayed on shelves and product pages, alerting customers that the item is part of a special promotion.

The following types of discounts are eligible for a highlight application:

• Percentage discount: offers a percentage reduction on the product’s price.
• Percentage shipping discount: applies a discount to a portion of the shipping cost, allowing customers to pay less for shipping and encouraging the purchase decision.
• Maximum shipping: sets a maximum shipping cost, regardless of factors such as distance or order weight.
• Free shipping: completely eliminates the shipping cost.
• Free gift: offers an extra product at no cost to the customer when purchasing a certain item or reaching a minimum purchase value.

To learn more, see the Promotions section.

You cannot configure the highlight in promotions with restrictions in the cart, such as:

• Postal code range
• Accumulated purchase value
• BIN
• Customer clusters
• Shipping method
• Payment method
• Max installments, first purchase only

These promotions are not eligible for all customers. This means that customers need to provide additional information (e.g., postal code) for the promotion to be applicable. Therefore, highlights cannot be configured in these cases.

Follow the instructions below to configure promotions in your store.

1. In the VTEX Admin, go to Promotions > Promotions, or type Promotions in the search bar at the top of the page.
2. Search for the promotion you want to configure.
3. In the Promotion is highlighted option, select Yes.
4. Configure the promotion with the desired specifications.
5. Click the Save button.
6. Follow the instructions corresponding to the frontend technology used by your store:

• Store Framework
• Legacy CMS Portal

For stores developed using Store Framework, after configuring the promotion highlight, follow the instructions in the documentation for the Product Highlights component.

For Legacy CMS Portal stores, after configuring the promotion highlight, configure the page template and shelves template in the CMS module. In addition, your CSS must be configured for this function.

This configuration involves editing the page template used for the product page layout and including the <vtex.cmc:discountHighLight/> tag.

1. In the VTEX Admin, go to Storefront > Layout, or type Layout in the search bar at the top of the page.

2. Click CMS > Sites and channels.

3. Click the name of the website you want.

4. Click / > Product > @Product@.

5. Click the layout with a red checkmark.

   

6. In the Template field, check the name of the template used:

   

7. In the side menu, click the HTML Templates folder.

8. Click the template found at @Product@.

   

9. Enter the code <vtex.cmc:discountHightLight/> based on your HTML structure.

10. Click Save Template.

1. In the VTEX Admin, go to Storefront > Layout, or type Layout in the search bar at the top of the page.

2. Click CMS > Shelves Templtes.

   

3. Click the desired template.

4. Enter the $product.DiscountHightLight code.

5. Click Save Template.

After making the settings in the VTEX Admin and adding the appropriate tags to the templates, a CSS class with the name of each promotion that meets the requirements will be automatically generated in the HTML. For example, if the promotion is called "BlackFriday," a class called .BlackFriday will be generated in the HTML of the product or shelf.

Once the class is generated, you will need to define your CSS styles, customizing a text or image for the flag directly in the templates.