Should a Shopify lookbook use a grid, masonry, or carousel?

Six photographs arrive from a campaign shoot: two portraits, three wide scenes, and one tall detail. Forcing them into identical boxes makes the page orderly, but it can remove the details the campaign was made to show.

Grid, masonry, and carousel layouts solve different reading problems. Choose according to the images and the shopper's task, not because one layout feels more fashionable in the theme editor.

Use a grid when comparison matters

A grid creates a stable rhythm. It suits photographs with similar aspect ratios and lets shoppers compare several looks at once. It is often the best default for outfits, color stories, and repeated room views where no single image should dominate the sequence.

The risk is cropping or excess empty space. If the layout crops images, check that every tagged product remains visible. If it preserves full proportions, mixed image shapes can produce uneven rows. A grid works best when the photo set was selected with the grid in mind.

Use masonry for mixed proportions

Masonry allows portrait and landscape images to keep more of their natural shape while filling the page in staggered rows. It can make an editorial set feel less mechanical and avoids demanding a single crop from the whole shoot.

The tradeoff is reading order. Visual columns do not always communicate which photograph comes next, especially when heights vary sharply. Do not use a masonry layout for a step-by-step story that must be read in strict sequence. Also check that a very tall image does not push the next useful item far below the fold on a narrow screen.

Use a carousel when space is the constraint

A carousel gives each image more room without making the page extremely long. It can fit a compact homepage section or a product-page story where the first photograph provides enough context to invite another swipe.

Hidden slides are genuinely less visible. Put the strongest and most useful image first, provide obvious controls, and make touch swiping feel natural. Avoid placing essential policy or setup information only in the final slide; many shoppers will never reach it.

Let mobile use a simpler arrangement

Two columns can work for simple, near-square images with few markers. One column is safer for tall scenes, detailed interiors, and photographs with several tagged products. The image can use the available width, and touch targets are less likely to collide.

Limit the displayed height of very tall images without cropping away the product. Check text and controls around the gallery as well: a lookbook that fits visually can still create awkward scrolling if its title, spacing, and carousel controls take more room than the images.

Test the content, not an empty layout

Preview with the final number of photographs, their real proportions, and the densest marker placement. Test one small phone, one larger phone, and a desktop width. Move through the images by keyboard, pointer, and touch where those inputs apply.

Then make the smallest change that solves the problem. Reduce columns before replacing the entire layout; adjust spacing before shrinking the photographs; remove a repeated image before hiding it behind another swipe. The right layout makes the photo story feel inevitable, not engineered around a widget.