Skip to content

Instantly share code, notes, and snippets.

@svaustin66
Created December 6, 2020 23:48
Show Gist options
  • Save svaustin66/ad5faeccd9453caf6a1276becb5025f5 to your computer and use it in GitHub Desktop.
Save svaustin66/ad5faeccd9453caf6a1276becb5025f5 to your computer and use it in GitHub Desktop.
This Shopify section will show the product photos in a collection that are smaller than the threshold set.
<section class="section__wrapper section">
<div class="container content">
<h1>{{collection.title | escape }}</h1>
{% if collection.description != blank %}
<div>{{ collection.description }}</div>
{% endif %}
<h2>Current Threshold - <strong>{{ section.settings.size-limit }} pixels</strong></h2>
<p>&nbsp;</p>
{% paginate collection.products by 50 %}
{% for product in collection.products %}
<div>
<h2><a href="https://sbp-electricals.myshopify.com/admin/products/{{ product.id }}" target="_blank">{{ product.title }} | {{ product.vendor }} | {{ product.type }}</a></h2>
</div>
{% for image in product.images %}
{% unless image.width > section.settings.size-limit or image.height > section.settings.size-limit %}
<p>
<a href="{{ product.url }}" target="_blank"><img src="{{ image.src | product_img_url: 'original' }}"></a>{{ image.width }} x {{ image.height }}
</p>
{% endunless %}
{% endfor %}
{% endfor %}
<p>&nbsp;</p>
<div>
{{ paginate | default_pagination: next: 'Next', previous: 'Previous' }}
</div>
{% endpaginate %}
<p>&nbsp;</p>
</div>
</section>
{% style %}
.container { display: block; }
{% endstyle %}
{% schema %}
{
"name":"Product Photos",
"settings":[
{
"type": "range",
"id": "size-limit",
"label": "Show photos smaller than",
"min": 100,
"max": 2000,
"step": 25,
"default": 600
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment