Goal: Create a product grid with mixed-size images (a “masonry layout”) rather than uniform rows/columns. Concern: Developer says this requires uploading different-sized images; user seeks a more flexible approach.
Key points:
Masonry layout = a staggered grid where items vary in size/height. Some Shopify themes include this as a section/setting (e.g., featured-collection/image-grid); others need customization.
Themes differ widely; the developer may be correct for the current theme if aiming for a maintainable solution. For precise control of the pattern, images often still need hand-tailoring.
Possible implementation: use a JS library like Masonry (MIT-licensed). Related add-ons (Isotope, Packery) require commercial licenses, but likely unnecessary for this use.
Context updates:
Store isn’t live; user can’t share a URL yet. Active themes: Dawn and a custom “Fashion” theme. A reference screenshot was attached to show the desired look.
Status and next steps:
Unresolved; more info needed (store URL, exact theme, links) to give concrete steps.
Actions: check if the chosen theme supports masonry; consult theme docs; otherwise implement via a library or custom code; decide whether to curate image sizes for layout control.
I’m trying to replicate a product grid I’ve seen before where instead of having even rows and columns of images that are all the same size, some are larger and some are smaller creating a more randomised sequence. Attaching the reference below.
I have a developer currently building my store, but he seems to think the only way to achieve this is to upload images of different sizes, which seems strange and annoying should I want to shuffle the order of products.
You haven’t provide enough info for a more concrete answer so you will only get generalities.
This is called a masonry layout. Some themes have this as a section i.e. featured-collections, image-grid or some such name, sometimes as a setting with in other sections or require some sort of convention in how products are setup in which case the theme should document that.
If you need this customization then contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence. Contact info in signature.
Themes vary wildly so your developers probably not wrong in the context of your current theme if you want to do this sanely as is.
It’s also for themes that do have this design or are customized to have it, to have any level of control often requires hand tailoring the images. For example if you wanted the overal masonry layout to represent a room where each product-image is in it’s actual position that product would be in the room.
There are libraries masonry to facilitate this such as https://masonry.desandro.com/ (MIT license) Note it’s “addons” isotope and packery need commercial licenses but it’s very likely they are not need for what your doing.
Thanks for your reply - the shop isn’t live so I cannot give any further information as it’s all with the developer. I do know that the two themes in my store currently are Dawn (which I assume is the standard basic theme) and one called ‘Fashion’ which the developer has added so I imagine this is what they’re adjusting.
I will pass on the links you referenced, thank you!
