<!-- wp:image {"align":"center","id":98,"width":768,"height":402,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/get-productjson-data-1024x536.jpg" alt="get shopify product data  json data" class="wp-image-98" width="768" height="402"/><figcaption>get shopify product json data</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today I will show you how to implement this feature with Shopify product API.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Firstly magic thing is we can get any Shopify store's product data by a URL like this:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>https://<strong>{shopify-store-url}/</strong>products<strong>/{product-handle}</strong>.json</em></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p><a href="https://neonbeach.com/products/babe-you-look-so-cool-neon-sign.json">https://neonbeach.com/products/babe-you-look-so-cool-neon-sign.json</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click the above link or copy them to your favorite browser, you can see the product JSON data returned.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>here returned data with all the properties of your product, if you are not familiar with product properties please see Shopify API about <a href="https://shopify.dev/docs/admin-api/rest/reference/products/product">product properties</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then the rest of thing is easy, just wrap this URL and call it in JavaScript. all codes like below:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">(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);</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>You can try to run the above lines directly from <a href="https://jsfiddle.net/yxmaomao/nh92j8ta/17/" target="_blank" rel="noreferrer noopener">JSFiddle</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:html /-->