Caso de uso de variáveis: Mostrar a porcentagem de desconto apenas quando houver desconto em um e-mail

Destacar os preços com desconto e seu percentual de redução nos produtos recomendados permite aumentar as conversões no eCommerce. Por meio de estilos e classes CSS, você poderá mostrar o percentual de desconto e o valor original riscado, ao lado do valor atual, apenas nos produtos que estiverem em promoção. 

Neste artigo, você aprenderá como exibir em um email o percentual de desconto apenas quando houver promoção.

 

Tenha em mente que este método é compatível com a maioria dos gerenciadores, no entanto, o Outlook não suporta a função CSS utilizada, portanto este guia não será funcional nesse gerenciador.

  

Tempo de implementação: 15 minutos.
Dificuldade: Média
Quando usar?: Em emails que exibem produtos com e sem desconto.

 

PASSO 1. Crie um design de email

1. Acesse “Conteúdo > Email” e clique em  Criar novo email.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 1-min.png

2. Inclua no design, pelo menos, um componente avançado do tipo Produtos.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 2-min.png

  

Para saber mais sobre como usar o Editor de email, clique aqui.

Para saber mais sobre como criar um bloco de produtos personalizados em um email, clique aqui.

 

PASSO 2. Crie a variável no conteúdo dinâmico

3. Selecione o bloco de produtos e, no editor incluído em Propriedades, clique em Variáveis para criar uma nova no local onde deseja que o preço com desconto seja exibido.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 3-min.png

4. Nomeie a variável que exibirá o preço com desconto. Você pode chamá-la: "originalPrice".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 4-min.png

5. Clique em  Aceitar para salvar as alterações.

6. Seguindo os mesmos passos, crie a variável que conterá o desconto. Você pode chamá-la: "discount".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 5-min.png

 

Aproveite para aplicar estilo às variáveis para que se destaquem entre si. O design ajuda o contato a prestar atenção ao que se deseja enfatizar.

No exemplo, o desconto é exibido com letras brancas sobre fundo vermelho e o preço original está riscado via CSS (veja o código no PASSO 3).

7. Vá até a aba Variáveis e clique em  (Editar) na variável recém-criada ("originalPrice").

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 6-min.png

8. Atribua à variável o tipo de dado "Moeda".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 7-min.png

9. Clique em  Aceitar para salvar as alterações. 

  

Execute os passos 7, 8 e 9 para a variável "discount" para definir o tipo de dado como "Porcentagem".

10. Selecione novamente o bloco de produtos dinâmico e, na seção Editor, clique na opção HTML.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 8-min.png

11. No editor do conteúdo dinâmico, aplique as seguintes classes e estilos CSS aos elementos que exibem as variáveis do preço original e do desconto:

  • O bloco que inclui o percentual de desconto é o seguinte:
<h5 style="text-align: center;"><strong>{{title}}&nbsp;&nbsp;<span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">&nbsp;{{discount}}</span></strong></h5>
  • O bloco que inclui o preço original riscado é o seguinte:
<h5 style="text-align: center;"><br><span style="color: #808080; text-decoration : line-through;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">{{originalPrice}}</span><span style="font-size: 12pt;">&nbsp;&nbsp;{{price}}</span></h5>

 

12. Clique em  Aplicar para salvar as alterações no código HTML e feche o editor de email clicando em  Salvar

 

PASSO 3. Crie um workflow para enviar o email

13. Acesse “Workflows” e clique em  Criar novo workflow.

 

Para agilizar a tarefa, você pode utilizar nosso modelo Campanha semanal de produtos recomendados. Lembre-se de configurar o workflow conforme as instruções antes de continuar com este artigo.

Caso prefira criar do zero, recomendamos consultar Exibir produtos personalizados em um conteúdo.

14. No nó “Enviar email”, clique em   (Editar configuração do nó) e configure a atribuição de variáveis.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 9-min.png

15. Clique em Aplicar para salvar as alterações no nó e salve todas as modificações do workflow.

16. Clique em   Iniciar para ativar o workflow.

17. Acesse seu gerenciador de email do tipo web e verifique se os percentuais de desconto estão sendo exibidos corretamente no email.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__12.png

 

 Sucesso!
Os percentuais de desconto dos seus produtos serão exibidos sempre que houver um desconto aplicado.


Continue aprendendo!

Para aproveitar todo o potencial da sua conta no Connectif, recomendamos continuar com os seguintes artigos: