Shopify mobile design: designing for where the orders come from

Most Shopify orders arrive on a phone. Most Shopify stores are designed on a large monitor and checked on a phone afterwards. That sequence is the source of nearly every mobile problem, because "checked afterwards" means compromises rather than decisions.

Design at 375px first

Start the product page at 375 pixels wide. It's the narrowest common width and the hardest constraint, so a design that works there scales up easily. The reverse never works: a desktop layout squeezed down always shows the squeeze.

Practical effects of designing narrow first:

• You establish hierarchy honestly, because only one thing fits at a time.
• You cut what doesn't earn its place, because there's no sidebar to hide it in.
• The desktop version becomes a question of how to use extra space, which is a nicer problem.

The thumb

Most phone use is one-handed. That produces a comfortable zone in the lower two-thirds of the screen and an awkward one at the top.

• Primary actions go low. Add to cart, checkout, apply filters.
• Minimum 44px tap targets, with real space between them. Variant swatches and quantity controls are the usual offenders.
• Nothing important in the top corners. Reachable only by shuffling the phone.

Budget your sticky elements

Every store accumulates them: a sticky header, an announcement bar, a sticky add-to-cart, a cookie banner, a chat bubble. Stacked, they can leave less than half the screen for the actual product.

Pick two, maximum. Usually the header and the add-to-cart. Everything else scrolls away or doesn't exist.

The components that need mobile-specific design

Navigation. A drawer, with the top-level categories immediately visible rather than three taps deep. And it needs proper focus management — the most commonly broken accessibility feature in any theme.

Filters. On desktop a sidebar, on mobile a full-screen panel with an obvious apply and a visible result count. Filters that silently reload behind an open panel are disorienting.

The variant picker. Where mobile design most often fails. Swatches too small, unavailable combinations shown only by opacity, and the selected state indistinguishable at arm's length.

Image galleries. Swipeable, with a visible indicator of how many images there are. Pinch to zoom should work — it's the mobile equivalent of picking something up.

The cart. A drawer keeps context, which is good. It must be dismissible in an obvious way, and it must not trap focus badly.

Mobile checkout

Shopify's checkout is well-optimised and you have limited control over it, which is mostly a gift. What you do control:

• Get people to it with the right expectations. Total cost visible before they start.
• Accelerated payment methods. Shop Pay, Apple Pay, Google Pay remove the typing that kills mobile conversion.
• Correct address formats per region so the form doesn't fight the customer — localisation.
• Test it on a real phone with a real card. On the launch checklist, and skipped more than any other item.

Mobile performance is design work

Phones are slower and their networks are worse. Design decisions that are free on desktop are expensive here:

• A full-screen hero image is your LCP element, downloaded over mobile data.
• Multiple typefaces are multiple files before text renders.
• Carousels load every slide.
• Third-party widgets compete for a weaker main thread.

Set the budget while designing, not after — the performance checklist.

Testing properly

1. A real phone, on mobile data, not a desktop browser at a narrow width and not office wifi.
2. One-handed. Notice what you have to reposition the phone for.
3. Outdoors, in daylight. Low-contrast grey text disappears.
4. An older device. The newest phone hides performance problems everyone else has.
5. Buy something. All the way through, with a real card.
6. Then check for horizontal overflow — a page that scrolls sideways on a phone is the most obvious sign nobody tested it, and it's usually one long unbreakable string or a rotated element.

The mobile experience isn't a version of the store. For most of your customers it is the store, and the desktop version is the one nobody sees.