hello! id like to have an infinite scroll instead of pages please, how can I change this? studio theme campomadero.com TIA
Topic summary
A user wants to replace pagination with infinite scroll for products on their Shopify store (campomadero.com) using the Studio theme.
Proposed Solution:
A community member provided JavaScript code to be added to theme.liquid (above the </body> tag). The code uses IntersectionObserver to automatically trigger the “Load More” button when it becomes visible during scrolling.
Current Status:
The solution hasn’t worked yet—page numbers still appear and infinite scroll isn’t functioning. The helper has requested the store URL to troubleshoot further (which was subsequently provided).
Key Technical Detail:
The script targets the existing load-more button with class .js-load-more and programmatically clicks it when the user scrolls near it, simulating infinite scroll behavior.
Hi @HCM15 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Above the tag “” tag paste the following. Screenshot attached for reference.
<script>
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector(".button.button.button--primary.button--big.js-load-more");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
button.click();
observer.unobserve(button);
}
});
});
observer.observe(button);
window.addEventListener("scroll", () => {
const offset = 100;
if (!button. isIntersecting &&
(window.scrollY + window.innerHeight) >= button.getBoundingClientRect().top - offset) {
observer.observe(button);
}
});
})
</script>
hi thankyou though I still see the page numbers and doesn’t scroll
Please share store URL.
hello campomadero.com
hello! id like to have an infinite scroll instead of pages please, how can I change this? studio theme campomadero.com TIA