Configurar promoção com destaque / flag

O 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.

Neste guia, você encontrará as seguintes seções:

• Promoções elegíveis para destaque
• Restrições
• Configurar a promoção
• Destaque de promoções no Store Framework
• Destaque de promoções no CMS Portal Legado
  • Template de página
  • Template de prateleira

O 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.

Os seguintes tipos de descontos são elegíveis para a aplicação de um destaque:

• Desconto percentual: oferece uma redução percentual no valor do produto.
• Frete percentual: aplica um desconto em parte do valor do frete, permitindo que os clientes paguem menos pelo envio e incentivando a decisão de compra.
• Frete máximo: estabelece um valor máximo para o frete, independentemente de fatores como distância ou peso do pedido.
• Frete grátis: elimina totalmente o custo de envio.
• Brinde: oferece um produto extra sem custo ao cliente, ao comprar um determinado item ou atingir um valor mínimo de compra.

Para mais informações, acesse os artigos da seção Promoções.

Não é possível configurar o destaque de promoções que possuem alguma restrição no carrinho, como:

• Faixa de CEP
• Valor acumulado em compras
• BIN
• Cluster de clientes
• Tipo de frete
• Forma de pagamento
• Número máximo de parcelas, apenas na primeira compra

Essas 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.

Siga as instruções abaixo para configurar o destaque nas promoções de sua loja.

1. No Admin VTEX, acesse Promoções > Promoções, ou digite Promoções na barra de busca no topo da página.
2. Busque pela promoção que deseja configurar.
3. Na opção Destaque nos produtos, selecione Com destaque.
4. Configure a promoção com as especificações desejadas.
5. Clique em Salvar.
6. Prossiga para as instruções correspondentes à tecnologia de frontend utilizada por sua loja:

• Store Framework
• CMS Portal Legado

Para lojas desenvolvidas com Store Framework, após configurar o destaque da promoção, siga as instruções da documentação do componente Product Highlights.

Para lojas CMS Portal Legado, após configurar o destaque da promoção, configure o template de página e o template de prateleira no módulo CMS. Além disso, seu CSS deve estar configurado para essa função.

Essa configuração consiste em editar o template de página utilizado para o layout da página de produto e incluir a tag <vtex.cmc:discountHighLight/>.

1. No Admin VTEX, acesse Storefront > Layout, ou digite Layout na barra de busca no topo da página.

2. Clique em CMS > Sites and channels.

3. Clique no nome do site desejado.

4. Clique em / > Produto > @Produto@.

5. Clique sobre o layout marcado em com um check vermelho.

   

6. No campo Template, verifique qual o nome do template utilizado:

   

7. No menu lateral, clique em CMS > HTML Templates.

8. Clique no template encontrado em @Produto@.

   

9. Insira o código <vtex.cmc:discountHightLight/> de acordo com sua estrutura HTML.

10. Clique em Save Template.

1. No Admin VTEX, acesse Storefront > Layout, ou digite Layout na barra de busca no topo da página.

2. Clique em CMS > Shelves Templates.

   

3. Clique sobre o template desejado.

4. Insira o código $product.DiscountHightLight.

5. Clique em Save Template.

Apó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.

Com a classe gerada, você precisa definir seus estilos CSS, customizando um texto ou imagem para a flag diretamente nos templates.