<!-- wp:paragraph -->
<p>One of our customers asks for customizing the Shopify Collection page for them, their requirement is very simple, just wants to keep one or two specified products always showing on the top whenever user change sort by conditions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Basically there are two ways to do this:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>First one:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>append a special parameter to the collection page URL.</li><li>check to see if the specified URL parameter existing or not.</li><li>if existing then <a href="https://www.mojoin.com/get-shopify-product-data-json-format/">get the specified product data from Shopify Store</a>.</li><li>insert the specified product into the collection product list at the head.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Second one:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>in the Shopify Collection template file loop all the <a href="https://shopify.dev/docs/storefront-api/reference/products/collection#connections-2020-10">collecion.products </a>to get the specified top two products.</li><li>remove original top two products from the collection product list.</li><li>insert these two products at the top of the collection product list.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>in this article we will focus on first method and how to get URL parameters in the Shopify frontend.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In order to implement this feature, we need to use JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/URL">URL</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams">URLSearchParams</a> objects. with URL() object to get a URL object and with </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 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 > 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;

      


});
})(jQuery);</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">
</pre>
<!-- /wp:preformatted -->