New section: Image Accordion

A merchant wrote in asking for a slider they'd built by hand: a row of photos where the one you're looking at opens up and the others collapse to slim vertical strips. They'd tried Collection Rail first and said it "doesn't give the same effect" — which was right. Every card in a rail is the same width. The whole point of this one is that they aren't.

Image Accordion is that pattern. Hover, tap or arrow-key through a row of photos and the active panel expands to take most of the width, carrying a title, a line of text and a link. The rest fold down beside it.

Closed panels keep their name

Most versions of this pattern leave the collapsed panels blank, so shoppers have to hover each one to find out what's behind it. Here every closed panel keeps its title, turned on its side — the row reads like books on a shelf, one open and the rest spine-out. You can read the whole thing at a glance without touching anything, which also means it works for someone navigating by keyboard or screen reader.

If you'd rather have the bare photos, sideways titles can be switched off.

It rotates on phones instead of giving up

Slim vertical strips are useless on a phone, so the whole mechanic turns ninety degrees: panels stack, titles lie flat, and tapping one opens it in place. The section stays exactly the same height whichever panel is open, so nothing below it jumps around when someone taps.

Titles stay readable on your photos

Text over photography usually means picking a shading level and hoping. Here the titles carry their own backing, so they stay readable whether your photos are dark interiors or bright packshots on white — we tested against a pure white background, which is the hardest case there is. That leaves the shading slider free to be a look rather than a compromise; you can take it all the way down to nothing and the text still reads.

Setting it up

Add a panel per photo, give each a title, a line of text and a link if you want one. You control the open panel's width, the row height, gap, corner radius and how fast it opens, plus separate heights for phones. Where a closed strip crops your photo is set by the image's focal point in Shopify, so you fix it once on the image itself.

Find it under Gallery in the section catalog.