How do I display different image sizes on collection grid

Solved

How do I display different image sizes on collection grid

noraziz
New Member
6 0 0

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

Your help is highly appreciated. Thanks

Accepted Solution (1)

ProtoMan44
Shopify Partner
510 43 80

This is an 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 */
  }
}
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Reply 1 (1)

ProtoMan44
Shopify Partner
510 43 80

This is an 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 */
  }
}
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!