Is your Shopify store ready for the iPhone Duo?

Apple announced the iPhone Duo on 9 September. Pre-orders open on 16 October, it ships on 23 October, and it starts at $1,999. It is the first iPhone that folds, and for anyone who runs a Shopify store it is the first iPhone in years that changes what “mobile” means.

Open, it is a 7.6-inch screen. Closed, a 5.4-inch one. Apple says both share the same aspect ratio, which is wider than any iPhone before it, and that the Duo ships with iOS 27.1. That is the whole of the hardware story that matters to a store. The rest of this post is what it does to your pages, what we saw when we tested it, and how to check your own store before the first one arrives in a customer’s hand.

A phone that asks for your tablet layout

Every responsive theme decides how to lay out a page by asking the browser how wide it is. Phones answer somewhere between 375 and 430 CSS pixels. Tablets answer 768 and up. Themes draw the line between the two around 750 and again around 990, and everything about a mobile layout follows from that answer: the hamburger menu, the one- or two-column product grid, the stacked hero, the sticky add-to-cart bar.

Apple has not yet published the Duo’s CSS viewport, and its Safari simulator arrives with Xcode 27.1 later this month. The figures circulating in the device databases that browser emulators use put the open screen at 890 by 626 CSS pixels at 3x, and the closed one at 466 by 678. Treat them as close rather than final. Even if they move by twenty pixels, the shape of the problem does not: open, the Duo tells your theme it is a small tablet in landscape, and it is being held like a phone.

What we saw on Dawn

We loaded Shopify’s default theme, Dawn, at 890 by 626 with a phone user agent and touch enabled. Three things happened.

The hamburger menu was still there. Dawn does not show its full navigation until the screen is wider than the Duo’s open width, so a device the size of a paperback gets a phone menu with a tablet’s worth of empty header beside it. Three navigation links were visible; the rest were behind the icon.

The product grid went to three columns. That is the tablet grid, and on 890 pixels of width it is fine. Card images and prices had room. If your theme uses a four-column grid at that width, check the text under each card, because 220-pixel cards do not hold a three-word product title on one line.

The hero swallowed the screen. Dawn’s demo hero is an image with the headline at the bottom, sized to the viewport height. At 626 pixels tall, the whole open screen was picture, and the headline was cut off at the bottom edge. A customer opening the Duo on that page sees two photographs and no words. This is the one that will hit most stores, because most heroes are built exactly like that: a full-height image with the copy low, tuned for a screen that is 850 pixels tall, not 626.

Closed, at 466 wide, Dawn behaved like a slightly generous phone: two-column grid, hamburger, headline visible. The closed state is the safe one. The open state is the new one.

For balance: our own site does the same thing. scalewiseva.com shows its hamburger at 890 because our navigation breakpoint sits above it. It is on our list this week, and the point of writing this before fixing it is that nearly every site built in the last five years made the same assumption we did.

The seven things to check on your store

1. Hero height. Anything sized with 100vh, min-height: 100vh or a theme setting called “full screen” becomes 626 pixels of image and nothing else. Set the hero to its content height with a minimum, or put the headline in the top half.
2. The menu breakpoint. If your theme shows the full menu only above 990 pixels, the Duo open gets the hamburger. That is not broken, but it wastes the width you are paying for. Most themes let you lower this in the theme code; some expose it as a setting.
3. Product grid columns. Look at the collection page at 890 wide. Two columns look sparse, four look cramped, three is usually right. Then look at the product titles.
4. Image crops. A hero or banner cropped for portrait phones is now shown in a wider frame. Faces and product edges that sat safely in the middle may sit at the edge or off it. Check every banner with a person in it.
5. Sticky bars. A sticky add-to-cart or announcement bar sized for a tall phone takes a much larger share of a 626-pixel screen. Two of them at once can leave 400 pixels for the product.
6. Apps that inject their own layout. Pop-ups, size charts, review widgets and chat bubbles often carry their own phone-or-desktop switch at 768 pixels. At 890 they think they are on a desktop and draw a dialog that assumes a mouse and a tall window. Open each one at 890 and try to close it with a thumb.
7. Type set in viewport units. Headlines sized in vw scale with width, so a headline tuned to look right at 390 pixels wide is more than twice the size at 890 and wraps twice as often. Clamp it.

Checkout is the one place you can relax. Shopify’s checkout is hosted and responsive, and Shopify will handle the Duo there before you can.

How to test it today

You do not need the phone. In Safari on a Mac, turn on the Develop menu, open your store, choose Enter Responsive Design Mode, and type 890 by 626 into the size fields. Then 466 by 678. In Chrome, open DevTools, toggle the device toolbar, and add a custom device with those dimensions and a device pixel ratio of 3. Walk the home page, a collection, a product page and the cart at both sizes. It takes ten minutes and you will find the hero problem in the first thirty seconds.

When Apple’s simulator lands in Xcode, repeat it there, because the real viewport may differ slightly from the emulator figures and because Safari’s toolbars change what is actually visible.

If your store has an app

Most Shopify stores do not have their own iOS app, and if yours does not, skip this. If it does, Apple’s developer guidance for the Duo describes compatibility modes based on how the app was built. An app that has not been updated for iOS 27 runs in a fixed-size window with black around it on both screens, which is the outcome your customers will screenshot. Apple is running workshops and has published design guidelines; send the link to whoever built the app and ask for a date.

The order to do it in

Fix the hero first, because it affects the first screen of every visit. Then the menu breakpoint, then the grid, then the apps. Everything else is polish. You have until 23 October before the first Duos arrive, and a few weeks after that before there are enough of them in your analytics to matter, but the hero fix is an afternoon and there is no reason to wait for the data.

If you would rather have someone else look, send us your store address through the contact page with “Duo” in the message. We will send back both screenshots and a short list of what we would change, without a call.