Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 92 lines (77 sloc) 3.04 KB
<!-- /snippets/product-grid-item.liquid -->
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = 'large--one-quarter medium--one-half'
{% 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 %}
{% comment %}
Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% 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 %}
{% assign sold_out = true %}
{% 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>
You can’t perform that action at this time.