Progressive Disclosure: Stop Showing Every Product Option at Once

There's a product page pattern we keep meeting in audits: eight colour swatches, six size chips, a pack-size row, and all of it stacked above the price. Forty-odd tappable choices before the buy button enters the frame.

"The merchant reads that page as range. A first-time buyer reads it as homework, and closing a tab costs nothing."

The fix has had a name for thirty years. Progressive disclosure, described by Jakob Nielsen back in 1995, means showing people only the primary options up front and deferring the rest until they're relevant. It came out of desktop software design, and it maps onto a variant matrix almost perfectly.

The platform now lets you sprawl

This matters more than it did a year ago. In October 2025 Shopify lifted the variant limit per product from 100 to 2,048, on all plans, with the cap of three options per product unchanged. It's a genuinely useful change, because ranges that used to be split awkwardly across several listings can now live on one page.

But your theme will happily render everything at once, and a page that used to show 24 combinations can now show hundreds; three options at a dozen values each clears a thousand combinations without breaching the cap. The bigger the matrix the platform allows, the more the template's real job becomes staging decisions rather than displaying them.

Stage the decisions, don't stack them

Start with order. Your theme renders options in the order they're listed on the product in admin, so lead with the decision a buyer already knows the answer to. Someone shopping for shoes knows their size before they arrive; they may need to think about colour. That first easy decision gets them moving.

Then match the control to the option. Swatches earn their space where the look is the decision. A dozen values of anything else belong in a dropdown, not a wall of chips. And deal honestly with combinations that can't be bought: greying out most of a grid is a styling answer to what is really a merchandising fact, and if half the matrix is unavailable, that's worth acting on in the range itself.

"Progressive disclosure is deferral, not concealment. Anything that changes the price, the delivery time or what arrives in the box has to be visible before the button is tapped."

Finally, keep the goal visible. Price and add to cart shouldn't vanish while options are being worked through; a compact sticky purchase bar covers this on longer pages.

What it buys you on a phone

Every extra row of chips pushes the price and the button further down a 390-pixel-wide screen. We've written before about measuring add-to-cart depth, and staging options is usually the cheapest way to claw that depth back, no redesign required. There's a second saving too: a customer who discovers after three taps that their combination is out of stock rarely starts again. Fewer dead ends, fewer abandoned pages.

Measure it yourself

1. Open your best seller on your phone. Count the tappable choices visible before the add-to-cart button.
2. Count the decisions actually required to buy the thing. The gap between those two numbers is the workload you're handing every first-time visitor before they've decided they want the product at all.
3. Close the gap, then measure your button depth. In that order.

At beCommerce, we review variant and option staging as part of every mobile conversion audit. If you want a hand simplifying yours, book your free audit →.