Related Products by Tags — to add to product.liquid

gistfile1.html

<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: http://wiki.shopify.com/Related_Products -->

{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

{% if product.tags.size > 0 %}

<h3>{{ heading }}</h3>
<ul class="related-products"></ul>

<style type="text/css">
.related-products { list-style-type:none }
{% case image_size %}
{% when 'small' %}
.related-products * { font-size:12px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.3 }
.related-products div.image { height:100px }
.related-products li { float:left; width:120px; height:160px; margin-right:20px }
{% when 'compact' %}
.related-products * { font-size:13px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:5px 0 0 0; line-height:1.5 }
.related-products div.image { height:160px }
.related-products li { float:left; width:180px; height:220px; margin-right:25px }
{% when 'medium' %}
.related-products * { font-size:14px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.8 }
.related-products div.image { height:240px }
.related-products li { float:left; width:260px; height:300px; margin-right:25px }
{% endcase %}
.related-products { overflow:hidden }
.related-products span.money { font-size:0.8em }
.related-products li:last-child { margin-right:0 }
</style>

<script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>')</script>
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

<script type="text/javascript" charset="utf-8">
//<![CDATA[
  var recommendations = [];
  {% for tag in product.tags %}
  recommendations.push('{{ tag | handle }}');
  {% endfor %}
  if (recommendations.length) {
    var list = jQuery('ul.related-products');
    for (var i=0; i<recommendations.length; i++) {
      jQuery.getJSON(recommendations[i] + '.js', function(product) {
        list.append('<li><div class="image"><a href="' + product.url +'"><img src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" /></a></div><h4><a href="' + product.url + '">' + product.title + '</a></h4><span class="money">' + Shopify.formatMoney(product.price, "{{ shop.money_format }}") + '</span></li>');
      });
    }
  }
//]]>
</script>

{% endif %}

For me it is not rendering in safari, does anyone have this issue?

@carolineschnapp Thanks, I have tried this and it worked perfeclty for me

@carolineschnapp This is clearly a VERY useful piece of code. Unfortunately, I can't figure out how to make it work because the Product.Liquid file no longer exists in the Online Store 2.0 themes (see https://community.shopify.com/c/technical-q-a/product-liquid-disappeared-in-new-dawn-theme/td-p/1307879). Any idea on how to tweak this to work in this new architecture?

{% if product.tags contains prod.title %} is not working. If I pass the string with quote like- {% if product.tags contains '467455' %} ,
its working but pass the variable, not working. Please guide.