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

{% assign number_of_related_products_to_show = 4 %}
{% assign image_size = 'large' %}

{% capture number_of_related_products_to_fetch %}{{ number_of_related_products_to_show | plus: 1 }}{% endcapture %}

{% 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 %}
<ul class="related-products">
{% assign current_product_found = false %}
{% for prod in collection.products limit: number_of_related_products_to_fetch %}
{% if prod.title == product.title %}
   {% assign current_product_found = true %}
{% else %}
   {% unless current_product_found == false and forloop.last %}
   <li class="threecol{% cycle ' first', '', '', ' last' %}">
      <div class="image">
        <a href="{{ prod.url | within: collection }}" title="{{ prod.title | escape }}">
        {{ prod.featured_image | product_img_url: image_size | img_tag }}
        </a>
      </div>
    </li>
   {% endunless %}
{% endif %}
{% endfor %}
</ul>
{% endif %}

<style type="text/css">
.related-products { list-style-type:none; margin-top: 10px; }
.related-products * { text-align:center; padding:0 }
  .related-products li { float:left; margin: 0 10px 0 0; }
  .related-products li.last { margin-right: 0; }
.related-products { overflow:hidden }
.related-products li:last-child { margin-right:0 }
</style>