Single column layout vs 2 columns on mobile: what our A/B tests show

Should a mobile collection page show 1 product per row or 2? A single column layout gives each product a bigger image. A 2-column grid shows twice as many products per scroll. Both sound reasonable, which is why we test it.

Here is what 3 of our mobile collection page tests showed.

Mobile shoppers preferred a 2-across grid by 9.4%

Our mobile collection pages showed products 2 to a row. We tested 1 product per row on 2 collections, including a long list. Shoppers preferred the 2-across grid: the single column cut conversion 9.4% over 14 days, so we paused the test.

That is a big move, and a big move tells you shoppers care. On a long list, a single column doubles the scrolling needed to see the same products. Shoppers comparing options want to see more of them at once.

A single column with wide product cards came out flat

A different mobile collection page showed products in a multi-product grid. This time we tested a single column with wide product cards, designed for that layout. Conversion rose 0.5% over 16 days, which did not reach our confidence bar.

So a single column is not always worse. When the card was built for the wider space, shoppers bought at about the same rate. Together, the 2 tests suggest the card design matters as much as the column count.

A single column with 1 large product per row lifted conversion 3.8%

On a 3rd store, the mobile collection page showed products in a grid with several per row. We tested a single column layout with 1 large product per row. Conversion rose 3.8% over 16 days. The lift stayed just under our confidence bar, and the store kept the single column as a do no harm change.

So the same idea that lost on 1 store held up on another. I keep a change like this when it serves the brand or business direction, even when the lift alone would not decide it.

Why the same test split 3 ways

3 stores, 3 answers. That is not noise. Each result points to something you can check on your own store before you pick a layout.

• List length. The 9.4% result came from a test that included a long collection. On a long list, a single column means far more scrolling to compare the same products.
• Card design. The flat result used wide cards built for 1 column. A grid card stretched to full width wastes space and pushes the next product further down.
• How shoppers choose. Where shoppers pick on looks and want a closer view, a larger photo can help. Where they compare several options, seeing more at once wins.

How to test your mobile grid

1. Start with your top-traffic collections. I start with the pages that get the most visits, because a small lift there adds up fastest.
2. Test long and short collections separately. A layout that works on 12 products may not work on 120.
3. Design the card for the layout. Don’t just stretch your grid card. Decide what a full-width card should show: a larger photo, the price, ratings and 1 key detail.
4. Track revenue per visitor as well as conversion. A layout can change what shoppers buy, not just whether they buy.
5. Run it for at least 2 full weeks. I want 2 weeks of data before calling a test, so both weekends are covered.
6. Read the signal. If the layout moves the number a lot, shoppers care about it, and the next test should try 2 directions, such as a richer 2-column card and a leaner single column. If it barely moves, stop testing the grid and look elsewhere on the page.

When to use a single column layout on mobile

From our tests and Baymard’s research:

• Use 2 columns for visual products where shoppers compare looks and prices, especially in long lists.
• Consider 1 column for products that need details to choose, like specs or sizes, and design the card for the space.
• Test it on your own store. Our results ranged from a 9.4% preference for 2 columns to a 3.8% lift for 1.

Layout is 1 piece of user experience on mobile. For more collection page tests, see Ecommerce category page design: what our A/B tests show. For the bigger picture, see What is ecommerce user experience, and how does it affect sales?

The right grid depends on your products and your card. Test it before you copy anyone’s layout.

Frequently asked questions

Is a 1 column or 2 column layout better on mobile?

It depends on the store. In our tests, 2 columns won by 9.4% on 1 store, and a single column lifted conversion 3.8% on another.

When should I use a single column layout?

For products that need details to choose, like specs or sizes. Design the card for the wider space.

How many products per row should a mobile collection page show?

2 is the common default and won in 1 of our tests. Test it on your own store, since a single column won on another.

Does a bigger product image increase conversion?

Sometimes. Larger images in a single column lifted conversion 3.8% on 1 store, but cut it 9.4% on another.

What is a single column layout?

A layout that shows 1 item per row, so each item spans the full width of the screen.