<!-- wp:paragraph -->
<p>When you try to customize a Shopify theme, you may need to get specified product data from frontend with JavaScript.</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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>parameters with : </p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<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="">&lt;script&gt;
(function($){
	$(document).ready(function(e){
      var url = new URL(location.href);
      var params = new URLSearchParams(url.search);
      var yx = params.get('sort_by');
      var dest1 = null,dest2 = null;
      if ( yx != null ) {  
          //alert(yx);
          var tops = yx.split(',');
         if ( tops.length &gt; 1 ) {
           dest1 = tops[0];
           dest2 = tops[1];
         } else {
           dest1 = tops[0];
         }
      }
      
      var edest1 = edest2 = null;
      $('ul.grid--view-items li').each(function(e){
        var link_url = $(this).find('a.grid-view-item__link').attr('href');
        if ( dest1 != null &amp;&amp; link_url.indexOf(dest1) != -1 ) {
          edest1 = $(this);
        } else if ( dest2 != null &amp;&amp; link_url.indexOf(dest2) != -1 ) {
          edest2 = $(this);
        }
      });  
      
      if ( edest2 != null ) {
        $('ul.grid--view-items').prepend(edest2);
      }
      if ( edest1 != null ) {
        $('ul.grid--view-items').prepend(edest1);
      }
      
      edest2 = null;
      
      if ( dest2 != null &amp;&amp; edest2 == null  ) {
        var durl = window.location.href.toString();
        var durl_array = durl.split('?');
        var rurl = durl_array[0] + '/products/' + dest2 + '.json';
        alert(rurl);
        $.ajax(
          {
            url:rurl,
            success: function(e){
              alert(JSON.stringify(e));
    
          //$('ul.grid--view-items').prepend(onep);
            }
          }
        );
      }
      
      
});
})(jQuery);
  
  &lt;/script&gt;</pre>
<!-- /wp:html -->