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
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"> </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> <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 .5s ease; } .loadingBox { position: relative; width:234px; height:28px; margin:auto; opacity: 1; transition: opacity ease .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(.3); -o-transform:scale(.3); -ms-transform:scale(.3); -webkit-transform:scale(.3); -moz-transform:scale(.3); } .scrollToTopButton { position: fixed; bottom: 20px; right: 149px; background: #ececec; padding: 5px 10px; z-index: 1; cursor: pointer; border-radius: 5px; } .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(.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(.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(.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(.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(.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"); 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"; } pageSet() { this.page++; this.loading.classList.remove('hide-loading'); this.fetchNextPage(this.page); } fetchNextPage(t) { if (t <= this.dataset.pageSize) { fetch(`${this.dataset.next.slice(0, -1)}${t}`, { 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; t.currentTarget.style.display = "none"; } } 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.
| {% render 'load-more', next_page: paginate.next.url, page_size: paginate.pages, load_more_text: "Load more", end_text: "No more products to load" %} |