Cacher is the code snippet organizer for pro developers

/*
 * Pick (for jQuery)
 * version: 1.0 (10/07/2010)
 * @requires any version of jQuery
 *
 * Licensed under the MIT:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2010, 2010 Caroline Hill [ mllegeorgesand@gmail.com ]
 *
 * Usage:
 *
 *  jQuery(document).ready(function() {
 *    jQuery('#gallery li').pick(6);
 *  })
 *
 *  The above will randomly pick 6 elements from the wrapped set, and
 *  remove others from the document.
 *
 *  What is returned is the wrapped set of picked elements.
 *  The removed elements are no longer in that set.
 *
 *  Ex:
 *
 *  var how_many = jQuery('#gallery li').pick(6).size(); // Will return 6.
 *
 */

(function( $ ){
  $.fn.pick = function(how_many) {
    
    var how_many = how_many || 4;
  
    // Picking random numbers without repeating. 
    var index_array = [];
    var original_obj_size = this.size();
    for (var i=0; i<original_obj_size; i++) {
      index_array.push(i);
    }
    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [rev. #1]
    var shuffle = function(v) {
      for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
      return v;
    };
    var new_index_array = shuffle(index_array).slice(0,how_many);
    
    // Ditching unpicked elements and removing those from the returned set.
    return this.each(function(i) {
       if ($.inArray(i,new_index_array) === -1) {
          $(this).remove();
       }
    }).filter(function() {
      if (this.parentNode === null) {
        return false;
      }
      else {
        return true;
      }
    });

  };
})( jQuery );

{% assign number_of_related_products_to_show = 50 %}
{% assign image_size = 'compact' %}
{% assign heading = 'You might also like' %}

{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-sixth medium--one-third small--one-third' %}
{% endunless %}

{% assign number_of_related_products_to_fetch = number_of_related_products_to_show | plus: 1 %}
 
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
  {% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
    {% assign found_a_collection = true %}
    {% assign collection = c %}
  {% endif %}
{% endfor %}
{% endif %}
 
{% if collection and collection.products_count > 1 %}
  <div class="related-products">
  <h3>{{ heading }}</h3>
  <ul class="random-items grid">
  {% assign current_product = product %}
  {% assign current_product_found = false %}
  {% for product in collection.products limit: number_of_related_products_to_fetch %}
    {% if product.handle == current_product.handle %}
       {% assign current_product_found = true %}
    {% else %}
       {% unless current_product_found == false and forloop.last %}
       <li class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

          {% assign on_sale = false %}
          {% if product.compare_at_price > product.price %}
            {% assign on_sale = true %}
          {% endif %}

          {% assign sold_out = true %}
          {% if product.available  %}
            {% assign sold_out = false %}
          {% endif %}

            <a href="{{ product.url | within: collection }}" class="grid__image">
              
              {% if product.tags contains "new" %}
                <span class="new-tag"><img src="{{ 'new-tag.png' | asset_url | image_tag }}" alt="New Artwork"></span>
              {% else %}
              {% endif %}

              <img src="{{ product.featured_image.src | img_url: 'small' }}" alt="{{ product.featured_image.alt | escape }}">
              <div class="view-art"><span>View Art</span><i class="fa fa-shopping-cart"></i><div class="clear"></div></div>
            </a>

        </li>
       {% endunless %}
    {% endif %}
  {% endfor %}
  </ul>
{% endif %}
    
<script>
  jQuery(function() {
    jQuery('.random-items > li').pick(6);
  });
</script>

_