{"section":"tutorials","requestedLocale":"es","requestedSlug":"configurando-promocion-con-destaque-flag","locale":"es","slug":"configurando-promocion-con-destaque-flag","path":"docs/es/tutorials/tasas-y-promociones/promociones/configurando-promocion-con-destaque-flag.md","branch":"main","content":"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.\n\n\n\nEn esta guía puedes consultar las siguientes secciones:\n\n- [Promociones que se pueden destacar](promociones-que-se-pueden-destacar)\n- [Restricciones](#restricciones)\n- [Configurar la promoción](configurar-la-promocion)\n- [Promociones destacadas en Store Framework](#promociones-destacadas-en-store-framework)\n- [Destacar promociones en CMS Portal (Legado)](#destacar-promociones-en-cms-portal-Legado)\n - [Plantilla de página](#plantilla-de-pagina) \n - [Plantilla de estantería de productos](#plantilla-de-estanteria-de-productos)\n\n## Promociones que se pueden destacar\nEl 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.\n\nLos siguientes tipos de descuentos son elegibles para la aplicación de un destaque:\n\n- [Descuento porcentual](/es/docs/tutorials/configurar-promocion-de-descuento-porcentual-para-un-sku-especifico): ofrece una reducción porcentual en el valor del producto.\n\n- **Regalo**: ofrece un producto adicional sin costo al cliente al comprar un determinado artículo o alcanzar un valor mínimo de compra.\n\nPara más información, consulta [Promociones](/es/subcategory/promocoes--1yTYB5p4b6iwMsUg8uieyq).\n\n## Restricciones\n\nNo pueden destacarse promociones que tengan alguna restricción en el carrito, como por ejemplo:\n\n- Rango de códigos postales\n- Valor agregado de las compras\n- BIN\n- Clúster de clientes\n- Método de envío\n- Medio de pago\n- Número máximo de cuotas, solo en la primera compra\n\nEstas 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.\n\n## Configurar la promoción\n\nSigue las instrucciones a continuación para configurar promociones destacadas en tu tienda.\n\n1. 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.\n2. Busca la promoción que deseas configurar.\n3. En la opción **Promoción destacada**, selecciona **Sí**.\n4. Configura la promoción con las especificaciones deseadas.\n5. Haz clic en el botón `Guardar`.\n6. Sigue las instrucciones correspondientes a la tecnología frontend utilizada por tu tienda:\n\n- [Store Framework](#promociones-destacadas-en-store-framework)\n- [CMS Portal (Legado)](#promociones-destacadas-en-cms-portal-legado)\n\n## Promociones destacadas en Store Framework\n\nPara tiendas desarrolladas con Store Framework, después de configurar la promoción destacada, sigue las instrucciones de la documentación del componente [Product Highlights](https://developers.vtex.com/docs/apps/vtex.product-highlights).\n\n## Destacar promociones en CMS Portal (Legado)\n\nPara tiendas CMS Portal (Legado), tras configurar la promoción destacada, configura la [plantilla de página](#plantilla-de-pagina) y la [plantilla-de-estantería de productos](#plantilla-de-estanteria-de-productos) en el módulo CMS. Además, el CSS debe estar configurado para esta función.\n\n### Plantilla de página\n\nEsta 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``.\n\n1. 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.\n2. Haz clic en **CMS > Sites and channels**.\n3. Haz clic en el nombre del **site** deseado.\n4. Haz clic en **/ > Producto > @Producto@**.\n5. En el menú lateral, haz clic en el layout marcado con una marca de verificación roja.\n\n \n\n6. En el campo __Template__, marca el nombre de la plantilla utilizada:\n\n \n\n7. En el menú lateral, haz clic en **HTML Templates > @Producto@**.\n\n \n\n8. Haz clic en la plantilla que se encuentra en **@Producto@**.\n9. Ingresa el código `` de acuerdo con tu estructura HTML.\n10. Haz clic en **Save Template**.\n\n### Plantilla de estantería de productos\n\n1. 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.\n2. Haz clic en **CMS > Shelves Templates**.\n\n \n\n3. Haz clic en la plantilla deseada.\n4. Ingresa el código `$product.DiscountHightLight`.\n5. Haz clic en **Save Template**.\n\nUna 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.\n\nCon la clase generada, debes definir tus estilos CSS, personalizando un texto o una imagen para la flag directamente en las plantillas."}