Unlock Dynamic Product Displays: How to Create a Custom Masonry Grid on Shopify

Hey everyone! As a Shopify expert and someone who spends a lot of time diving into the community forums, I often see store owners grappling with similar challenges. One recurring theme? The desire to break free from the standard, rigid product grids that can sometimes make our stores look a little… well, generic.

Recently, a fantastic discussion popped up that really caught my eye, and it’s something many of you have probably thought about: how to create a more dynamic, visually appealing product grid – specifically, a masonry or tiled layout with mixed aspect ratios. It’s a common frustration, and the community came through with some brilliant insights.

The Quest for a Flexible Product Grid

Our friend MrJayBee kicked off the conversation, describing a common dilemma. He was tirelessly searching the Shopify App Store for an app that could transform his product display from a standard grid into a more organic, tiled layout, much like what you might see on a mood board or an image gallery. Here’s the kind of visual he was aiming for:

The core challenge for MrJayBee wasn't just the tiled look, but also dealing with product images that might be predominantly landscape. He wanted a solution that could intelligently crop these images to portrait or even square within the masonry grid, ideally with a selectable focus point to ensure the right part of the product was highlighted. He’d found solutions for general images, but not specifically for product cards. Sound familiar?

The Community's Code-Based Solution: A Custom Section!

This is where the power of the Shopify community really shines. Instead of pointing to a costly or elusive app, a fellow member, mastroke, offered an elegant, code-based solution: creating a custom section directly in your Shopify theme. This approach gives you incredible control and avoids adding another app dependency to your store.

mastroke's solution leverages CSS columns to achieve that beautiful masonry effect, and it's surprisingly straightforward to implement. It means you can display products from a chosen collection in a dynamic, flowing grid that breaks the mold of uniform rows.

How to Implement Your Own Masonry Product Grid

Ready to try it yourself? Here are the steps, based on mastroke's excellent guidance:

1. Create a New Custom Section File:

   In your Shopify admin, navigate to Online Store > Themes. Find your current theme, click Actions > Edit code. Under the sections directory, click Add a new section. Name it masonry-product-grid (the full file name will be sections/masonry-product-grid.liquid).

2. Paste the Code:

   Copy and paste the following code into your newly created masonry-product-grid.liquid file. This code includes both the Liquid template for displaying products and the CSS to style your masonry grid.

   {% 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] %}
   
   
     {% for product in collection.products %}
   
   
     
       
       
   
         {% if product.featured_image %}
           
         {% endif %}
       
   
       
   
         
   {{ product.title }}
         
   {{ product.price | money }}
       
   
     
   
   
   {% endfor %}
   
   
   
   
   

3. Use it in the Theme Customizer:

   Now, go back to your theme overview (Online Store > Themes) and click Customize. On any page (like your homepage or a custom template), you can now click Add section and you’ll find “Masonry Product Grid” as a new option. Select it, choose the collection you want to display, and adjust the number of columns to your liking!

Understanding What This Code Does

Let’s break down mastroke’s clever solution a bit. The {% schema %} block defines the settings you’ll see in the theme customizer: a dropdown to select a collection and a slider to choose the number of columns for your grid (from 2 to 5, defaulting to 3).

The core of the masonry effect comes from the CSS property column-count applied to the .masonry-grid container. This automatically flows the content into a specified number of columns, and the break-inside: avoid; on .masonry-item prevents individual product cards from being split across columns, maintaining that clean tiled look. The column-gap ensures there’s a nice space between your product columns.

For the images, the .masonry-image-wrapper has a hardcoded aspect-ratio: 3 / 4;. This means every product image will be displayed in a portrait orientation, with object-fit: cover; ensuring the image fills the space without distortion, cropping as necessary. This directly addresses MrJayBee’s need for images to be cropped to portrait from potentially landscape originals, giving a consistent, elegant look.

What’s also great is the built-in responsiveness. The @media queries ensure that on smaller screens (like tablets and phones), the grid adjusts gracefully, reducing to 2 columns on medium screens and a single column on very small screens, making sure your store looks great everywhere.

Beyond the Basics: Mixed Ratios and Focus Points

While mastroke's solution is fantastic for creating a consistent portrait masonry grid without an app, MrJayBee's original request also touched on mixing aspect ratios dynamically and having selectable focus points for cropping. This specific code snippet applies a uniform 3:4 aspect ratio to all images. Achieving truly *mixed* aspect ratios (e.g., some 1:1, some 3:4, some 4:3) based on individual product images, or enabling a customizable focus point for cropping, would typically require more advanced JavaScript or a more complex Liquid implementation, potentially involving meta fields for each product's desired aspect ratio or focal point data.

However, what mastroke provided is an incredibly powerful starting point. It solves the core problem of breaking away from rigid grids and gives you a beautiful, app-free masonry layout with a consistent portrait feel. For many store owners, this is exactly what they need to elevate their product displays and make their store stand out.

So, if you’ve been dreaming of a more dynamic product showcase, give this custom section a try! It’s a testament to the power of the Shopify community and a great example of how a little custom code can go a long way in making your store uniquely yours. Don’t hesitate to experiment and see how it transforms your product pages!