Cleaner skincare catalog grid: +20% conversion, +40% revenue/visitor

WinnerSeveral changes tested togetherCollection page · 2017-11

A skincare catalog page with 3 products per row, bigger images, aligned buttons and best sellers first lifted conversion rate from 11.54% to 13.87% (+20%).

Revenue per visitor rose 40%, from $16.44 to $22.98. Conversion Fanatics ran this test for a skincare products company and shared it on its blog in 2017; several layout changes shipped together.

+20% conversion, +40% revenue/visitor
  • Conversion rate: 11.54% to 13.87%, a 20% lift.
  • Revenue per visitor: $16.44 to $22.98, a 40% lift.
  • Visits to checkout rose 19.22% and visits to cart rose 8%.
  • All four changes shipped together, so the lift can't be credited to the 3-per-row layout alone.

The change

Control (A)
header
breadcrumb
title
filters
4 per row, uneven pricesREPLACED
Small image, misaligned CTAREPLACED
Variant (B)
header
breadcrumb
title
Sorted by most popularNEW
3 per rowNEW
Bigger image, aligned CTANEW

4 cramped products per row became 3 larger, aligned cards sorted by popularity

Simplified mockup drawn by LiftArchive from the shared screenshots.

Control

A catalog page with 4 products in each row. Prices and calls to action did not line up from one product to the next.

Variant

3 products in each row, with larger product images and prices and buttons aligned. Products were sorted by most popular.

Why it likely won

Our reading of the result, not the practitioner's claim.

  • Bigger images give skincare shoppers a clearer look at each product before they click.
  • Aligned prices and buttons make the grid easier to scan and compare.
  • Sorting by most popular puts proven sellers in front of shoppers first, which may explain part of the revenue gain.
  • Fewer products per row can feel less crowded, though that is our reading rather than something the test isolated.

Caveats: Bundled test: column count, image size, alignment and sort order all changed at once. Sample size, duration and confidence level were not shared, and the test is from 2017.

Who ran it

Conversion Fanatics ran this test for a skincare products company and published the results (Conversion Fanatics blog case study). The numbers are theirs; the summary and commentary on this page are ours.

Read the original case study on Conversion Fanatics →

How to run this test on your store

Hypothesis
If we show 3 products per row with larger images, aligned prices and buttons, and best sellers first, then more visitors will buy because the catalog is easier to scan and compare.
Primary metric
Revenue per visitor
Guardrails
  • Conversion rate
  • Product page click-through from the catalog
  • Scroll depth on the catalog page
Who should test it
Stores whose grids feel crowded or uneven, especially where product looks matter. To learn which change matters, test sort order and grid density separately; stores where shoppers need to compare many items at once may lose out from fewer per row.

Questions

How many products per row should a collection page show?

There is no single answer. Here, moving from 4 to 3 per row along with bigger images won, but it was bundled with other changes, so test it on your own catalog.

Does sorting by best sellers help conversion?

It often helps because shoppers see proven products first.

In this test it was one of four changes, so its exact share of the lift is unknown.

Why do aligned buttons and prices matter?

When prices and buttons sit at the same height, the eye can scan across a row and compare quickly. Uneven grids make shoppers work harder.

Similar tests