Modification of the default Timber product grid item snippet so that it can show variants. Relates to this blog post: http://freakdesign.com.au/blogs/news/87395207-show-variants-as-separate-products-on-collection-page

product-grid-item.liquid

<!-- /snippets/product-grid-item.liquid :: mod by Jason at freakdesign.com.au -->
{% comment %}
<!--
  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.

  If however the product has variants, we'll show the variants instead.
-->
{% endcomment %}

{% comment %}
  Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% assign on_sale = false %}
{% assign sold_out = true %}

{% comment %}
<!--
  Check if the product has variants or not.
-->
{% endcomment %}
{% if product.variants.size > 1 %}

    {% if variant.compare_at_price > variant.price %}
      {% assign on_sale = true %}
    {% endif %}

    {% if variant.available %}
      {% assign sold_out = false %}
    {% endif %}

    <div class="grid__item {{ grid_item_width }} grid__item__isvariant">
      <a href="{{ variant.url | within: collection }}" class="grid__image">
        <img src="{{ variant.image.src | img_url: 'large' }}" alt="{{ variant.image.alt | escape }}">
      </a>
      <p class="h6">
        <a href="{{ variant.url | within: collection }}">{{ variant.title }}</a>
      </p>
      <p>
        {% if on_sale %}
            <strong>{{ 'products.variant.on_sale' | t }}</strong>
            {{ variant.price | money }}
        {% else %}
            {{ variant.price | money }}
        {% endif %}
        {% if sold_out %}
          <br><strong>{{ 'products.variant.sold_out' | t }}</strong>
        {% endif %}
        {% if on_sale %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <br><s>{{ variant.compare_at_price | money }}</s>
        {% endif %}
      </p>
    </div>

{% else %}
    {% comment %}
    <!--
      Check if the product is on sale and set a variable to be used below.
    -->
    {% endcomment %}
    {% if product.compare_at_price > product.price %}
      {% assign on_sale = true %}
    {% endif %}

    {% comment %}
    <!--
      Check if the product is sold out and set a variable to be used below.
    -->
    {% endcomment %}
    {% if product.available %}
      {% assign sold_out = false %}
    {% endif %}

    <div class="grid__item {{ grid_item_width }}">

      {% comment %}
      <!--
        Link to your product with the 'within: collection' filter for the link to be aware of the collection.
        This allows you to create collection-based navigation on the product page.

        Results of using 'within: collection':
        - Instead of a URL with /products/product-handle
          you would get /collections/collection-handle/products/product-handle

        For more info on navigation within a collection
          - http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection
      -->
      {% endcomment %}
      <a href="{{ product.url | within: collection }}" class="grid__image">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </a>

      <p class="h6">
        <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
      </p>
      <p>
        {% comment %}
        <!--
          You can show a leading 'from' or 'up to' by checking 'product.price_varies'
          if your variants have different prices.
        -->
        {% endcomment %}
        {% if on_sale %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            <strong>{{ 'products.product.on_sale' | t }}</strong>
            {{ product.price | money }}
          {% endif %}
        {% else %}
          {% if product.price_varies %}
            {% assign price = product.price | money %}
            {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price | money }}
          {% endif %}
        {% endif %}
        {% if sold_out %}
          <br><strong>{{ 'products.product.sold_out' | t }}</strong>
        {% endif %}
        {% if on_sale %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <br><s>{{ product.compare_at_price | money }}</s>
        {% endif %}
      </p>

    </div>
{% endif %}

Hey Jason! this is exactly what i'm trying to achieve so thanks for the snippet! However i'm getting this error when I run it.

"Liquid error: bad argument (expected URI object or URI string)"

Simplified liquid example below... any thoughts/ideas?

`{% if product.variants.size > 1 %}

<div class="product-cell">

  <a href="{{ variant.url | within: collection }}"><img src="{{ variant.image.src | img_url: 'large' }}" alt="{{ variant.title }}"></a>

  <a href="{{ variant.url | within: collection }}"><h5>{{ variant.title }} horse</h5></a>

</div>

{% else %}

<div class="product-cell">

   <a href="{{ product.url | within: collection }}"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"></a>

   <a href="{{ product.url | within: collection }}"><h5>{{ product.title }}</h5></a>

</div>

{% endif %}`