Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{% if collection.image %}
{%- assign collection_image = collection.image -%}
{% elsif collection.products.first and collection.products.first.images != empty %}
{%- assign collection_image = collection.products.first.featured_image -%}
{% else %}
{% assign collection_image = blank %}
{% endif %}
<div class="collection-grid-item">
<a href="{% if collection.products == empty %}#!{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
{% if section.settings.title_position == 'above' %}
<h5 class="collection-grid-item__title text-center">
{% if collection.title == blank %}
{{ 'homepage.onboarding.collection_title' | t }}
{% else %}
{{ collection.title }}
{% endif %}
</h5>
{% endif %}
{% unless collection_image == blank %}
<div class="collection-grid-item__image lazyload"
data-bgset="{% include 'bgset', image: collection_image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ collection_image | img_url: '600x' }}')">
</div>
<noscript>
<div class="collection-grid-item__image" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
</noscript>
{% else %}
{% if collection == empty %}
<div class="collection-grid-item__image">
{% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% else %}
<div class="collection-grid-item__image" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
{% endif %}
{% endunless %}
{% if section.settings.title_position == 'below' %}
<h5 class="collection-grid-item__title text-center">
{% if collection.title == blank %}
{{ 'homepage.onboarding.collection_title' | t }}
{% else %}
{{ collection.title }}
{% endif %}
</h5>
{% endif %}
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment