You’ve got some products and an internet connection, so you’ve got a website. 

You’ve got a website full of products, so your website has data. 

You’ve got a website that has data, and that data has to come from somewhere.

… And thus we’ve arrived at the topic of discussion for today! Strap in!

The standard way to access collection and product data in Shopify is via liquid. We are all familiar with techniques such as displaying a product title using {{ product.title }} and this is always the recommended way to access your data where possible. It’s simple and effective… until you hit a snag.

What if you hit a scenario where that is not possible? Sometimes you will encounter Shopify’s various data limits such as 50 products per collection or 20 product handles in the all_products object. What if you need to go beyond those limits and get all data without any limits? The answer is to use the Shopify API. Like any other typical REST based API, Shopify’s API can be used to return the full set of data for collections, products and more. The one key advantage of getting data via the API is that it is not limited in the same way that the liquid methods are.

Let’s walk through an example of using the API to populate a page with product data to see how it works. You may not need this helpful hint every time, but for the times you do, it’ll be a life-saver. 

In this case we will use the API to get a collection and display the products within it.

• The first thing we’ll do is add an empty div to populate from our data. Unlike liquid where you inject the data directly into the template, we can’t do that with this approach because we will be using javascript to access the API and manipulate the data that it returns. Instead we will be using an approach similar to a javascript framework such as Angular or Vue, where you dynamically populate empty placeholder elements to populate the page content. So for this example we will add this div...

<div id="collection"></div>

• Now comes the magic of all of this: the javascript that accesses the API. Note that for a real world application you need to pass in the real ID of your collection in the URL so it looks like /collections/[collection ID]/products.js. We are using a dummy one here just to illustrate the format.

jQuery.getJSON('/collections/12345678/products.js', 
function(collection) {
  // Do something with the data
}); 

• Nothing too complex here. We ping the API with our collection ID, it returns a data object containing all products, and we then iterate through that object to inject the particular content we want to display on our page.
• For this example, we want to display a list of products like you would typically see on a collection page like this...
  

jQuery.getJSON('/collections/12345678/products.js', 
function(collection) {
    jQuery.each(collection.products, function(i, product) {
        $(‘#collection’).append(‘<div class=”product”>’ + ‘<img src=”’ + product.image.src + ‘“>’ + ‘<a href=”/products/’ + product.handle + ‘”>’ + product.title + ‘</a>’ + ‘<div class=”price”>’ + Shopify.formatMoney(product.price) + ‘</div>’ + ‘</div>’);
    });
});

• To populate this content we loop through the collection data object returned from the API and append the content to our empty div. You can inspect the object in your browser dev tools to see the exact attributes the object contains. For our purposes here we get the image using the image.src value, the link to the product is formed using the handle value and the price value uses the factory function Shopify.FormatMoney() to format the price correctly.

And there we have it, a dynamically populated collection page that can display as many products as we want - not just the 50 per page that the liquid approach limits us to. This is especially useful for applications such as a layout that uses lazyloading to display all products in one continuous scroll.

And that’s not all you can do with the Shopify API. We encourage you to explore the API and all the powerful uses it can serve. We do still favor using the standard liquid data objects for conventional contexts, but if you ever need to build something outside of Shopify’s data limits then this technique is an essential one to be aware of. 

You’ve got some new information, so you’ll probably put it to use.

You put some of your new information to use, so you’re probably seeing success.

You’re seeing success and want more, you should probably reach out to Slicedbread, we’ll help you!