How to Get Shopify Product Data with JSON Format in Frontend

Get Shopify Product Data with Jason Format in JavaScript will be useful when you try to customize a Shopify Theme for Collection or Product List pages.

Today I will show you how to implement this feature with Shopify product API.

Firstly magic thing is we can get any Shopify store’s product data by a URL like this:

https://{shopify-store-url}/products/{product-handle}.json

here {shopify-store-url} is your shopify store full URL, for example : https://neonbeach.com/, {product-handle} is product unique ID in your shopify store, for example: babe-you-look-so-cool-neon-sign, then we can get a full URL:

https://neonbeach.com/products/babe-you-look-so-cool-neon-sign.json

Click the above link or copy them to your favorite browser, you can see the product JSON data returned.

here returned data with all the properties of your product, if you are not familiar with product properties please see Shopify API about product properties.

Then the rest of thing is easy, just wrap this URL and call it in JavaScript. all codes like below:

(function($){
    $(document).ready(function(e){
      var store_url = "https://neonbeach.com/"; // replaced with your shopify store url
      var product_id = "babe-you-look-so-cool-neon-sign"; // replaced with your product id
      var full_url = store_url + '/products/' + product_id + '.json';
      
      $.ajax({
        url: full_url,
        success: function(data) {
          console.log("product id:" + data.product.id);
          console.log("product title:" + data.product.title);
          // ... to do 
          // all your process with product data logic
        }
      });
      
      });
    })(jQuery);

You can try to run the above lines directly from JSFiddle.

Please follow and like us: