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 %}

Hi Caroline!

Thanks so much for this snippet of code! It works perfectly but my the resolution of my images are becoming super low quality and I'm not sure why it looks like that. Can you please help me?

For security reason, the link in line 36 should be changed to "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

Followed all the guidelines to add this to a Debut theme, unfortunately the title is displayed but the images are not. Is there a way I can go about this?

@mwiru I have the same issue on Debut Theme

@jayrover and @mwiru
Hi, did you solve the issue with Debut Theme?

I have the same issue with the Debut theme, and I followed the instructions to delete image max height, which worked, following this: https://ecommerce.shopify.com/c/ecommerce-design/t/related-products-theme-debut-little-problem-448491

The images show up now which is good. However, the grid height is still restricted and there appears an annoying scroll. Any ideas on how to remove this?

does this script comptable with sectioned theme?
not showing up in brooklyn theme.

@ivandurst I know this is a really old post but exactly what I'm looking for. Can you tell me where to put your piece of code within Caroline's?

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.