Como inserir botão voltar ao topo na minha loja?
Passo 01 - Acesse Personalize sua loja > Incluir código HTML, para incluir o seguinte código:
- Local publicação: Rodapé
- Página de publicação: Todas as páginas
- Tipo: HTML
Conteúdo: dentro do bloco de código você vai colar o código abaixo.
<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>
Passo 02 - No código encontra-se destacado as informações que podem ser alteradas, como: cor do botão, posição e tamanho do botão. Confira em destaque no print abaixo:
Passo 03 - Não se esqueça de clicar em Criar código, para que as mudanças sejam aplicadas em sua loja!
Créditos: @Daniel.Freitas
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.