Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
<!-- /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 %}
@alexmorris

This comment has been minimized.

Copy link

commented May 4, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.