Eleven storefront layouts, and which one suits what you actually sell

Somebody screenshots a storefront they admire, copies the layout, and cannot work out why their own version looks thin. Usually the answer is arithmetic rather than taste. The page they copied held nine products with matching square covers, and they have two products and a link to a newsletter. The layout was never the thing they liked — the catalogue behind it was.

Layout is a container, and you have to know what is going in it

A layout does one job: it decides how much room each item gets and in what order the eye meets them. That is why the same layout can look confident on one page and empty on another. Two products in a two-column grid is a grid with a hole in it. Twelve products in a full-width list is a scroll nobody finishes.

The genuinely hard part is that your catalogue is not static. You launch a second product, then a membership, then a lead magnet, and the shape that suited three items stops suiting six. Most people never revisit the choice, so the page slowly drifts out of fit while they are busy looking at the products themselves.

The second hard part is images. Several of the layouts are essentially display cases, and a display case is only as good as the objects in it. If your covers were made at different times in different tools, a big image grid will show you exactly that. See what the designer includes before you decide — it is worth knowing what you can change later.

How a layout choice usually goes, and how it can go

The typical link page gives you one shape — a stack of identical buttons — and everyone's page looks the same because it is the same. Choosing gives you more control, and control is only useful if you point it at the right question.

The eleven, and the catalogue each one is built for

Few items, or words doing the selling

• Stack — a centred profile with full-width rows. The safe default, and fine for anything from one item to about six.
• Editorial — a text-first list with thin rules. Best when the product name and one line of description are the persuasion: consultants, writers, coaches.
• Compact — a left-aligned header and a slim list. Good when you have a handful of products plus several link cards and you want the whole page visible quickly.
• Spotlight — a big featured card and a grid underneath. The right shape for a value ladder, where one offer should be met first.

A real catalogue with real photography

• Grid — two-column cover cards. The workhorse for six or more items with consistent covers.
• Showcase — full-bleed cover posters. Made for a small number of beautiful images: prints, presets, physical goods you have actually photographed.
• Masonry — Pinterest-style columns that tolerate covers of different heights, which is useful when your images were not made to one spec.
• Polaroid — tilted snapshots on a wall. Charming for craft, film and personal work, and unforgiving if half the images are screenshots.

Mixed shelves and larger catalogues

• Bento — mixed-size tiles, so a membership, a download and a booking can each get a different weight on the same page.
• Magazine — full-width editorial rows, for when each item needs a sentence of context rather than just a price.
• Carousel — swipeable horizontal shelves. Sensible past a dozen items, on the understanding that anything off the first screen gets seen less.

A twenty-minute fitting session

Do this with the storefront designer open on a laptop and your own page open on your phone next to it. You are fitting a shape to a catalogue, so the catalogue has to be real before you start — if you are bringing products across from somewhere else, get them in first, which is what the migration guide is for. Read the list below as a shortlist generator rather than a ruling.

A worked example: three items that do not match

Take a photographer selling a preset pack, a set of prints, and one workshop seat bookable through a slot. Showcase seems obvious — big images, photographer, done. In practice the preset pack cover is a screenshot of an interface, and next to a full-bleed print it looks like a mistake. The page stops feeling like a portfolio and starts feeling like an inconsistent one.

Spotlight solves it without new photography. The workshop gets the featured card, because it is the highest-value thing and the hardest to explain in a thumbnail; the prints and the preset pack sit in the grid below at a size where the screenshot cover no longer competes. Nothing about the products changed. If the workshop later sells out and comes back seasonally, the same shape still works, which is the real test of a layout: it survives your catalogue changing.

The mistake most people make

The mistake is choosing the layout that flatters an imaginary catalogue. People pick the big grid because they intend to have nine products by autumn, and then run a two-item page in a nine-item shape for four months. Fit the layout to what is live today and change it when that changes; it takes one click and costs nothing. The related mistake is deciding the layout is the reason nobody is buying, when the actual problem is that no product name on the page says what the buyer gets. Layout controls attention. Words still have to close it.

Pick the shape that fits the shelf you have. Revisit it when you launch something that changes the shelf, and otherwise leave it alone. A storefront that is slightly plainer than you would like but clearly organised will out-perform a beautiful arrangement of items nobody can tell apart — and if you are still deciding what belongs on the page at all, the FAQ covers the ten product types you can put there.