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.
2. Inclua no design, pelo menos, um componente avançado do tipo Produtos.
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.
4. Nomeie a variável que exibirá o preço com desconto. Você pode chamá-la: "originalPrice".
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".
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").
8. Atribua à variável o tipo de dado "Moeda".
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.
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}} <span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}"> {{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;"> {{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.
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.
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:
-
Exibir percentual de desconto apenas quando houver desconto em um conteúdo web., para aplicar a mesma funcionalidade em conteúdos do tipo web.
-
Campanha semanal de produtos recomendados, para enviar toda semana uma newsletter com recomendações personalizadas.
-
Carrinho abandonado + recomendações, para enviar um email aos contatos com os produtos abandonados no carrinho e produtos relacionados.
- Complementos pós-compra, para enviar um email com produtos complementares após um período sem comprar.