How to Test Your Shopify Store on Mobile, Tablet, Desktop
To test your Shopify store on mobile, tablet and desktop, check five pages (home, a collection, a product, the cart and checkout) at a range of widths between a small phone and a large monitor. Start on an unpublished copy of your theme, open its preview on real devices, then sweep the widths in your browser’s device mode. Look for four things: sideways scrolling, a header or menu that wraps onto two lines, buttons covered by app widgets, and text that becomes hard to read.
Shopify facts about themes and previews come from the Help Center pages on adding and previewing themes and theme accessibility, read on October 23, 2026. The width-sweep method is the one we use on our own sites.
Test on a copy before you publish
Shopify lets you keep several themes in Draft themes and preview any of them; only one theme is published at a time. For any change bigger than a text edit:
- Make the change on a draft copy of your theme.
- Preview it from the Themes page. The preview bar shows the theme’s status (Draft or Live) and lets you view the store as a different country or language.
- Share a preview link of the unpublished theme and open it on your own phone and tablet, or send it to someone with a different device.
- Publish only after the test plan below passes.
The test plan: pages × widths
| Width range | Typical devices | Pages to check | What breaks most here |
|---|---|---|---|
| 320–375 px | Small and older phones | All five | Long product titles, prices wrapping, buttons pushed below the fold |
| 390–430 px | Current phones | All five | App widgets (chat, popups, cookie banners) covering buttons |
| 768–1024 px | Tablets, small laptops | Home, collection, product | The header: menu items wrapping to a second line, logo and icons overlapping |
| 1280–1440 px | Laptops | Home, collection, product | Images too small in wide layouts, empty space |
| 1920 px | Large monitors | Home | Full-width banners cropping the product out |
On our own sites, the tablet range is where layout problems turn up first. Themes switch from a phone menu to a desktop menu at some width, and between those breakpoints a long menu or a long collection name can wrap onto two lines. We check every page at every width from 320 to 1920 pixels with an automated script after each change, because a problem at, say, 900 px is invisible if you only look at 390 and 1440.
What to look for at each width
- Horizontal scroll. The page should never scroll sideways. A wide table, image or embedded element usually causes it.
- Header and menu. One line on desktop, a working menu button on phones, nothing overlapping in between.
- Buy button. Visible on the first screen of a product page on a phone, not covered by a chat bubble, sticky bar or cookie banner.
- Tap targets. Quantity buttons, variant swatches and the cart’s remove link big enough to hit with a thumb.
- Text over images. Shopify’s accessibility guidance asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24 px and up), including text on banners and slideshows. On a phone the crop of the image changes, and so does what sits behind the text.
- Forms. Newsletter signup and contact form usable with the phone keyboard open.
- Errors. Open the browser console on a desktop; JavaScript errors from apps can break buttons on some devices only.
Tools
- The theme editor’s preview switches between desktop and mobile views while you edit. Good for a first look; it will not show you the real keyboard or touch behavior.
- Your browser’s device mode (in Chrome’s developer tools, the device toolbar) lets you set any width, so you can sweep the ranges above in a few minutes.
- Real devices. At least one iPhone and one Android phone, on mobile data. They show what emulators miss: the real keyboard, the browser’s address bar, touch.
- PageSpeed Insights for speed on mobile, as a separate check.
Dedicated screenshot services that render many devices at once exist too; they help for a quick overview, but they do not replace a tap test on a real phone.
When it breaks: usual causes
- A new app embed adding a floating element in a corner already used by another.
- Custom CSS or code edits that set fixed widths.
- Long labels: a new collection name or menu item that pushes the header over its width at tablet sizes.
- A theme update that changes breakpoints; re-run the plan after updating.
After fixing, look at the phone checkout once more; our guide to Shopify mobile checkout lists the settings that help there, and Shopify UX mistakes shows how to find problems in your reports. The running a store hub has the rest.
Frequently asked questions
How do I preview my Shopify store on mobile? Start in the theme editor, switch the preview to the mobile view. For a real test, share a preview link of an unpublished theme from the Themes page and open it on your phone, or open your live store on the phone directly.
Which screen sizes should I test my Shopify store on? Test small phones (320–375 px), current phones (390–430 px), tablets (768–1024 px), laptops (1280–1440 px) and a large monitor (1920 px). Tablet widths are where headers and menus tend to wrap.
Why does my Shopify header wrap on tablets? At tablet widths many themes still show the desktop menu, and long menu labels or many items no longer fit on one line. Shorten labels, move secondary links to the footer, or check whether your theme offers a setting for when the mobile menu starts.