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