Load ALL Shopify Products in ONE Page - NO limit

Load ALL Shopify Products in ONE Page - NO limit

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.

Shopify set a limit to show only 50 products per page in the collection, more on for making your website load faster. You can see the information here. With the Shopify limit, it does not mean that loading more than 50 products in the collection page is not possible. 

You can load more than 50 products at once but note, this might be make the product pictures load slowly. You can check the demo here to see what I mean. Password: made4uo. 

Yes, no infinite scrolling, no load more button and etc. 

 What you are buying:

  • Load more than 50 products in one page
  • Images might take time to load
  • No button or infinite scroll

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-all-products." Then paste the code below and click SAVE.

{% comment %}
{% render 'load-all-products', next_page: paginate.next.url, page_size: paginate.pages, end_text: "No more products to load" %}
{% endcomment %}

<load-all-products data-next="{{ next_page }}" data-page-size="{{ page_size }}" data-end-text="{{ end_text }}">
</load-all-products>
<div class="scrollToTopButton">
Scroll To Top
</div>
<style>
load-all-products {
position: relative;
width: 100%;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all .5s ease;
}

.scrollToTopButton {
position: fixed;
bottom: 20px;
right: 149px;
background: #ececec;
padding: 5px 10px;
z-index: 1;
cursor: pointer;
border-radius: 5px;
}
</style>
<script>
class LoadAllProducts extends HTMLElement {
constructor() {
super();
this.gridParent = this.previousElementSibling;
this.gridContainer;

if(this.gridParent.querySelector("#main-collection-product-grid")) {
this.gridContainer = this.gridParent.querySelector("#main-collection-product-grid")
} else {
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.init();
}

init() {
if (!this.pagination) return;
this.pagination.style.display = "none";

const maxPage = this.dataset.pageSize;
for(let p = 1; p <= maxPage; p++){
this.fetchNextPage(p);
}
}

fetchNextPage(t) {
if (t <= this.dataset.pageSize) {
const pageUrl = `{{ shop.url }}/${this.dataset.next}`;
var url = new URL(pageUrl);
url.searchParams.set("page", t); // setting your param
var 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");
let innerHTML;

if(e.querySelector("#main-collection-product-grid")) {
innerHTML= e.querySelector("#main-collection-product-grid").innerHTML
}else {
innerHTML = e.querySelector("#product-grid").innerHTML
}

this.gridContainer.insertAdjacentHTML("beforeend", innerHTML);
})
["finally"](() => {})
["catch"]((t) => {
console.error("Error:", t);
});
}

if (t == this.dataset.pageSize) {
this.innerHTML = `<h2>${this.dataset.endText}</h2>`;
}
}


scrollToTopFx(t) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
t.currentTarget.style.display = "none";
}
}
customElements.define("load-all-products", LoadAllProducts);
</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-all-products',
next_page: paginate.next.url,
page_size: paginate.pages,
end_text: "No more products to load" %}  

 

6. Make sure to SAVE your work.

 

That is it (",)

Copied!
Voltar para o blogue

Deixe um comentário