Skip to content

Instantly share code, notes, and snippets.

@keirwhitaker
Created July 12, 2017 14:41
Show Gist options
  • Save keirwhitaker/ac10ba65613b08039ae734ee6566b3a1 to your computer and use it in GitHub Desktop.
Save keirwhitaker/ac10ba65613b08039ae734ee6566b3a1 to your computer and use it in GitHub Desktop.
An example of how to use srcset in Shopify themes
{% for product in collection.products %}
<a href="{{ product.url | within: collection }}">
{% assign image = product.featured_image %}
<img src="{{ image.src | img_url: '480x' }}" alt="{{ image.alt | escape }}"
srcset="
{% if image.width > 640 %}{{ image.src | img_url: '640x' }} 640w{% endif %}
{% if image.width > 720 %},{{ image.src | img_url: '720x' }} 720w{% endif %}
{% if image.width > 900 %},{{ image.src | img_url: '900x' }} 900w{% endif %}
"
sizes="(min-width: 960px) 450px, (min-width: 720px) 50vw, 100vw"
/>
</a>
{% endfor %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment