The scatter layout playbook
Step-by-step guide to building lookbook-style scatter layouts that feel editorial, drive clicks, and actually convert.
What is a scatter layout?
A scatter layout places images freely across a page — no rows, no columns, no uniform spacing. It's the opposite of a grid. Where a grid says "here are twelve products," a scatter layout says "here's a feeling."
It's not a grid (equal columns), not masonry (Pinterest-style), not a slider (one image at a time). A scatter layout is freeform — images placed by eye, like photos on a table.
This is the layout style magazines have used for decades. Until recently, building one on Shopify required a developer. Now it doesn't.
Why lookbooks drive more engagement than product grids
Product grids are efficient but not effective for browsing. Lookbooks present products as lifestyle — the shopper sees how pieces work together, how the brand feels as a whole.
A lookbook gives context. A product photo shows what something looks like. A lookbook shows what it feels like to own it.
Anatomy of a great scatter layout
Depth. Use layering to create dimension — one image sits behind another, creating a physical feeling like prints on a desk.
Rotation. Subtle rotation — one or two degrees — breaks the rigidity of a digital layout. It introduces a hand-placed feeling.
Intentional overlap. When images overlap by design — with careful attention to stacking order — it looks sophisticated.
Building your first scatter lookbook with Canvas
Here's the step-by-step process using Canvas:
Start with your hero image. Choose your strongest lifestyle photo. Place it large, slightly off-center. This anchors the composition.
Add supporting images at smaller scales. Drag in three to five more photos. Vary the sizes — don't make them all the same width.
Create intentional overlaps. Drag supporting images so they slightly overlap. Use layer controls for stacking order.
Apply subtle rotation. Select one or two images and rotate them one to three degrees. Just enough to feel natural.
Leave white space. Resist the urge to fill every gap. The empty space is part of the design.
Set your mobile layout. Switch to mobile viewport and rearrange for a stacked, tappable layout.
Making the lookbook shoppable
Each image block has a link destination setting. Link to specific product pages, collections, external URLs, or lightbox. For DTC brands, linking each image to its featured product is the most effective approach.
You can also use Pinterest and ShopMy integrations for social commerce links.
Using hover effects to create interactivity
Ghost overlay fades the image to semi-transparent. Subtle and sophisticated.
Lift raises the image with a soft shadow, creating physical depth.
Shop card overlays a product card on hover — name, price, and CTA.
Reveal swaps or layers new content on hover. Show a different angle or detail shot.
Desktop vs. mobile: designing for both
Over 70% of Shopify traffic comes from mobile. On desktop, embrace the scatter. On mobile, prioritize clarity and tap targets.
Canvas auto-generates a stacked mobile layout when you first switch viewports. Use it as a starting point.
Real results: editorial layouts and your metrics
Lower bounce rates. Editorial layouts create visual curiosity that keeps visitors from leaving.
Longer time on page. Hover effects invite exploration and discovery.
Higher perceived brand value. Premium presentation commands higher average order values.
All The Horses demonstrates this in practice — their scatter layout creates a magazine-quality first impression.
Ready to build your lookbook?
Canvas is the fastest way to create scatter-style lookbook layouts on Shopify. Install for free and start building.