How do I display different image sizes on collection grid

[noraziz]

Hi,

Based on the design below, the 3rd product will have to fill the grid 3, 4, 7 and 8 inside the collection page. Is there a way to make the changes on liquid file to achieve this?

Your help is highly appreciated. Thanks

[ProtoMan44 · Accepted solution]

@noraziz thanks for posting there, this is the code sample for you custom collection section

{% assign product_index = 0 %}

<div class="collection-grid">
  {% for product in collection.products %}
    {% assign product_index = forloop.index0 %}

    {% if product_index == 2 %}
      <div class="grid-item grid-item--large">
        <!-- Your product markup for the 3rd product -->
        {% include 'product-grid-item', product: product %}
      </div>
    {% else %}
      <div class="grid-item">
        <!-- Your standard product markup -->
        {% include 'product-grid-item', product: product %}
      </div>
    {% endif %}

  {% endfor %}
</div>

style:

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Adjust the number of columns as needed */
  gap: 10px; /* Adjust the gap between grid items as needed */
}

.grid-item {
  /* Default grid item styles */
}

.grid-item--large {
  grid-column: span 2; /* Adjust to span the required number of columns */
  grid-row: span 2; /* Adjust to span the required number of rows */
}

/* Adjustments for different screen sizes */
@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust for smaller screens */
  }

  .grid-item--large {
    grid-column: span 2; /* Adjust for smaller screens if needed */
    grid-row: span 1; /* Adjust for smaller screens if needed */
  }
}

@media (max-width: 480px) {
  .collection-grid {
    grid-template-columns: 1fr; /* Adjust for mobile screens */
  }

  .grid-item--large {
    grid-column: span 1; /* Adjust for mobile screens if needed */
    grid-row: span 1; /* Adjust for mobile screens if needed */
  }
}

[alexhamben]

Hello!

Alex from Depict here - we've actually built a Shopify-native app that does exactly what you illustrated, with mobile adaption and a visual drag-and-drop editor.

The benefit of this over the other proposed solutions is that you can add the content inside the product grid, instead of in the collection header, and that you won't need to write any liquid code yourself.

Posting in case others might have similar issues in the future.

You can find the app here - we have a free plan for testing it out: https://apps.shopify.com/depict