One of the features available for promotions in VTEX stores is Highlight on products, available within each promotion’s settings:
This feature activates a highlight label on products covered by the promotion, bringing greater visibility to them in the storefront and on product pages. However, for this feature to have an effect on the site, certain elements must be defined in the page templates (in Legacy CMS) or in the store theme (in VTEX IO) as described below:
Legacy CMS
In Legacy CMS, the element that needs to be defined is <vtex.cmc:discountHighLight/>, as covered in our Configuring promotions with a highlight documentation. This element works on any storefront and product page and can be visually customized with CSS and JSON. We recommend working with your agency to validate that this element is properly defined in your store’s templates if it isn’t showing up.
VTEX IO
In stores using VTEX IO, on the other hand, the component to be used is Product Highlights, which is declared within the store theme’s blocks. For promotion highlights to be visible, the block must be configured with the type prop set to promotion. Just as in Legacy CMS stores, the appearance of this component can be changed via CSS and JSON customizations, but beyond that, Product Highlights also allows specific changes (such as, for example, the highlight text) to be made via the Site Editor.
It’s important to note that, even with the components described above properly configured, for a promotion highlight to appear on the site you need to wait for the promotion indexing time, which typically takes around 15 minutes. If the promotion was just activated/created, this wait time is normal before the highlight appears.
In addition, when testing how promotion highlights work, you should also account for potential delays due to the store’s cache, as covered in our cache documentation.
Eduardo Luciano
Field Software Engineer | VTEX