Pular para o conteúdo principal

Neste tutorial, vamos te mostrar como você pode personalizar o background da sua loja para dar a ela o estilo que quiser.

Se você quiser colocar uma imagem de fundo ou alterar a cor de fundo, vamos te mostrar em passos simples como personalizar o background da sua loja. Mostraremos como colocar uma imagem:

ou alterar a cor:

VAMOS PASSO A PASSO:

Vá em Painel de Controle > Configurações > Avançado e verifique se você tem o campo de CSS Personalizado.

📌Se você tiver CSS Personalizado, cole o seguinte código lá:

  • PARA COLOCAR UMA IMAGEM:
body {
background-image: url(https://link.com/images/img.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

NOTA: Você deve modificar a url em negrito, colocando a URL onde sua imagem está armazenada.

💡 Caso você não tenha a imagem hospedada em algum lugar, pode usar o ibb.co (gratuito e online).

  • PARA ALTERAR A COR:
body {
background: #FFD700;
}

NOTA: Dependendo da cor que você quiser inserir, pode colocar o código HEX conforme mostrado no código (substitua o "#FFD700" pelo código da cor desejada).

💡 Aqui compartilhamos um site onde você pode encontrar os códigos de cores.

Salve as alterações. Agora o seu background está pronto!

📌 Se você não tiver CSS Personalizado, cole o código em Custom before code da seguinte forma:

Você pode usar os mesmos códigos acima, envolvendo-os com a tag

.

  • O código para a imagem ficará assim:
<style>
body {
background-image: url(https://link.com/images/img.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
  • E o código para a cor:
<style>
body {
background: #FFD700;
}
</style>

Salve as alterações. Agora o seu background está pronto!

INFORMAÇÕES ADICIONAIS:

Algumas tags podem apresentar erros e é por isso que o código não funciona. Para corrigir, verifique se o código está correto e conforme compartilhamos neste tutorial.

Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para [email protected].