Shopify Mobile Upsell: Best Practices for iPhone Shoppers

More than 70% of Shopify traffic comes from mobile devices — most of it from iPhones. If your cross-sell recommendations aren't optimized for small screens, you're leaving a majority of your opportunity on the table.

The majority of Shopify traffic is mobile — and that means your cross-sell recommendations need to work on a 390px-wide screen in a thumb-scrolling context, not just on a desktop browser. Most recommendations apps are designed with desktop in mind and mobile as an afterthought. Here's how to do mobile right.

The mobile shopping context is different

iPhone shoppers are often distracted. They're in a line, on a couch, between meetings. They scroll faster, tap rather than click, and are quicker to abandon a page that requires too much effort.

This changes what a good cross-sell looks like. On desktop, you have room for a horizontal layout — product image on the left, text and button on the right. On mobile, a horizontal layout compresses awkwardly. The image gets too small to be compelling, or the button gets pushed off screen.

The best mobile cross-sell recommendation is a vertical card: full-width, product image on top, name and price below, and a clear tap-target button at the bottom. This layout uses the vertical scroll that mobile shoppers are already doing.

Widget sizing on mobile

The number one mobile cross-sell mistake: images that are too small. On mobile, a product image in a recommendation widget needs to be at least 120px tall — preferably 160px or taller — to be visually compelling. A 60px thumbnail doesn't give shoppers enough visual information to decide whether they're interested.

The second mistake: buttons that are too small to tap reliably. Apple's Human Interface Guidelines recommend a minimum tap target of 44x44px. Any button smaller than that risks accidental misses and frustrated shoppers.

If you're using Dropr, the widget is built to these specifications automatically. The mobile rendering is full-width with an appropriately sized product image and a button that meets tap target requirements without custom configuration.

Cart drawer behavior on iPhone

On desktop, the cart drawer slides in from the right side of the page. On mobile, it typically slides up from the bottom — functioning like a bottom sheet. This is a fundamental layout difference that affects how cross-sell recommendations appear inside the cart.

On a mobile bottom-sheet cart drawer, vertical space is limited. The shopper sees their cart items, a subtotal, and a checkout button. A cross-sell recommendation needs to fit within that space without pushing the checkout button off screen.

The best implementation: the recommendation appears between the cart items and the checkout button, constrained to a compact single-line or two-line card with a small image. The full-sized recommendation card works on product pages; inside the mobile cart drawer, compact is better.

Dropr renders two layout modes — a standard product page card and a compact cart drawer card — and detects which context it's in to use the appropriate layout.

Why card-style recommendations beat rows on small screens

Many cross-sell implementations on desktop show a horizontal row of 3–4 product thumbnails with titles underneath. This looks reasonable on a 1280px-wide screen. On a 390px iPhone screen, a 4-item row means each item is about 80px wide — too small to see clearly, and too small to tap with confidence.

The solution: one card, full-width. A single focused recommendation in a card format — image, name, price, button — is readable, tappable, and converts better on mobile than a multi-item row.

This is also why "one recommendation, not four" is doubly important on mobile. It's not just about decision fatigue — it's about physical usability. A single full-width card is a better mobile UI than a row of small thumbnails.

The thumb zone and recommendation placement

On an iPhone, the most comfortable tapping area is the lower portion of the screen — the "thumb zone." The top of a tall phone is a stretch for most hands. This is why recommendations placed directly below the add-to-cart button (roughly middle-to-lower screen on a product page) get more engagement than recommendations at the very top or very bottom of the page.

In the Shopify theme editor, when you position the Dropr block below the add-to-cart button in the product information section, it typically lands in this prime thumb-zone area on most iPhone screen sizes. No special optimization needed — just the right section placement.

Mobile-specific content to consider

Short text performs better on mobile. Product names longer than 30–35 characters often wrap to a second line in small card formats, making the card taller and more cluttered. If your product names are long, consider whether your cross-sell selection prioritizes shorter-named products where possible.

Price clarity also matters more on mobile, where shoppers are making quicker decisions. Make sure the recommended product's price is prominently displayed — not grayed out or styled in a way that requires close reading.

How to test your mobile cross-sell

The best test is the real device test. After setting up your cross-sell widget, pull up your store on your iPhone and go through a product page to cart flow. Ask yourself:

Can I read the recommended product's name and price without zooming?
Can I tap the "Add to Cart" button without accidentally hitting something else?
Does the card look like part of my store or like an ad?
Does the cart drawer recommendation fit without pushing the checkout button too far down?

If any of these are "no," adjust the widget settings or note them as issues to address.

FAQ

Do Android shoppers behave differently from iPhone shoppers?

The shopping behavior is similar, but screen sizes vary more on Android (some Android phones have larger screens closer to mini-tablets). Build and test for iPhone 14 / iPhone 16 screen sizes as your baseline — these cover the most common mobile shopping device — and verify that the layout also works on a wider Android screen.

Should I show different recommendations on mobile vs. desktop?

The product pairings should be the same, but the visual layout should adapt. A recommendation that shows as a horizontal card on desktop should show as a vertical full-width card on mobile. This is a layout adaptation, not a strategy change.

Does mobile load time affect cross-sell conversion?

Yes. Mobile connections are less reliable than desktop WiFi, and shoppers abandon slow pages more quickly on mobile than on desktop. Recommendation widgets that load asynchronously (after the main page content) don't block the page render — this is the right approach for mobile. If your recommendation widget is the reason a page hangs, conversion on both the main product and the cross-sell will drop.