Artigos sobre: Personalize sua loja

Personalizar o background da loja

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 </head> code da seguinte forma:


Você pode usar os mesmos códigos acima, envolvendo-os com a tag <style>...</style>.


  • 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 support@publica.la.

Atualizado em: 11/05/2026

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!