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.

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

One Time Purchase!

$24.99
Only
Envio calculado na finalização da compra.
Refresh after a purchase

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

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