Como deixar a sua loja com a cara do Natal utilizando Javascript

Marcos Paiva Artigo 5 min

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: 17/04/2019