Load More Button for Collection Page with Scroll to Top

Botão Carregar mais para a página de coleção com rolagem para cima

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: Todos os temas do Shopify

Adicione um botão "Carregar mais" com um botão "Rolagem para o topo". Eu criei uma rolagem infinita, confira o link para o código, mas se preferir um botão "Carregar mais", siga as instruções abaixo.

Altere o texto "Carregar mais" quando renderizar o código para o que você desejar.

Confira a loja DEMO aqui 💻. Senha: made4uo

O que você está adquirindo:

  • Carregar produtos na coleção usando um botão
  • Compatível com dispositivos móveis

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, portanto, nosso código terá pouco ou nenhum impacto na velocidade de seu site
  • Não deixamos ou adicionamos códigos para fazer propaganda de nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de personalização de código. Basta nos contatar com "Converse conosco". Estamos a apenas um clique de distância.

Para começar:

1. Na sua página de Administração, vá para Loja online > Temas
2. Escolha o tema que deseja editar e clique em Ação > Editar código.
3. Abra a pasta de Fragmentos e clique em "criar um novo fragmento", dê a ele o nome "load-more". Em seguida, cole o código abaixo e clique em SALVAR.

 

5. Em seguida, localize o {%- endpaginate -%}. Em seguida, coloque o código abaixo dele.

Em alguns temas, você pode precisar encontrar o código {% render 'pagination' %} e colocar o código após ele. Para a versão atualizada do Dawn 8 e acima, por favor, procure pelo código {% render pagination... e coloque o código após o {% endif %}. Veja a imagem abaixo:

Posicionamento do scroll infinito

 

 

Adicione um botão 'Carregar mais' com um botão 'Rolar para o topo' à sua página de Coleção.

Copied!
Voltar para o blogue

2 comentários

Thank you so much!
Works perfectly

Veronika

How to create multiple Load More buttons on a page?

kabir sam

Deixe um comentário