related-products.liquid

{% if product.metafields.custom_fields["related_products"] != blank %}

  <style>
    .referenced-item {
      padding-left: 25px;
      float: left;
    }
    .referenced-item:first-child {
      padding-left: 0;
    }
    .custom-fields-referenced-title {
      text-align: center;
      max-width: 100px;
    }
    .custom-fields-referenced-title a, 
    .custom-fields-referenced-image a {
      border-bottom: 0 !important;
    }
  </style>

  <div class="custom-field-product-reference">
    <h3 class="custom-field--title">Related Products</h3>
    <div class="custom-fields-related-items-wrapper">
      {% assign product_refs = product.metafields.custom_fields["related_products"] | split: "|" %}
      {% for product_handle in product_refs %}
        <div class="referenced-item">
          {% assign product_ref = all_products[product_handle] %}
          <div class="custom-fields-referenced-image">
            <a href="{{product_ref.url}}"><img src="{{product_ref | img_url: '100x100'}}"></a>
          </div>
        </div>
        <div class="custom-fields-referenced-title">
          {{ product_ref.title | link_to: product_ref.url }}
	</div>
      {% endfor %}
    </div><!-- end items-wrapper -->
  </div><!-- end custom-field-product-reference -->
  <div class="clearfix"></div>
{% endif %}