Introduction
How do you get a suggested product a shopper likes into the cart with as little friction as possible?
Stumble here and even a great suggestion won't turn into an add.
On an apparel and gear EC site, many products have variants like size and color. Just putting an "Add to cart" button in the suggestion slot isn't enough — you need to complete size selection inside the slot too. This article covers that one-step add UI design and filtering by stock.
The Difficulty of Products With Variants
"Add to cart" alone isn't enough
For a product without sizes, a single button in the suggestion slot can add it to the cart. But apparel and gear won't finalize a purchase until you pick a size or color. Sending someone off to a separate product page here pulls them out of the original flow, and they often never come back.
The heat of the moment when a suggestion catches someone's eye cools with time. That's exactly why it matters to finish everything — from selection to adding — within the slot, in one go.
Every page transition adds drop-offs
A multi-step sequence of "see suggestion → move to product page → pick a size → return to cart" generates drop-offs with each step inserted. Cart-page cross-sell in particular happens mid-checkout. Moving to another page risks interrupting the purchase itself.
Suggestion → product page → size selection → back to cart. Many steps, prone to drop-offs.
Pick a size in the suggestion slot and add on the spot. No break in the flow; buy while the heat is high.
One-Step Add Completed Within the Slot
Pick the size in the suggestion slot
The solution is simple: build size selection into the suggestion slot. The shopper picks the size of the item that caught their eye right there, and just presses "Add." No page transition at all. On the cart page it doesn't stop checkout; on the product page it doesn't break browsing.
Even within a small slot, we laid out the size buttons at a tappable size and made the selected state clear at a glance.
Reflected straight into the cart
When you pick a size and press the add button, it's reflected into the cart without reloading the whole page. The cart contents are preserved, and all that comes across, smoothly, is that "it went up by one," so shoppers can keep shopping with peace of mind.
Curated recommended products are lined up
Only in-stock sizes are selectable
Reflected into the cart with no page transition
Only the item count goes up, contents preserved
Filtering by Stock
Don't show out-of-stock sizes
Being able to pick a size is meaningless if that size is out of stock. Being told "out of stock" after choosing is the most disappointing pattern. So we added filtering that only offers in-stock sizes as options — the idea being, don't show what can't be bought in the first place.
Products where every size is out of stock aren't placed in the suggestion slot at all. Not raising false hopes is part of the UX too, in my view.
Keeping suggestions fresh
Stock changes moment to moment. We reflect the stock status at the time of displaying the suggestion slot, so sold-out sizes and products don't linger. As a result, the slot always shows only "what can be bought right now."
Don't show what can't be bought
Stock filtering benefits both conversion and shopper satisfaction. The confidence that a chosen size can always be bought lowers the hurdle to adding.
Feedback after adding
We signal that an add succeeded clearly, yet modestly. A flashy page transition or a big pop-up disrupts the purchase flow. A small piece of feedback — the button changing to "Added," the cart count quietly going up — is enough. As long as the shopper can confirm "it went in," that's all that's needed.
Conclusion
Cross-sell for products with variants comes down to how much you can reduce the friction between "choosing" and "adding." The key points this time were:
- Build size selection into the suggestion slot and complete it with no page transition
- Show only in-stock sizes, so what's chosen can always be bought
- Don't reload; keep the purchase flow going with modest feedback
For why suggestions work in the cart, see Designing "one more item" cart cross-sell; for the machinery of picking suggestions, see Admin UI and CSV bulk operations. For the big picture, see the cross-sell operations hub article.