Compatibilidade: todos os temas do Shopify
Este código substitui a paginação padrão na página da coleção e carrega os produtos quando eles rolam para baixo, por isso é uma rolagem infinita real. Sem clicar em um botão. Nenhum aplicativo ou biblioteca está sendo usado.
O código escrito usa a API Intersection Observer, que é melhor do que ouvir o evento scroll.
“A API Intersection Observer fornece uma maneira de observar de forma síncrona mudanças na interseção de um elemento de destino com um elemento ancestral ou com a janela de visualização de um documento de nível superior.” -Mozilla _
O desempenho do site não está sendo afetado pelo código. Veja a imagem abaixo (resultado do farol) após a instalação do código.
Isso também é compatível com dispositivos móveis e funciona bem com dispositivos com tela de toque. Também adicionei um botão de rolagem para cima.
Você pode conferir a loja de demonstração aqui . Senha: made4uo
Limitações: certifique-se de ter mais de 10 produtos em cada página de paginação para carregar o outro conjunto de produtos.
O que você está comprando:
- O produto carrega quando o usuário rola até o final da página
- Sem clicar no botão
- Código bem escrito sem nenhuma biblioteca externa sendo usada
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em 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 customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Vá para a página Admin > Loja online > Temas > Ações > Editar código
2. Abra a pasta Snippet e clique em "Adicionar um novo snippet", nomeie-a como "rolagem infinita" e cole o código abaixo.
3. Abra o modelo de coleção do tema correspondente. Geralmente está na pasta Seção. Para temas gratuitos do Shopify 2.0, é "main-collection-product-grid.liquid".
Qualquer tema GRATUITO do Shopify 2.0 | Seção | main-coleção-produto-grid.liquid
Estreia | Seção | modelo de coleção.liquid
Mínimo | Seção | modelo de coleção.liquid
Fornecimento | Seção | modelo de coleção.liquid
Empreendimento | Modelo | coleção.liquid
Impulso | Seção | coleção principal.liquid
Dividir | Seção | coleção principal.liquid
Simplificar | Seção | modelo de coleção.liquid
Seu tema não está na lista? Basta entrar em contato conosco usando "Converse conosco".
4. Em seguida, encontre " {%- endpaginate -%} ." Então acima dele, coloque o código abaixo. Em alguns temas, pode ser necessário encontrar o código " {% render 'pagination' %} " e colocar o código depois dele. Para Dawn versão 8 e superior atualizado, procure o {% render pagination... code and place the code after the {% endif %} . See image below. 
5. Certifique-se de SALVAR seu trabalho.
Atualização 01/09/2022: Encontrei uma diferença de código entre a versão 2.1 do Dawn abaixo e a versão atual. Código atualizado para funcionar com ambos
Atualização 20/08/2023: Encontrou um problema de posicionamento na versão mais recente do Dawn
Não hesite em entrar em contato comigo através do "Converse conosco", se tiver problemas.