Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
58 lines (42 sloc) 1.4 KB
{% comment %}
Shopify Responsive Images Example
https://github.com/zacwasielewski/shopify-responsive-images
Grid classes and breakpoints were sustainably harvested from
the Timber framework (https://github.com/Shopify/Timber)
{% endcomment %}
<html>
<head>
<title>Shopify Responsive Images Example</title>
{% comment %}
Step 1: Include Picturefill
{% endcomment %}
<script src="{{ 'picturefill.js' | asset_url | script_tag }}"></script>
</head>
<body>
<header>
<h1>{{ collection.title }}</h1>
</header>
<div class="grid-uniform">
{% for product in collection.products %}
<div class="grid__item small--one-half medium--one-third large--one-quarter">
<a href="{{ product.url }}">
{% comment %}
Step 3: Include responsive-product-image snippet
{% endcomment %}
{% include 'responsive-product-image',
image: product.featured_image,
sizes: '(max-width: 640px) 50vw, (min-width: 641px) and (max-width: 960px) 33vw, 25vw' %}
</a>
<div><a href="{{ product.url }}">{{ product.title }}</a></div>
<div>{{ product.price | money }}</div>
</div>
{% else %}
<p>There are no products in this collection.</p>
{% endfor %}
</div>
{% comment %}
Step 2: Include responsive-images.js
{% endcomment %}
{{ 'responsive-images.js' | asset_url | script_tag }}
</body>
</html>