Collection List: Display second product image on homepage

If you're using the Collection list section module on your homepage and would like to display the second product image instead of your first product image, you can use this modification.

From:

To:

Second product in collection:

How to:

Replace all the content from this file:

https://myshopify.com/admin/themes/current?key=sections/index-collection-grid.liquid

With all the code from here:

{%- assign collection_image_size = 'x630' -%}
{%- assign grid_item_width = 'large--one-half' -%}

{% case section.settings.grid %}
  {% when 1 %}
    {%- assign grid_item_width = 'large--one-half collection-grid--single' -%}
    {%- assign collection_image_size = 'x630' -%}
  {% when 2 %}
    {%- assign grid_item_width = 'large--one-half' -%}
    {%- assign collection_image_size = 'x630' -%}
  {% when 3 %}
    {%- assign grid_item_width = 'large--one-third' -%}
    {%- assign collection_image_size = 'x450' -%}
{% endcase %}

<div class="homepage-collection-grid {{ section.settings.homepage_collection_grid_color }}" data-section-id="{{ section.id }}" data-section-type="index-collection">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <h4 class="home__subtitle">{{ section.settings.title | escape }}</h4>
    {% endif %}

    <div class="grid grid-uniform">
      {% for block in section.blocks limit: section.blocks.size %}

        {%- assign collection = collections[block.settings.collection] -%}
        {%- assign collection_image_url = '' -%}
        {% if collection.image %}
          {% capture collection_image_url %}{{ collection | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
        {% elsif collection.products[1] %}
          {% capture collection_image_url %}{{ collection.products[1] | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
        {% endif %}

        <div class="grid__item {{ grid_item_width }}" {{ block.shopify_attributes }}>
          <div class="collection-grid-item homepage-image {{ section.settings.color }}">
            <a href="{% if collection.empty? %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
              <div class="collection-grid-item__overlay" style="background-image: url({{ collection_image_url }})">
                {% if collection.empty? %}
                  {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                  {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              </div>
              <div class="collection-grid-item__content">
                {% unless block.settings.title == '' %}<h2 class="title--flex home__title">{{ block.settings.title | escape }}</h2>{% endunless %}
                {% unless block.settings.link_text == '' %}<div class="{{ section.settings.button_style }}"> {{ block.settings.link_text | escape }}</div>{% endunless %}
              </div>
              <div class="image-overlay image-overlay-{{ section.settings.overlay_opacity }}"></div>
            </a>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  {% if section.blocks.size == 0 %}
    <div class="text-center">{{ 'home_page.onboarding.no_content' | t }}</div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Collection list",
    "class": "index-section",
    "max_blocks": 12,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Collection list"
      },
      {
        "type":    "range",
        "id":      "grid",
        "min":     1,
        "max":     3,
        "step":    1,
        "label":   "Collections per row",
        "default": 2
      },
      {
        "type": "select",
        "id": "homepage_collection_grid_color",
        "label": "Background color",
        "default": "homepage--white",
        "options": [
          { "value": "homepage--white", "label": "White"},
          { "value": "homepage--light", "label": "Light"},
          { "value": "homepage--splash", "label": "Accent"},
          { "value": "homepage--dark", "label": "Dark"}
        ]
      },
      {
        "type": "select",
        "id": "color",
        "label": "Text color",
        "default": "homepage--white",
        "options": [
          { "value": "homepage--white", "label": "White"},
          { "value": "homepage--light", "label": "Light"},
          { "value": "homepage--splash", "label": "Accent"},
          { "value": "homepage--dark", "label": "Dark"}
        ]
      },
      {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "default": "btn btn--clear btn--square uppercase",
        "options": [
          { "value": "btn btn--splash uppercase", "label": "Round"},
          { "value": "btn btn--splash btn--square uppercase", "label": "Square"},
          { "value": "btn btn--clear uppercase", "label": "Transparent round"},
          { "value": "btn btn--clear btn--square uppercase", "label": "Transparent square"},
          { "value": "btn btn--outline btn--square uppercase", "label": "Outlined square"}
        ]
      },
      {
        "type":    "range",
        "id":      "overlay_opacity",
        "min":     0,
        "max":     100,
        "step":    5,
        "label":   "Image overlay opacity",
        "info":    "Increase contrast for legible text.",
        "default": 15
      }
    ],
    "blocks": [
      {
        "type": "featured_collection",
        "name": "Collection",
        "settings": [
          {
            "label": "Collection",
            "id": "collection",
            "type": "collection"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Headline",
            "default": "Featured collection"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Buton Text",
            "default": "View products"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Collection list",
        "category": "Collection",
        "settings": {
          "grid": 2
        },
        "blocks": [
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          }
        ]
      }
    ]
  }
{% endschema %}

Save the file.

Still need help? Contact Us Contact Us