Johnny Urban
Cart cross-sell with inline variant picking
Matching products offered inside the cart drawer — with colour selection in place, so adding one never costs the customer their cart.
Johnny Urban sells backpacks and bags — products with obvious companions. A rolltop backpack wants a raincover; a raincover is not something a customer goes looking for. The cart is the one moment where intent is already proven, so that’s where the suggestion belongs.
What I built
A “fitting products” block inside the cart drawer that offers items matched to what’s already in the cart. Each has an add button, and the list keeps itself honest: once the raincover is in the cart, it stops being suggested.
The part that matters: variants
Most cart cross-sells break on variants. The moment a suggested product comes in four colours, the usual answer is to send the customer to the product page — which closes the cart, drops them out of checkout intent, and turns a one-click add into a round trip.
Here the variant picker opens inside the drawer. Choose the colour, confirm, and the item lands in the cart without the page ever changing. The customer never leaves the cart, so the flow they were already in stays intact.
That’s the whole design argument: a cross-sell only earns its place if taking it costs less attention than ignoring it.
Alongside it
The drawer also carries free-shipping messaging at the top, so the cross-sell and the shipping threshold reinforce each other — adding the raincover is both a useful companion and progress toward something.
Note on attribution
Agency work — I built this feature, not the whole store.
Want something like this on your store?
Free 20-minute call. You leave with a concrete list of what I’d fix first.