how to make infinite scroll for products
hello! id like to have an infinite scroll instead of pages please, how can I change this? studio theme campomadero.com TIA
Hi @HCM15,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" 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>
