gistfile1.html

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

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

{% assign number_of_related_products_to_fetch = number_of_related_products_to_show | plus: 1 %}


{% assign collection = collections['related-production-collection-name-you-want-to-use'] %}

{% if collection and collection.products_count > 1 %}
  <h3>{{ heading }}</h3>
  <ul class="related-products">
  {% assign current_product = product %}
  {% assign current_product_found = false %}
  {% for product in collection.products limit: number_of_related_products_to_fetch %}
    {% if product.handle == current_product.handle %}
       {% assign current_product_found = true %}
    {% else %}
       {% unless current_product_found == false and forloop.last %}
       <li>
          <div class="image">
            <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
            {{ product.featured_image | product_img_url: image_size | img_tag }}
            </a>
          </div>
          <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
          <span class="money">{{ product.price | money }}</span>
        </li>
       {% endunless %}
    {% endif %}
  {% endfor %}
  </ul>
{% endif %}

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