updated to prioritize shows and art medium

Vanilla product recommendations

<div class="cross-content"></div>

<script>
  function fisherYates ( myArray ) {
  	var i = myArray.length,j,temp;
  	if (i === 0) return false;
  	while (--i) {
  		j = Math.floor(Math.random()*(i+1));
  		temp = myArray[i];
  		myArray[i] = myArray[j];
  		myArray[j] = temp;
  	}
  }

  {% assign display_count = 4 %}
  {% assign count = 0 %}
  {% assign current = product.handle %}
  {% for tag in product tags %}
    {% assign t = tag | handle %}
    {% if t contains '-20' %}{% assign tag_show = t | split:'-20' | first %}{% endif %}
    {% if t contains 'medium-' %}{% assign tag_medium = t | remove:'medium-' %}{% endif %}
  {% endfor %}

  {% if collection %}
    {% assign coll = collection.handle %}
  {% else %}
    {% for collection in product.collections %}
      {% if collection.handle contains tag_show %}{% assign coll = collection.handle %}{% endif %}
    {% endfor %}
  {% endif %}
  {% if coll == blank %}{% assign coll == 'all' %}{% endif %}
  
  var products = [];
  {% paginate collections[coll].products by collections[coll].all_products_count %}
    {% for product in collections[coll].products %}
      {% capture product_tags %}{% for tag in product.tags %}{{ tag | handle }} {% endfor %}{% endcapture %}
      {% if product.handle != current and product_tags contains tag_medium %}
        products[{{ count }}] = '<a href="{{ product.url | within:collection }}">{{ product.images[0] | img_url:"250x250", scale:2, crop:'center' | img_tag:product.images[0].alt }}<p>{{ product.title | escape }}</p><p>{{ product.price | money | remove:" " }}</p></a>';
        {% assign count = count | plus:1 %}
      {% endif %}
    {% endfor %}
    {% if count < display_count %}
      {% for product in collections[coll].products %}
        {% if product.handle != current %}
          products[{{ count }}] = '<a href="{{ product.url | within:collection }}">{{ product.images[0] | img_url:"250x250", scale:2, crop:'center' | img_tag:product.images[0].alt }}<p>{{ product.title | escape }}</p><p>{{ product.price | money | remove:" " }}</p></a>';
          {% assign count = count | plus:1 %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endpaginate %}
  {% if count < display_count %}
    {% paginate collections[all].products by collections[all].all_products_count %}
      {% for product in collections[all].products %}
        {% capture product_tags %}{% for tag in product.tags %}{{ tag | handle }} {% endfor %}{% endcapture %}
        {% if product.handle != current and product_tags contains tag_medium %}
          products[{{ count }}] = '<a href="{{ product.url | within:collection }}">{{ product.images[0] | img_url:"250x250", scale:2, crop:'center' | img_tag:product.images[0].alt }}<p>{{ product.title | escape }}</p><p>{{ product.price | money | remove:" " }}</p></a>';
          {% assign count = count | plus:1 %}
        {% endif %}
      {% endfor %}
    {% endpaginate %}
  {% endif %}
  {% if count < display_count %}
    {% paginate collections[all].products by collections[all].all_products_count %}
      {% for product in collections[all].products %}
        {% if product.handle != current %}
          products[{{ count }}] = '<a href="{{ product.url | within:collection }}">{{ product.images[0] | img_url:"250x250", scale:2, crop:'center' | img_tag:product.images[0].alt }}<p>{{ product.title | escape }}</p><p>{{ product.price | money | remove:" " }}</p></a>';
          {% assign count = count | plus:1 %}
        {% endif %}
      {% endfor %}
    {% endpaginate %}
  {% endif %}

  fisherYates(products);
  var products_content = "";
  for(var i=0; i<4; i++) {
  	products_content += products[i];
  }
  $(".cross-content").html(products_content);
</script>