Neste artigo você aprenderá a configurar um botão para levar seu cliente para o topo da página sem a necessidade de utilizar a barra de rolagem!

Para isso, basta seguir os passos abaixo:

Passo 1 - Acesse o caminho Configurações > Incluir código HTML

Passo 2 - Clique em Avançado

Passo 3 - Clique em Adicionar código HTML.

Passo 4 - Na tela Criar Código HTML, preencha as seguintes informações:

  • Descrição: voltar ao topo

  • Local publicação: rodapé

  • Página publicação: todas as páginas

  • Tipo: HTML

Passo 5 -  No campo Conteúdo, cole o seguinte código:

<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top")

.fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});

</script>

<style type="text/css">

a.toTop {

background-color: #fb8094;

border: 0;

border-radius: 53px;

bottom: 10px;

color: #ffffff;

cursor: pointer;

display: none;

font-size: 14px;

padding: 10px 12px;

position: fixed;

text-decoration:none;

right: 8px;

text-align: center;

width: auto;

z-index:500;

}

a.toTop:hover {background-color: #eda2af;}

</style>

<a href=''></a>

<a id='rb-top' class="toTop" style='display: none; position: fixed; bottom: 90px; right:1%; cursor:pointer;'>

<i class="fa fa-chevron-up"></i><br>

<span style="font-size:12px;">TOPO</span>

</a>

Passo 6 - Clique em Salvar código HTML e aguarde até 15 minutos para que o botão seja exibido em sua loja!

🔔 É importante saber - Caso você queira alterar a cor do botão, basta inserir o código hexadecimal da cor na seguinte parte do código: background-color: #fb8094. Se precisar de ajuda para identificar qual o código da cor da sua marca, recomendamos a extensão Eye Dropper, do Google Chrome, ou Adobe Color que além de serem ótimas ferramentas, são fáceis e intuitivas para utilizar.

Encontrou sua resposta?