Personalizar o rodapé da loja
Neste artigo vamos te mostrar como personalizar o rodapé da sua loja.
Se você quiser personalizar ainda mais sua loja adicionando links para o seu site, um logotipo ou links para outros recursos no rodapé, este tutorial é para você.
Mostraremos como adicionar um rodapé que pode incluir uma imagem e links como este:
VAMOS PASSO A PASSO:
1. Copie o seguinte código:
<!-- FOOTER custom -->
<footer class="footer-top">
<div class="container">
<nav class="row">
<div class="col-12 col-md">
<ul class="logos">
<!-- The following label corresponds to the image(logo) -->
<li> <a href="#" target="_blank"> <img class="logo-footer" src="#"><a/>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">U.S</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank"> About us</a></li>
<li><a class="text-muted" href="#" target="_blank">Contact</a></li>
<li><a class="text-muted" href="#" target="_blank">Website</a></li>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">HELP</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank">Help center</a></li>
<li><a class="text-muted" href="#" target="_blank">Frequent questions</a></li>
</ul>
</div>
</nav>
</div>
</footer>
<!-- FOOTER custom End -->
NOTA: Você pode modificar os campos em negrito adicionando os textos e não se esqueça de substituir o símbolo de hashtag (#) pelas URLs correspondentes.
2. Após adicionar seu logotipo, textos e URLs, vá em Painel de Controle > Configurações > Avançado e cole o código no campo Custom before </body> code:
Salve as alterações.
3. Agora vamos estilizá-lo. Para que fique como a imagem que mostramos no início deste tutorial, use este código:
/*--- FOOTER --*/
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
/*--- end FOOTER --*/
NOTA: Você pode modificar as cores e a aparência editando os valores de cada tag. Para isso, é necessário ter conhecimento de CSS ou contar com a ajuda de um especialista.
📌Dependendo do plano que você escolheu, o código CSS será colado em lugares diferentes, mas não se preocupe, funciona da mesma forma.
Ambos são configurados em Painel de Controle -> Configurações -> Avançado
- Caso você tenha o campo CSS Personalizado, pode usar o código CSS que compartilhamos acima:
- Se você não tiver o campo CSS Personalizado, precisará adicionar a tag <style> </style> ao código e colocar o CSS em Custom before </head> code:
📌Somente neste caso, use este código:
<style>
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
</style>
Salve as alterações.
Pronto! Você criou seu próprio rodapé personalizado.
NOTA: Algumas tags podem apresentar erros e é por isso que o código não funciona. Para corrigir, verifique se o código segue as diretrizes compartilhadas 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
Obrigado!