{% if block.settings.image and template == 'index'%}
  {%- assign collection_image = block.settings.image -%}
{% elsif 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">
    {% unless collection_image == blank %}
      <div class="collection-grid-item__overlay box ratio-container lazyload js"
         data-bgset="{% include 'bgset', image: collection_image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-image: url('{{ collection_image | img_url: '300x300' }}')">
      </div>
     <noscript>
       <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
     </noscript>
   {% else %}
     {% if collection == empty %}
        <div class="collection-grid-item__overlay">
         {% capture current %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% else %}
         <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      {% endif %}
   {% endunless %}
    <div class="collection-grid-item__title-wrapper">
      <h4 class="heading_with_nosize collection-grid-item__title">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </h4>
      {% if settings.show_view_all %}
      <div class="text-center coll_all">
        <span class="btn_all btn">{{ settings.btn_text }}</span>
      </div>
      {% endif %}
    </div>
  </a>
  {% include 'banana-stand-product-list-container' %}
</div>

