Skip to content

Instantly share code, notes, and snippets.

@estrattonbailey
Created July 17, 2015 16:51
Show Gist options
  • Save estrattonbailey/aff0d57aaac2452a4e5a to your computer and use it in GitHub Desktop.
Save estrattonbailey/aff0d57aaac2452a4e5a to your computer and use it in GitHub Desktop.
Shopify Collections Listing Image Fallbacks
{% if collection.image %}
<a href="{{ collection.url }}" class="collection__image" style="background-image: url('{{ collection.image | img_url: 'grande' }}');">
<div class="collection__image__inner"></div>
{% else %}
{% if collection.products_count > 0 %}
{% assign collection_no_images = false %}
{% for product in collection.products %}
{% if product.featured_image %}
{% assign collection_fallback_img = product.featured_image %}
{% break %}
{% else %}
{% assign collection_no_images = true %}
{% endif %}
{% endfor %}
{% if collection_no_images == false %}
<a href="{{ collection.url }}" class="collection__image" style="background-image: url('{{ collection_fallback_img | img_url: 'grande' }}');">
<div class="collection__image__inner"></div>
{% else %}
<a href="{{ collection.url }}" class="collection__image">
<div class="collection__image__inner collection--error">
<div class="no-products">{{ 'collections.no_images' | t }}</div>
</div>
{% endif %}
{% else %}
<a href="{{ collection.url }}" class="collectionBlock__image">
<div class="collection__image__inner collection--error">
<div class="no-products">{{ 'collections.no_products' | t }}</div>
</div>
{% endif %}
{% endif %}
@estrattonbailey
Copy link
Author

This snippet is for the /collections/ page that lists the collections of a particular shop. It checks for a featured collection image to display as a link to the default page for that collection. If one doesn't exist, it finds an image inside the products in that collection. If no products have an image, it provides a fallback message. If no products are within the collection at all, it again gives a fallback message.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment