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 mostrar em conteúdos web o percentual de desconto apenas quando houver promoção.
Tempo de implementação: 15 minutos.
Dificuldade: Média
Quando usar?: Em conteúdos que exibem produtos com e sem desconto.
PASSO 1. Crie um conteúdo web
1. Acesse “Conteúdo > Conteúdo web” e clique em Criar novo conteúdo web.
2. Escolha o tipo de conteúdo web adequado, atribua um nome e clique em Criar conteúdo web.
Se você quiser saber mais sobre os cinco tipos de conteúdo web, clique aqui.
3. Inclua pelo menos um componente avançado do tipo Produtos.
Para esta etapa, recomendamos dar uma olhada no Editor de conteúdo web e em como criar um bloco de produtos personalizados em um conteúdo web.
PASSO 2. Insira classes e estilos CSS
4. Adicione um Componente HTML na parte superior do design.
5. Insira o seguinte trecho de código, substituindo o conteúdo do elemento HTML.
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
PASSO 3. Crie as variáveis no conteúdo dinâmico
6. Selecione o bloco de produtos dinâmico 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.
7. Nomeie a variável que mostrará o preço com desconto. Você pode chamá-la: "originalPrice".
8. Clique em Aceitar para salvar as alterações.
9. Repita as ações dos passos 6, 7 e 8 para criar a variável que conterá o desconto. Você pode chamá-la: "discount".
Destacar os percentuais de desconto, com um design atrativo, facilita que o contato preste mais atenção, por isso recomendamos aplicar um estilo para aumentar a probabilidade de conversão.
No nosso exemplo, o desconto é exibido com letras brancas sobre fundo vermelho e o preço original está riscado. Você pode copiar o código CSS no passo 14.
10. Vá até a aba Variáveis e clique sobre (Editar) na variável recém-criada ("originalPrice").
11. No campo Tipo de dado selecione "Moeda".
12. Clique em Aceitar para salvar as alterações.
À variável "discount" não é atribuído um formato para facilitar o funcionamento do código inserido no componente HTML. No entanto, o símbolo de porcentagem (%) é adicionado no editor para que apareça no conteúdo.
13. Selecione novamente o bloco de produtos dinâmico e, na aba Propriedades, clique no botão Editar código HTML.
14. No editor de conteúdo dinâmico, atribua a classe CSS "cn_discount_{{discount}}" aos elementos que exibem as variáveis do preço original e do desconto.
O bloco que inclui o percentual de desconto é o seguinte (linha 2 do código):
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}} <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>
O bloco que inclui o preço original riscado é o seguinte (linha 3 do código):
<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span> {{unitPrice}}</span></div>
15. Clique em Aplicar para salvar as alterações do HTML e em Salvar para salvar o conteúdo web.
PASSO 4. Crie um workflow para exibir o conteúdo web
16. Acesse “Workflows” e clique em Criar novo workflow.
Para agilizar a tarefa, você pode usar um dos nossos modelos, por exemplo: recomendador na ficha do produto ou crosselling na home. Lembre-se de que será necessário configurar o workflow seguindo as instruções antes de continuar com este artigo.
Caso deseje criar a estratégia do zero, recomendamos consultar como Exibir produtos personalizados em um conteúdo.
17. No nó “Enviar conteúdo web”, clique em (Editar configuração do nó) e configure a atribuição de variáveis.
18. Clique em Finalizar para salvar as alterações no nó e em Salvar para salvar todas as modificações no workflow.
19. Clique em Iniciar para ativar o workflow.
20. Acesse seu site e verifique se os percentuais de desconto estão sendo exibidos corretamente.
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:
Recomendador de ofertas, para exibir um banner com produtos em oferta.
Recomendador na home, para exibir produtos recomendados com base na atividade do contato no site.
Mais vendidos na ficha do produto, para mostrar ao contato, ao visitar um produto, os artigos mais vendidos da mesma categoria.
Recomendador no checkout, para exibir no checkout produtos relacionados ao carrinho.