Load More Button for Collection Page with Scroll to Top

Load More Button for Collection Page with Scroll to Top

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

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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

1 comentário

How to create multiple Load More buttons on a page?

kabir sam

Deixe um comentário