Variant-Aware Cross-Sell UX

Introduction

The suggestion slot gets clicks, but the clicks don't turn into adds. On EC sites selling apparel and gear, much of that gap comes down to size selection. Putting an "Add to cart" button in the slot isn't enough, because a purchase isn't final until a size or color is chosen.

This article covers the UI that lets users pick a size inside the suggestion slot and add from there (a one-step add with variant selection), plus the mechanism that offers only in-stock sizes. Two questions run through it: how far can page transitions be reduced, and how do you guarantee that the size someone picks is actually available.

Products With Sizes and Colors Stall Mid-Add

An "Add to cart" button alone doesn't finish the job

For a product with no sizes, one button in the suggestion slot is enough. But most apparel and gear items require choosing a variant — a size, a color — before the purchase can go through. If pressing the button sends the user to the product page instead, they drop out of the flow they were in.

The moment they land on the product page, what fills the screen is a large product image and a description. The interest sparked in the suggestion slot gets interrupted right there, and some people wander off to look at something else entirely.

Every page transition costs users

"See the suggestion, go to the product page, pick a size, return to the cart." Each of those four stages loses a share of users. Cart-page cross-sell in particular happens mid-checkout, so sending someone to another page risks not just the add, but the original purchase.

The difference is how many times the user has to move: four on the left, one on the right. That gap shows up directly in the add rate.

Picking a Size Inside the Suggestion Slot

Build size selection into the slot

What we did is straightforward: size selection lives inside the suggestion slot. Users pick the size of whatever caught their eye and press the add button. No navigation at all. On the cart page it doesn't interrupt checkout; on the product page it doesn't interrupt browsing.

Make the controls tappable even in a small slot

The suggestion slot is only a portion of a cart or product page, so space is tight. Even so, size buttons keep a finger-friendly target size, and the selected size is distinguished by both color and border so it reads at a glance. Tapping the wrong button on a phone is exactly the failure mode to avoid.

For products with many options, sizes wrap onto multiple lines so the slot doesn't grow uncomfortably tall.

Apply the add without reloading the page

When a size is chosen and the add button pressed, the cart updates without reloading the whole page. Cart contents stay as they were; only the item count and total change. Nothing goes blank and rebuilds, so users never lose track of where they are.

All four stages happen on the same page. From the user's side it reads as a single action: pick, then press.

Never Show What Can't Be Bought

Offer only the sizes that are in stock

Being able to pick a size means nothing if that size is sold out. Being told "out of stock" after choosing is the worst version of this experience. So the slot offers only in-stock sizes as options — don't show what can't be bought in the first place.

Stock is checked at the moment the suggestion slot is rendered, so sold-out sizes don't linger in the list of options.

Leave fully sold-out products out of the slot

Products with no sizes remaining aren't shown in the suggestion slot at all. A row of items where nothing can be bought undermines trust in the slot itself. What's in the slot is what's buyable right now, and once that holds, users can browse the options without second-guessing them.

Signaling That the Add Worked

Confirmation of a successful add should be clear but restrained. A flashy screen change or a large pop-up interrupts the purchase flow. The button switching to "Added," the cart count quietly rising — that much change is enough. Once users can confirm the item went in, the job is done.

The reverse is also a problem: with no visible change at all, some people press the same button several times out of uncertainty. Saying nothing and saying too much both get in the way of the add.

All four exist to reduce the effort sitting between "choosing" and "adding."

Summary

Cross-sell for products with variants is decided by how much effort you can remove between the choice and the add. Three points defined this one:

• Build size selection into the suggestion slot so the add finishes without navigation
• Show only in-stock sizes, so whatever is chosen can always be bought
• Skip the page reload and confirm with restrained feedback that doesn't stop the purchase

Why suggestions work in the cart, and how the suggested products get decided, are covered in the articles below.