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.

Vamos para o passo a passo:

Passo 01 - No painel da sua loja vá em: Visual > Incluir código HTML

Passo 02 - Clique em Adicionar código

Passo 02 - 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.

Encontrou sua resposta?