{"section":"tutorials","requestedLocale":"pt","requestedSlug":"configurando-promocao-com-destaque-flag","locale":"pt","slug":"configurando-promocao-com-destaque-flag","path":"docs/pt/tutorials/promoções-e-taxas/promoções/configurando-promocao-com-destaque-flag.md","branch":"main","content":"Configurar promoção com destaque / flag\n\nO destaque de uma promoção é um aviso visual que pode ser inserido nas prateleiras e nas páginas de produtos, informando que o item é elegível para uma promoção. Um exemplo comum é a indicação de frete grátis abaixo da imagem do produto.\n\n\n\nNeste guia, você encontrará as seguintes seções:\n\n- [Promoções elegíveis para destaque](#promocoes-elegiveis-para-destaque)\n- [Restrições](#restricoes)\n- [Configurar a promoção](#configurar-a-promocao)\n- [Destaque de promoções no Store Framework](#destaque-de-promocoes-no-store-framework)\n- [Destaque de promoções no CMS Portal (Legado)](#destaque-de-promocoes-no-cms-portal-legado)\n - [Template de página](#template-de-pagina)\n - [Template de prateleira](#template-de-prateleira)\n\n## Promoções elegíveis para destaque\n\nO destaque de promoção pode ser aplicado em diferentes tipos de promoções e descontos. Esse destaque será exibido nas prateleiras e páginas de produtos, alertando os clientes que o item faz parte de uma promoção especial.\n\nOs seguintes tipos de descontos são elegíveis para a aplicação de um destaque:\n\n- [Desconto percentual](/pt/docs/tutorials/configurar-promocao-de-desconto-percentual-para-um-sku-especifico): oferece uma redução percentual no valor do produto.\n- **Brinde**: oferece um produto extra sem custo ao cliente, ao comprar um determinado item ou atingir um valor mínimo de compra.\n\nPara mais informações, acesse os artigos da seção [Promoções](/pt/subcategory/promocoes--1yTYB5p4b6iwMsUg8uieyq).\n\n## Restrições\n\nNão é possível configurar o destaque de promoções que possuem alguma restrição no carrinho, como:\n\n- Faixa de CEP\n- Valor acumulado em compras\n- BIN\n- Cluster de clientes\n- Tipo de frete\n- Forma de pagamento\n- Número máximo de parcelas, apenas na primeira compra\n\nEssas promoções não são aplicáveis a todos os consumidores, pois exigem informações adicionais (por exemplo, o CEP de entrega). Por isso, o destaque não pode ser configurado nesses casos.\n\n## Configurar a promoção\n\nSiga as instruções abaixo para configurar o destaque nas promoções de sua loja.\n\n1. No Admin VTEX, acesse **Promoções > Promoções**, ou digite **Promoções** na barra de busca no topo da página.\n2. Busque pela promoção que deseja configurar.\n3. Na opção **Destaque nos produtos**, selecione **Com destaque**.\n4. Configure a promoção com as especificações desejadas.\n5. Clique em `Salvar`.\n6. Prossiga para as instruções correspondentes à tecnologia de frontend utilizada por sua loja:\n\n- [Store Framework](#destaque-de-promocoes-no-store-framework)\n- [CMS Portal (Legado)](#destaque-de-promocoes-no-cms-portal-legado)\n\n## Destaque de promoções no Store Framework\n\nPara lojas desenvolvidas com Store Framework, após configurar o destaque da promoção, siga as instruções da documentação do componente [Product Highlights](https://developers.vtex.com/docs/apps/vtex.product-highlights).\n\n## Destaque de promoções no CMS Portal (Legado)\n\nPara lojas CMS Portal (Legado), após configurar o destaque da promoção, configure o [template de página](#configurar-o-template-de-pagina) e o [template de prateleira](#configurar-o-template-de-prateleira) no módulo CMS. Além disso, seu CSS deve estar configurado para essa função.\n\n### Template de página\n\nEssa configuração consiste em editar o template de página utilizado para o layout da página de produto e incluir a tag ``.\n\n1. No Admin VTEX, acesse **Storefront > Layout**, ou digite **Layout** na barra de busca no topo da página.\n2. Clique em **CMS > Sites and channels**.\n3. Clique no nome do **site** desejado.\n4. Clique em **/ > Produto > @Produto@**.\n5. Clique sobre o layout marcado em com um check vermelho.\n\n \n\n6. No campo __Template__, verifique qual o nome do template utilizado:\n\n \n\n7. No menu lateral, clique em **CMS > HTML Templates**.\n8. Clique no template encontrado em **@Produto@**.\n\n \n\n9. Insira o código `` de acordo com sua estrutura HTML.\n10. Clique em **Save Template**.\n\n### Template de prateleira\n\n1. No Admin VTEX, acesse **Storefront > Layout**, ou digite **Layout** na barra de busca no topo da página.\n2. Clique em **CMS > Shelves Templates**.\n\n \n\n3. Clique sobre o template desejado.\n4. Insira o código `$product.DiscountHightLight`.\n5. Clique em **Save Template**.\n\nApós realizar as configurações no Admin VTEX e adicionar as tags apropriadas nos templates, uma classe CSS com o nome de cada promoção que atenda aos requisitos será automaticamente gerada no HTML. Por exemplo, se a promoção se chama “BlackFriday”, uma classe chamada `.BlackFriday` será gerada no HTML do produto ou prateleira.\n\nCom a classe gerada, você precisa definir seus estilos CSS, customizando um texto ou imagem para a flag diretamente nos templates."}