Load More Button for Collection Page with Scroll to Top

Load More Button for Collection Page with Scroll to Top

Log in or Sign up to ensure access to purchased code across multiple devices.

Load More Button for Collection Page with Scroll to Top

One Time Purchase!

$24.99
Only
Refresh after a purchase

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes

Add a load more button with scroll to top button. I create an infinite scroll, check the link for the code but if you prefer a load more button, then just follow the instructions below. 

Change the "Load more" when you render the code to what ever you want. 

Check DEMO store here 💻. Password: made4uo

 What you are buying:

  • Load products in collection using a button
  • Mobile friendly

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start:

1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Action > Edit code. 
3. Open the Snippet folder, and click "create a new snippet", name it "load-more." Then paste the code below and click SAVE.

{% comment %}
  {% render 'load-more', next_page: paginate.next.url, page_size: paginate.pages, load_more_text: "Load more", end_text: "No more products to load" %}
{% endcomment %}
<load-more data-next="{{ next_page }}" data-page-size="{{ page_size }}" data-end-text="{{ end_text }}">
  {% if page_size > 1 %}
    <div class="loadingBox hide-loading">
      <span id="loading_1" class="loadingScroll">&nbsp</span>
      <span id="loading_2" class="loadingScroll">&nbsp</span>
      <span id="loading_3" class="loadingScroll">&nbsp</span>
      <span id="loading_4" class="loadingScroll">&nbsp</span>
      <span id="loading_5" class="loadingScroll">&nbsp</span>
      <span id="loading_6" class="loadingScroll">&nbsp</span>
      <span id="loading_7" class="loadingScroll">&nbsp</span>
      <span id="loading_8" class="loadingScroll">&nbsp</span>
    </div>
    <button class="loadMoreBtn btn button">{{ load_more_text }}</button>
  {% endif %}
</load-more>
<div class="scrollToTopButton">Scroll To Top</div>
<style>
load-more {
  position: relative;
  width: 100%;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
.loadingBox {
  position: relative;
  width: 234px;
  height: 28px;
  margin: auto;
  opacity: 1;
  transition: opacity ease 0.5s;
}
.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.5s;
  -o-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  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;
  display: none;
}
.hide-loading {
  opacity: 0 !important;
}
#loading_1 {
  left: 0;
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.1s;
}
#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.25s;
}
#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.5s;
}
#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: 0.55s;
}
#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.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 0.75s;
}
#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.15s;
}
@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);
  }
}
load-more {
  position: relative;
  width: 100%;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
.loadingBox {
  position: relative;
  width: 234px;
  height: 28px;
  margin: auto;
  opacity: 1;
  transition: opacity ease 0.5s;
}
.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.5s;
  -o-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  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;
  display: none;
}
.hide-loading {
  opacity: 0 !important;
}
#loading_1 {
  left: 0;
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.1s;
}
#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.25s;
}
#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.5s;
}
#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: 0.55s;
}
#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.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 0.75s;
}
#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.15s;
}
@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 LoadMoreComponent extends HTMLElement {
constructor() {
super();
this.gridParent = this.previousElementSibling;
this.gridContainer = this.gridParent.querySelector("#product-grid");
this.pagination = document.querySelector('[class^="pagination"]');
 
this.page = 1;
this.scrollToTopBtn = document.querySelector(".scrollToTopButton");
if(this.scrollToTopBtn) this.scrollToTopBtn.addEventListener("click", this.scrollToTopFx.bind(this)) 
this.loadMoreBtn = this.querySelector(".loadMoreBtn");
this.loadMoreBtn.addEventListener('click', this.pageSet.bind(this));
this.loading = this.querySelector('.loadingBox');
this.pagination.style.display = "none"; 
window.addEventListener('scroll', () => {
if(window.scrollY < 300){
this.scrollToTopBtn.style.display = "none"
} else {
this.scrollToTopBtn.style.display = "block"
}
})
}
pageSet() {
this.page++;
this.loading.classList.remove('hide-loading');
this.fetchNextPage(this.page);
} 
fetchNextPage(t) {
if (t <= this.dataset.pageSize) {
const pageUrl = `{{ shop.url }}/${this.dataset.next}`;
const url = new URL(pageUrl);
url.searchParams.set("page", t); // setting your param
const newUrl = url.href;
fetch(`${url}`, { method: "GET", headers: { "Content-Type": "text/html" } })
.then((t) => t.text())
.then((t) => {
const e = new DOMParser().parseFromString(t, "text/html");
this.gridContainer.insertAdjacentHTML("beforeend", e.querySelector("#product-grid").innerHTML);
})
["finally"](() => {
this.loading.classList.add('hide-loading');
if (t == this.dataset.pageSize) {
this.innerHTML = `<h2>${this.dataset.endText}</h2>`;
}
})
["catch"]((t) => {
console.error("Error:", t);
});
}
} 
scrollToTopFx(t) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}
customElements.define("load-more", LoadMoreComponent);
</script>

4. Next, we need to add this to our collection section. Open the collection template for your corresponding theme. It is usually under the Section folder. For Shopify 2.0 free themes, it is the "main-collection-product-grid.liquid."

Theme Name Folder Name Collection Name
Any Shopify 2.0 FREE themes , including "Refresh" Section main-collection-product-grid.liquid
Debut Section collection-template.liquid
Minimal Section collection-template.liquid
Supply Section collection-template.liquid
Venture Template collection.liquid 

 

5. Next, find the " {%- endpaginate -%}." Then above it, place the code below.

On some themes, you might need to find the code "{% render 'pagination' %}" and place the code after it. For updated Dawn version 8 and above, please look for the "{% render pagination..." code and place the code after the {% endif %}. See image below. Infinite scroll placement

{% render 'load-more', next_page: paginate.next.url, page_size: paginate.pages, load_more_text: "Load more", end_text: "No more products to load" %}
Copied!
Back to blog

1 comment

How to create multiple Load More buttons on a page?

kabir sam

Leave a comment