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.

Exemplo de

Criar um snippet para voltar ao topo

  1. No diretório Snippets, clique em Adicionar um novo snippet de código.

  2. 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.

  3. Cole o seguinte código no arquivo back-to-the-top recém-criado:

    ```html {% comment %} Reduza o valor abaixo se o botão "Voltar ao topo" precisar aparecer em um ponto mais alto da página. Esse valor é definido em pixels. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Compensação vertical na parte inferior do navegador para a posição do botão. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Voltar ao topo {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Clique em Salvar.

    Incluir o snippet

    1. Na pasta Layouts, abra o arquivo theme.liquid.

    2. Vá até o final do arquivo. Logo acima da tag de fechamento </body>, cole o código:

    {% render 'back-to-the-top' %}

    O código deve ficar assim:

    Snippet para inclusão de
    ]

    1. 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:
    {% assign position_from_bottom = '4em' %}
    • Para alterar a distância de rolagem pelo cliente antes da exibição do botão, edite o valor vertical_offset_for_trigger:
    {% assign vertical_offset_for_trigger = 300 %}

    Loja de demonstração

    Veja um exemplo desta personalização na loja de demonstração.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça