Como deixar a sua loja com a cara do Natal utilizando Javascript
Agora que a Black Friday passou já podemos nos focar em outra data super importante do e-commerce brasileiro: o Natal.
Neste post você vai aprender uma dica de design para deixar o layout da sua loja com a cara da época mais festiva do ano.
Efeito de neve caindo
A neve é um dos símbolos do Natal, e que tal você poder inserir um efeito de “neve caindo” na sua loja virtual?
IMPORTANTE: para fazer isso você precisa de conhecimentos mínimos de HTML e Javascript. Caso não saiba, peça ajuda para alguém que conheça e confie! 🙂
Vamos à prática
Dentro do Administrador Nuvem da sua loja, acesse a seção Configurações > Códigos externos.
Dentro do campo “Códigos de rastreamento” cole o seguinte código:
<script src="//d26lpennugtm8s.cloudfront.net/assets/blog_pt/snowstorm-min.js" async></script> <script type="text/javascript"> snowStorm.snowColor = '#ffffff'; snowStorm.flakesMaxActive = 96; snowStorm.useTwinkleEffect = true; </script>
Exemplo de como o campo deve ficar preenchido:
Feito isso, é só clicar em “Salvar alterações” e conferir na sua loja.
Dica: é muito importante manter um bom contraste entre a cor do “floco de neve” e a cor do fundo da loja. Para alterar a cor do floco de neve basta editar o valor hexadecimal da linha `snowStorm.snowColor = ‘#ffffff’;
UPDATE: Caso a cor do floco não esteja sendo aplicada corretamente, você pode remover o texto `async`.
Você pode ver como o efeito da neve ficará nesta loja teste.
Se você precisar ajustar a cor, pode acessar a ferramenta “Color”, da Adobe. Nela você poderá testar a cor que melhor se encaixa ao seu layout.
Importante: para que a performance da sua loja não seja comprometida, o efeito não funcionará em celulares.
Gostou?
O que você achou do tutorial? Conseguiu aplicar na sua loja? Compartilhe sua opinião nos comentários e deixe o link da sua loja para vermos o resultado!
Ainda não aproveita as vantagens de vender pela internet? Experimente a Nuvem Shop por 15 dias grátis e realize seu sonho de empreender.
Data da última atualização: 29/08/2018
Pingback: 3 ideias de mensagens para e-mail marketing de Natal | Blog do E-commerce()