Adicionar um botão "Voltar ao topo" em páginas longas
Se você tem páginas longas que exigem muita rolagem, inclua um botão Voltar ao topo no tema.
Criar um snippet para voltar ao topo
Desktop
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Snippets, clique em Adicionar um novo snippet de código.
- Dê aos snippet o nome d
back-to-the-top
e clique em Criar snippet. O arquivo do snippet é aberto no editor de códigos.
- Cole o seguinte código no arquivo
back-to-the-top
recém-criado:
- Clique em Salvar.
iPhone
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Snippets, clique em Adicionar um novo snippet de código.
- Dê aos snippet o nome d
back-to-the-top
e clique em Criar snippet. O arquivo do snippet é aberto no editor de códigos.
- Cole o seguinte código no arquivo
back-to-the-top
recém-criado:
- Clique em Salvar.
Android
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Snippets, clique em Adicionar um novo snippet de código.
- Dê aos snippet o nome d
back-to-the-top
e clique em Criar snippet. O arquivo do snippet é aberto no editor de códigos.
- Cole o seguinte código no arquivo
back-to-the-top
recém-criado:
- Clique em Salvar.
Incluir o snippet
- Na pasta Layouts, abra o arquivo
theme.liquid
.
- Vá até o final do arquivo. Logo acima da tag de fechamento
</body>
, cole o código:
O código deve ficar assim:
- Clique em Salvar.
Configurar o botão "Voltar ao topo" (opcional)
Para personalizar o botão "Voltar ao topo", clique aqui e veja as primeiras linhas do snippet.
- Para alterar a posição do botão em relação à parte inferior do navegador, edite o valor
position_from_bottom
:
- Para alterar a distância de rolagem pelo cliente antes da exibição do botão, edite o valor
vertical_offset_for_trigger
:
Loja de demonstração
Veja um exemplo desta personalização na loja de demonstração.