Configurar promoção com destaque / flag

Débora Ferreira

Débora Ferreira

Última atualização

O destaque na promoção é um aviso que pode ser inserido nas prateleiras e nas páginas de produto, sobre promoções para esses produtos. Um exemplo bem comum é uma imagem abaixo da imagem do produto indicando frete grátis.

O destaque depende do tipo de promoção, pois nem todas as promoções mostrarão o destaque. As promoções que podem exibir destaque são: percentual, frete percentual, frete máximo, frete grátis e brinde. Os demais tipos de promoção não possibilitam a configuração do destaque. Além disso, não é possível configurar destaque quando a promoção possui alguma restrição no carrinho, como faixa de CEP, valor do pedido (a não ser que o produto já tenha valor maior/menor que o configurado neste campo), valor acumulado em compras, restrição de promoção por BIN, cluster de clientes, tipo de frete, forma de pagamento, número máximo de parcelas, apenas na primeira compra.

Essa configuração é feita em 3 partes, uma em promoções e duas nos templates de sua loja. Além disso, seu CSS deve estar configurado para essa função. Veja abaixo como realizar essas configurações.

Configure a promoção

  1. Acesse o módulo Pricing;
  2. Clique na aba Promoções;
  3. Busque pela promoção que deseja configurar;
  4. Na opção Destaque nos produtos, selecione Com destaque;
  5. Clique no botão Salvar.

Configure o template de página

Essa configuração consiste da edição do template de página utilizado para o layout da página de produto e inclusão da tag <vtex.cmc:discountHightLight/> no mesmo.

  1. Acesse o módulo CMS;
  2. Clique em Portal;
  3. Clique em Web-sites;
  4. Clique sobre o website desejado;
  5. Clique em /
  6. Clique em Produto;
  7. Clique em @Produto@;
  8. Clique sobre o layout marcado em vermelho: em template, verifique qual o nome do template utilizado
  9. Volte ao menu lateral e clique em Templates de Página;
  10. Clique no template encontrado no @Produto@ (passo 9);
  11. Insira o código <vtex.cmc:discountHightLight/> de acordo com sua estrutura HTML;
  12. Clique em Salvar Template.

Configure o template de prateleira

  1. Acesse o módulo CMS;
  2. Clique em Portal;
  3. Clique tem Templates de Prateleira;
  4. Clique sobre o template desejado;
  5. Insira o código $product.DiscountHightLight;
  6. Clique no botão Salvar Template.

Pronto! Após essas configurações será criada uma classe no HTML com o nome da promoção. Então, é necessário, pelo CSS, imprimir um texto ou uma imagem para a flag.