App to produce a tiled product grid with mixed aspect ratios

Shopify Apps
1

Hi,

I’ve been unsuccessfully searching through the app store for an app which lets you move away from the standard rigid grid layout to a more tiled/masonry layout like the image below.

Crucially I want to keep all product images in landscape and have the app crop the image to portrait (or even square if it’s possible to mix landscape, portrait and square images in a responsive grid), ideally with a selectable focus point that will crop non-centered images correctly.

This might be asking a lot but my searches have drawn a blank. I’ve found something like this for images but not for product cards.

Grateful for any pointers!

image
image1485×1014 1.93 KB

2

Create a new custom section

here are the steps :slight_smile:

  1. Create a new file: sections/masonry-product-grid.liquid
  2. paste this code
{% schema %}
{
“name”: “Masonry Product Grid”,
“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “range”,
“id”: “columns”,
“min”: 2,
“max”: 5,
“step”: 1,
“default”: 3,
“label”: “Columns”
}
],
“presets”: [
{
“name”: “Masonry Product Grid”
}
]
}
{% endschema %}

{% assign collection = collections[section.settings.collection] %}

<div class="masonry-grid" style="column-count: {{ section.settings.columns }};">
  {% for product in collection.products %}

<div class="masonry-item">
  <a href="{{ product.url }}" class="masonry-card">
    
    <div class="masonry-image-wrapper">
      {% if product.featured_image %}
        <img
          src="{{ product.featured_image | image_url: width: 600 }}"
          alt="{{ product.title }}"
          loading="lazy"
          class="masonry-image"
        >
      {% endif %}
    </div>

    <div class="masonry-content">
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </div>

  </a>
</div>

{% endfor %}

</div>

<style>
.masonry-grid {
  column-gap: 16px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
/* Card */
.masonry-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Image wrapper */
.masonry-image-wrapper {
  width: 100%;
  aspect-ratio: 3 / 4; /* Portrait feel */
  overflow: hidden;
  border-radius: 12px;
}
/* Image */
.masonry-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Content */
.masonry-content {
  margin-top: 8px;
}
.masonry-content h3 {
  font-size: 14px;
  margin: 0;
}
.masonry-content p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #555;
}
/* Responsive */
@media screen and (max-width: 990px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media screen and (max-width: 600px) {
  .masonry-grid {
    column-count: 1;
  }
}
</style>

  1. Now go to theme customizer and use it accordingly as per need

    Let me know if it works for you or else will give you other ways

3

Hey! Thanks very much for considering this mastroke. I will give it a try when I’m back on my laptop!

4

Hello @MrJayBee

You can use the Essential Grid Gallery app for this. It allows you to create Pinterest-style masonry/tiled product grids with mixed image sizes and responsive layouts.

The app gives you flexible grid options, so you can display products in a more dynamic masonry layout instead of the standard Shopify grid. You can also customize how images are displayed and cropped to better fit your design requirements.