El destaque de una promoción es un aviso visual que puede insertarse en las estanterías y en las páginas de productos, informando que el artículo es elegible para una promoción. Un ejemplo común es la indicación de envío gratuito debajo de la imagen del producto.

En esta guía puedes consultar las siguientes secciones:

• Promociones que se pueden destacar
• Restricciones
• Configurar la promoción
• Promociones destacadas en Store Framework
• Destacar promociones en CMS Portal Legado
  • Plantilla de página
  • Plantilla de estantería de productos

El destaque de promoción puede aplicarse a diferentes tipos de promociones y descuentos. Este destaque se mostrará en las estanterías y páginas de productos, alertando a los clientes que el artículo forma parte de una promoción especial.

Los siguientes tipos de descuentos son elegibles para la aplicación de un destaque:

• Descuento porcentual: ofrece una reducción porcentual en el valor del producto.
• Descuento porcentual en el envío: aplica un descuento en parte del costo de envío, permitiendo que los clientes paguen menos por el envío e incentivando la decisión de compra.
• Envío máximo: establece un valor máximo para el costo de envío, independientemente de factores como la distancia o el peso del pedido.
• Envío gratuito: elimina completamente el costo de envío.
• Regalo: ofrece un producto adicional sin costo al cliente al comprar un determinado artículo o alcanzar un valor mínimo de compra.

Para más información, consulta Promociones.

No pueden destacarse promociones que tengan alguna restricción en el carrito, como por ejemplo:

• Rango de códigos postales
• Valor agregado de las compras
• BIN
• Clúster de clientes
• Método de envío
• Medio de pago
• Número máximo de cuotas, solo en la primera compra

Estas promociones no se aplican a todos los clientes y requieren que se proporcione información adicional (como el código postal) para que sean válidas. Por lo tanto, no se podrá destacar la promoción en estos casos.

Sigue las instrucciones a continuación para configurar promociones destacadas en tu tienda.

1. En el Admin VTEX, accede a Promociones > Promociones o ingresa Promociones en la barra de búsqueda en la parte superior de la página.
2. Busca la promoción que deseas configurar.
3. En la opción Promoción destacada, selecciona Sí.
4. Configura la promoción con las especificaciones deseadas.
5. Haz clic en el botón Guardar.
6. Sigue las instrucciones correspondientes a la tecnología frontend utilizada por tu tienda:

• Store Framework
• CMS Portal Legado

Para tiendas desarrolladas con Store Framework, después de configurar la promoción destacada, sigue las instrucciones de la documentación del componente Product Highlights.

Para tiendas CMS Portal Legado, tras configurar la promoción destacada, configura la plantilla de página y la plantilla-de-estantería de productos en el módulo CMS. Además, el CSS debe estar configurado para esta función.

Esta configuración consiste en editar la plantilla de la página utilizada para el layout de la página de producto e incluir la tag<vtex.cmc:discountHighLight/>.

1. En el Admin VTEX, accede a Storefront > Layout, o ingresa Layout en la barra de búsqueda de la parte superior de la página.

2. Haz clic en CMS > Sites and channels.

3. Haz clic en el nombre del site deseado.

4. Haz clic en / > Producto > @Producto@.

5. En el menú lateral, haz clic en el layout marcado con una marca de verificación roja.

   

6. En el campo Template, marca el nombre de la plantilla utilizada:

   

7. En el menú lateral, haz clic en HTML Templates > @Producto@.

   

8. Haz clic en la plantilla que se encuentra en @Producto@.

9. Ingresa el código <vtex.cmc:discountHightLight/> de acuerdo con tu estructura HTML.

10. Haz clic en Save Template.

1. En el Admin VTEX, accede a Storefront > Layout, o ingresa Layout en la barra de búsqueda de la parte superior de la página.

2. Haz clic en CMS > Shelves Templates.

   

3. Haz clic en la plantilla deseada.

4. Ingresa el código $product.DiscountHightLight.

5. Haz clic en Save Template.

Una vez que hayas realizado los ajustes en el Admin VTEX y agregado las tags correspondientes en las plantillas, se generará automáticamente en el HTML una clase CSS con el nombre de cada promoción que cumpla los requisitos. Por ejemplo, si la promoción se llama "BlackFriday", se creará una clase llamada .BlackFriday en el HTML del producto o estantería.

Con la clase generada, debes definir tus estilos CSS, personalizando un texto o una imagen para la flag directamente en las plantillas.