One way to make your online store more user-friendly is to implement infinite scroll. This feature allows visitors to automatically load more products as they scroll down the page, instead of having to click on “next” or “previous” buttons. This can make it easier for visitors to find the products they are looking for and can help to improve the overall user experience.
Benefits of Infinite Scroll
- Improved User Experience: Infinite scroll can make it easier for visitors to find the products they are looking for and can help to improve the overall user experience.
- Increased Conversions: By making it easier for visitors to browse your products, infinite scroll can help to increase conversions.
- Reduced Bounce Rate: Infinite scroll can help to reduce the bounce rate of your website, as visitors are less likely to leave if they can easily find the products they are looking for.
What is Infinite Scroll in Shopify?
Shopify Infinite Scroll is a dynamic feature designed to enhance the online shopping experience. It automatically loads additional products on your collection pages as visitors scroll down, eliminating the need for manual pagination. This seamless browsing experience encourages visitors to explore more of your product offerings, potentially leading to increased sales and customer satisfaction.
How to Implement Infinite Scroll in Your Shopify Store
There are several ways to implement infinite scroll in your Shopify store. One option is to use a third-party app. Another option is to add a custom code feature.
To add Shopify infinite scroll to collection pages, you can add a custom liquid snippet to the theme. And render it in the collection page template.
Access Theme Code: In your Shopify admin, go to Online Store > Themes. Locate the theme you want to edit and click the three dots next to the Customize button. From the dropdown menu, select Edit code.
In the Shopify theme editor, click ‘Add a new snippet‘ in the left menu and create a new snippet and name it foysal-infinite-scroll.
Copy the following theme code to add the infinite scroll in Shopify:
<product-infinite-scroll data-next="{{ next_page }}" data-page-size="{{ page_size }}" data-end-text="{{ end_text }}">
{% if page_size > 1 %}
<div class="loadingBox">
<span id="loading_1" class="loadingScroll"> </span>
<span id="loading_2" class="loadingScroll"> </span>
<span id="loading_3" class="loadingScroll"> </span>
<span id="loading_4" class="loadingScroll"> </span>
<span id="loading_5" class="loadingScroll"> </span>
<span id="loading_6" class="loadingScroll"> </span>
<span id="loading_7" class="loadingScroll"> </span>
<span id="loading_8" class="loadingScroll"> </span>
</div>
{% endif %}
</product-infinite-scroll>
<div class="scrollToTopButton">Back To Top</div>
<style>
product-infinite-scroll {
position: relative;
width: 100%;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.loadingBox {
position: relative;
width: 234px;
height: 28px;
margin: auto;
}
.loadingScroll {
position: absolute;
top: 0;
background-color: rgb(0, 0, 0);
width: 28px;
height: 28px;
animation-name: loading_animation;
-o-animation-name: loading_animation;
-ms-animation-name: loading_animation;
-webkit-animation-name: loading_animation;
-moz-animation-name: loading_animation;
animation-duration: 1.6s;
-o-animation-duration: 1.6s;
-ms-animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
transform: scale(0.3);
-o-transform: scale(0.3);
-ms-transform: scale(0.3);
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
}
.scrollToTopButton {
position: fixed;
bottom: 20px;
right: 149px;
background: #ececec;
padding: 5px 10px;
z-index: 1;
cursor: pointer;
border-radius: 5px;
}
#loading_1 {
left: 0;
animation-delay: 0.7s;
-o-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
}
#loading_2 {
left: 29px;
animation-delay: 0.75s;
-o-animation-delay: 0.75s;
-ms-animation-delay: 0.75s;
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
}
#loading_3 {
left: 58px;
animation-delay: 0.9s;
-o-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
}
#loading_4 {
left: 88px;
animation-delay: 1.05s;
-o-animation-delay: 1.05s;
-ms-animation-delay: 1.05s;
-webkit-animation-delay: 1.05s;
-moz-animation-delay: 1.05s;
}
#loading_5 {
left: 117px;
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
}
#loading_6 {
left: 146px;
animation-delay: 1.35s;
-o-animation-delay: 1.35s;
-ms-animation-delay: 1.35s;
-webkit-animation-delay: 1.35s;
-moz-animation-delay: 1.35s;
}
#loading_7 {
left: 175px;
animation-delay: 1.6s;
-o-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
}
#loading_8 {
left: 205px;
animation-delay: 1.64s;
-o-animation-delay: 1.64s;
-ms-animation-delay: 1.64s;
-webkit-animation-delay: 1.64s;
-moz-animation-delay: 1.64s;
}
/* Pristege */
[class^="pagination"], [class^="Pagination"], .pagination {
display: none !important;
}
.js .features--show-element-staggering .ProductList--grid div.ProductItem {
visibility: visible;
}
.js .product-card[reveal-on-scroll="true"] {
opacity: 1;
}
@keyframes loading_animation {
0% {
transform: scale(1);
background-color: rgb(0, 0, 0);
}
100% {
transform: scale(0.3);
background-color: rgb(255, 255, 255);
}
}
@-o-keyframes loading_animation {
0% {
-o-transform: scale(1);
background-color: rgb(0, 0, 0);
}
100% {
-o-transform: scale(0.3);
background-color: rgb(255, 255, 255);
}
}
@-ms-keyframes loading_animation {
0% {
-ms-transform: scale(1);
background-color: rgb(0, 0, 0);
}
100% {
-ms-transform: scale(0.3);
background-color: rgb(255, 255, 255);
}
}
@-webkit-keyframes loading_animation {
0% {
-webkit-transform: scale(1);
background-color: rgb(0, 0, 0);
}
100% {
-webkit-transform: scale(0.3);
background-color: rgb(255, 255, 255);
}
}
@-moz-keyframes loading_animation {
0% {
-moz-transform: scale(1);
background-color: rgb(0, 0, 0);
}
100% {
-moz-transform: scale(0.3);
background-color: rgb(255, 255, 255);
}
}
</style>
<script>
class InfiniteScroll extends HTMLElement {
constructor() {
super();
this.initGrid();
this.init();
this.page = 1;
this.scrollToTopBtn = document.querySelector(".scrollToTopButton");
this.scrollToTopBtn.addEventListener(
"click",
this.scrollToTopFx.bind(this)
);
}
initGrid() {
const gridOptions = [".ProductListWrapper", "#main-collection-product-grid", "#product-grid", ".product-list"];
for (let gridName of gridOptions) {
let grid = document.querySelector(gridName);
if (grid) {
this.gridName = gridName;
this.gridContainer = grid;
break;
}
}
}
init() {
const observer = new IntersectionObserver(this.revealItem.bind(this), {
root: null,
threshold: 0.05,
});
observer.observe(this);
}
fetchNextPage(e) {
if (e <= this.dataset.pageSize) {
const t = `{{ shop.url }}/${this.dataset.next}`;
const i = new URL(t);
i.searchParams.set("page", e);
const r = i.href;
fetch(`${r}`, { method: "GET", headers: { "Content-Type": "text/html" } })
.then((e) => e.text())
.then((e) => {
const t = new DOMParser().parseFromString(e, "text/html");
const i = t.querySelector(this.gridName).innerHTML;
this.gridContainer.insertAdjacentHTML("beforeend", i);
})
.catch((e) => {
console.error("Error:", e);
});
}
if (e == this.dataset.pageSize) {
this.innerHTML = `<h2>${this.dataset.endText}</h2>`;
}
}
revealItem(e, t) {
const [i] = e;
if (!i.isIntersecting) return;
if (i.target) {
this.page++;
this.fetchNextPage(this.page);
}
if (this.page == this.dataset.pageSize) {
t.unobserve(i.target);
}
}
scrollToTopFx(e) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
e.currentTarget.style.display = "none";
}
}
customElements.define("product-infinite-scroll", InfiniteScroll);
</script>Paste the copied into the foysal-infinite-scroll.liquid file and click ‘Save‘.
Now, we’ll call the previously saved Shopify infinite scroll snippet on the collections page.
Open the collections page section liquid file in the theme editor and paste the following code before {%- endpaginate -%}
{% render 'foysal-infinite-scroll',
next_page: paginate.next.url,
page_size: paginate.pages,
end_text: "That's all folks:)"
%}And click ‘Save‘ to update the code.
The Shopify collection pages will now auto-load the next page when users reach the bottom. This method also adds a scroll top top button to the pages.
Conclusion
Infinite scroll is a great way to make your online store more user-friendly and to improve the overall customer experience. If you are looking for a way to increase conversions and reduce the bounce rate of your website, then you should consider implementing infinite scroll.