4 truques de design para deixar a sua loja com a cara do Natal

Truques design loja virtual Natal

Já é tradição! O Natal está chegando e, assim como no varejo físico, está na hora de deixar a sua loja virtual enfeitada para a temporada.

Neste post, você vai aprender a fazer quatro modificações no design da sua loja:

  1. Efeito de neve caindo;
  2. Imagem de fundo temática;
  3. Layout com as cores do Natal;
  4. Logotipo com gorro do Papai Noel.

Os itens estão ordem de dificuldade: do mais simples ao mais complexo. Sem mais delongas, vamos lá!

1. Efeito de neve caindo

No último Natal, em 2016, fizemos um tutorial completo ensinando a aplicar o efeito de neve caindo no layout da sua loja. Sugerimos que comece por esse tópico!

Confira o passo a passo

2. Imagem de fundo temática

Outra forma simples de modificar a aparência da sua loja é colocando uma imagem de fundo temática em formato padrão de repetição (pattern, em inglês). Para fazer isso, é recomendado que você tenha conhecimentos mínimos de CSS.

Nós preparamos quatro opções de fundos diferentes. Na coluna da direita você vê uma amostra da imagem, e à esquerda pode copiar o código CSS correspondente:

Árvore de natal:

See the Pen xmas_tree by Marcos Paiva (@marcospaiva) on CodePen.

Neve de natal:

See the Pen xmas_snow by Marcos Paiva (@marcospaiva) on CodePen.

Bola de natal:

See the Pen xmas_balls by Marcos Paiva (@marcospaiva) on CodePen.

Feliz natal:

See the Pen happy_xmas by Marcos Paiva (@marcospaiva) on CodePen.

Você deve copiar o código CSS da imagem escolhida e colá-lo em Layout > Personalizar Layout > Edição de CSS avançada, dentro do painel de administração da sua loja.

Feito isso, é só clicar em Salvar Alterações para ver como ficou. Caso você queira usar uma cor personalizada de fundo, remova a linha:

background-color:#f9fafb!important;

Passando o Natal, basta apagar o código inserido e clicar novamente em Salvar Alterações para sua loja voltar à aparência original.

3. Layout com as cores do Natal

E que tal deixar o layout da sua loja com padrão de cores natalino? Primeiro, acesse Layout > Personalizar Layout > Cores da sua marca em seu painel de administração para visualizar a combinação atual.

Antes de prosseguirmos, uma dica:

Nós recomendamos que você salve as cores atuais da sua loja para poder reconfigurá-las depois do Natal. Seguindo o caminho mencionado acima, clique em uma cor do seu layout e depois em Nova cor. Então copie o código hexadecimal dela e cole-o em um arquivo .txt. Algo como no vídeo abaixo:

Salve em um local de fácil localização (como a área de trabalho) e repita o processo com todas as outras cores. O meu backup, por exemplo, ficou assim:

Exemplo de backup

Agora sim, vamos às cores!

Preparamos dois padrões de cores ideais para os modelos Material, Man e Cosmetics, mas que podem ser facilmente adaptados para os outros layouts também:

See the Pen POyWLO by Marcos Paiva (@marcospaiva) on CodePen.

See the Pen Material color pallete 2 by Marcos Paiva (@marcospaiva) on CodePen.

Lembrando: para adicionar uma cor personalizada, você precisa entrar em Layout > Personalizar Layout > Cores da sua marca no seu painel de administração, clicar na cor que deseja alterar e então selecionar Nova cor (mesmo processo demonstrado no vídeo acima). Então é só substituir os campos com os valores da sua variação escolhida.

Modelo Material

Variação 1

Cor principal da sua marca: #D2322D
Cor de destaque da sua marca: #B48D4C
Cor dos textos: #484846
Cor de fundo: #F2F1ED

Variação 2

Cor principal da sua marca: #D2322D
Cor de destaque da sua marca: #B48D4C
Cor dos textos: #484846
Cor de fundo: #F2F1ED

Modelo Man

Variação 1

Cor de fundo: #F2F1ED
Texto de contato: #484846
Texto na barra de navegação: #FFFFFF
Texto na barra de navegação (passando o mouse):#ecf0f1
Fundo da barra de navegação: #B48D4C
Bordas da barra de navegação: #B48D4C
Texto do título das páginas: #B48D4C
Fundo do título das páginas: #FFFFFF
Fundo do botão de compra: #D2322D
Fundo dos botões secundários e do resumo do carrinho: #484846
Texto dos botões: #FFFFFF
Fundo do rodapé: #D2322D
Texto do rodapé: #FFFFFF
Resto dos textos: #484846

Variação 2

Cor de fundo: #ebfcf8
Texto de contato: #F65960
Texto na barra de navegação:#FFFFFF
Texto na barra de navegação (passando o mouse): #81063b
Fundo da barra de navegação: #F65960
Bordas da barra de navegação:#F65960
Texto do título das páginas: #F65960
Fundo do título das páginas: #FFFFFF
Fundo do botão de compra: #F65960
Fundo dos botões secundários e do resumo do carrinho:#0F7E71
Texto dos botões: #FFFFFF
Fundo do rodapé: #81063b
Texto do rodapé:#FFFFFF
Resto dos textos: #81063b

Modelo Cosmetics

Variação 1

Cor principal da sua marca: #81063b
Cor secundário da sua marca: #F65960
Cor de fundo: #ebfcf8
Cor de fundo secundário: #0F7E71
Cor dos textos: #0F7E71

Variação 2

Cor principal da sua marca: #D2322D
Cor secundário da sua marca: #B48D4C
Cor de fundo: #F2F1E
Cor de fundo secundário: #484846
Cor dos textos: #484846

4. Logotipo com gorro do Papai Noel

Por fim, o último toque natalino que você poderá dar ao seu negócio é colocar o gorro do bom velhinho no logotipo da loja. Algo como na imagem abaixo:

Exemplo de logo natalino

Para fazer isso, você precisará de três coisas básicas

  1. Um editor de imagens como o Photoshop ou o Canva.
  2. A imagem do seu logotipo (preferencialmente em PNG). Para baixá-lo, acesse seu site, clique na imagem com o botão direito do mouse e selecione Salvar imagem como.
  3. Uma imagem de gorro em .png. Sugerimos uma dessas três opções.

Tudo em mãos? Agora, basta abrir as duas imagens no editor e sobrepor uma à outra, ajustando a posição do logo. A dica é: sempre que quiser redimensionar um objeto, fazer isso com a tecla Shift pressionada, para manter as proporções e não deixar o objeto distorcido.

Veja uma demonstração no vídeo abaixo:

Depois disso, é só subir a imagem na sua loja. Para isso, acesse Layout > Personalizar Layout > Logotipo da sua loja em seu painel de administração. Lembre-se de guardar também a versão original do seu logotipo (na área de trabalho, por exemplo) para que possa restaurá-lo depois do Natal.

Gostou?

O que você achou das dicas? Conseguiu aplicá-las? 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.


O que você achou desse conteúdo?


Marcos Paiva

Marcos é designer e tecnólogo em gestão empresarial. É apaixonado por música e seriados da Netflix. Divide seu tempo em cuidar da familia, tentar ter uma banda, trabalhar e dormir (não necessariamente nessa ordem). De vez em quando escreve alguns tweets @marcos_paiva


4-truques-de-design-para-deixar-a-sua-loja-com-a-cara-do-natal