How do I display different image sizes on collection grid

Shopify Discussion

Topic summary

A user seeks to create a custom collection grid layout where the third product spans a 2x2 area (occupying grid positions 3, 4, 7, and 8) while other products maintain standard sizing.

Proposed Solution:

  • Use Liquid code to identify the third product (index 2) and apply a special CSS class
  • Implement CSS Grid with grid-column: span 2 and grid-row: span 2 for the larger item
  • The code sample includes responsive breakpoints for tablet (768px) and mobile (480px) views

Alternative Approach:

  • A third-party Shopify app (Depict) offers a visual drag-and-drop editor for this functionality
  • Benefits include no manual coding and ability to place content within the product grid rather than just the header
  • A free testing plan is available

The discussion remains open with no confirmation of which solution was implemented.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

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?

collection-grid.png
collection-grid.png736×800 5.66 KB

Your help is highly appreciated. Thanks

2

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

{% assign product_index = 0 %}

  {% for product in collection.products %}
    {% assign product_index = forloop.index0 %}

    {% if product_index == 2 %}
      

        
        {% include 'product-grid-item', product: product %}
      

    {% else %}
      
        
        {% include 'product-grid-item', product: product %}
      

    {% endif %}

  {% endfor %}

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 */
  }
}
3

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