Esta customização foi criada por nosso lojista e apresentado em nossa Comunidade. Conheça a Comunidade da LI, por lá você pode interagir com nossos lojistas e nossos tópicos.
Neste artigo, você irá aprender como incluir um botão flutuante com a finalidade de voltar ao topo da loja. Essa funcionalidade é bem útil para os usuários quando há muita informação na página.
Como incluir o botão de subir ao topo?
01 - No painel da sua loja vá em: Personalize sua loja > Incluir código HTML
02 - Clique em Adicionar código
03 - Em seguida, preencha com as seguintes informações:
Local publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: HTML
Copie o código abaixo e cole no campo Conteúdo:
💡 Importante saber:
É possível fazer algumas alterações no código para personalizar ainda mais o botão, as mudanças podem ser realizadas nas linhas:
- color: black; /* alterar cor do botão */
- bottom: 2rem; /* posição vertical: quanto maior, mais para cima */
- right:1rem; /* posição horizontal: quanto maior, mais para esquerda */
- color: #afb3b0; /* alterar cor do botão quando o mouse estiver em cima ou mobile */
- font-size: 3em; /* alterar tamanho do botão */
<style>
.back-to-top {
color:black; /* alterar cor do botão */
position: fixed;
z-index: 999;
bottom: 2rem; /* posição vertical: quanto maior, mais para cima */
right: 1rem; /* posição horizontal: quanto maior, mais para esquerda */
display:none;
}
.back-to-top:active, .back-to-top:focus, .back-to-top:hover {
text-decoration: none;
color:#afb3b0; /* alterar cor do botão quando o mouse estiver em cima ou mobile */
}
.back-to-top i {
font-size: 3em; /* alterar tamanho do botão */
}
</style>
<!-- 2f41fe4a-af21-11ec-b909-0242ac120002 -->
<script type="text/javascript">
$(document).ready(function(){
$("body").append("<a href='#' class='back-to-top'><i class='fa fa-arrow-circle-up' aria-hidden='true'></i></a>"),
$(function toTop() {
$(window).scroll(function() {
$(this).scrollTop() > 400 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()}), $(".back-to-top").click(function() {
return $("html, body").animate({
scrollTop: 0
}, 900), !1})});
})
</script>
Pronto! Em alguns minutos o botão estará disponível em sua loja.
💡É importante saber: Principais dúvidas sobre HTML/CSS
A Loja Integrada não se responsabiliza pela personalização deste código, pois o comportamento pode ser diferente dependendo do tema e outras personalizações. Qualquer mudança no layout inesperada, recomendamos a remoção do código.