Why does my Shopify store look wrong on mobile?

The most common causes

• Section settings. Many sections have separate options for mobile, such as the number of columns, whether items stack or swipe, text position and image height.
• Custom code. CSS, the code that controls layout and appearance, may have been added with fixed widths in pixels. Anything wider than the screen makes the whole page scroll sideways.
• Images. A wide banner is cropped heavily on a tall phone screen, so faces and products can be cut off. Text that is part of the image file shrinks with it and becomes unreadable.
• Apps. Chat bubbles, cookie banners, pop-ups, sticky bars and review widgets can overlap buttons or each other on a small screen.
• Pasted content. Tables, videos and images pasted into pages or descriptions often carry fixed widths that do not shrink.

Preview the mobile layout in the theme editor

1. Go to Online Store, then Themes, and click Customize on your live theme.
2. At the top of the editor, click the device icon and choose the mobile view.
3. Use the page selector at the top to open the page that looks wrong, such as the home page or a product page.
4. Click directly on the part that looks wrong. The editor opens that section’s settings in the sidebar.
5. Look for settings that mention mobile, columns, layout, image height, image ratio or text alignment. Change one setting at a time and watch the preview.
6. Save when it looks right, then check the desktop view as well, because some settings affect both.

The editor’s mobile view is a narrow preview inside a desktop browser, so always finish by checking a real phone.

Work out whether the cause is settings, code or an app

These checks narrow down the cause without editing theme files.

1. Duplicate your live theme from Online Store, then Themes, using the three dot button, so you have a backup.
2. In the theme editor, open App embeds in the left hand sidebar. Switch off one embed, save, and reload the page on your phone. Repeat for each embed. If the problem disappears, that app is the cause.
3. Check for custom CSS. Click the affected section and look for a Custom CSS box at the bottom of its settings, then check the Custom CSS box in the theme settings too. If someone has added CSS there, copy it somewhere safe, remove it temporarily and see whether the layout recovers.
4. If the whole page scrolls sideways, scroll down slowly on your phone and look for the one element that sticks out past the right hand edge.

Fix image problems

• Shopify resizes images for each device automatically, so upload one good quality image and let the theme handle sizing.
• If a banner crops badly on phones, check whether your theme lets you choose a separate mobile image or a different image height for mobile. Many themes do.
• Set a focal point on the image so the important part stays in view when it is cropped. You can do this when you select or edit the image in the admin.
• Keep text out of image files. Use the section’s heading and text fields so the words reflow and stay readable on a small screen.

Test on a real phone

1. To test changes before customers see them, make them on a duplicate theme. Go to Online Store, then Themes, click the three dot button on the duplicate and choose Preview.
2. Use the share preview option to get a link, and open that link on your phone.
3. Check the home page, a collection, a product page, the cart and the menu. Open and close the menu and the cart drawer.
4. Check that nothing scrolls sideways.
5. If you can, check on both an iPhone and an Android phone.
6. If your live store still looks wrong after a fix, open it in a private browser window on the phone to rule out an old cached version.

Related questions

Why does my Shopify store scroll sideways on mobile?

One element on the page is wider than the screen. It is usually a table, an embedded video, an image with a fixed width in a description, an app widget or custom CSS with a width set in pixels.

Why does my store look fine in the theme editor but wrong on my phone?

The editor’s mobile view is a narrow desktop preview, so it cannot show everything a real phone does. Apps and pop-ups also behave differently in the editor, and your phone may be showing a cached older version.

Do I need a new theme to fix mobile problems?

Rarely. Current Theme Store themes are built for mobile, and most problems come from settings, added code, images or apps. A very old theme that Shopify no longer updates is the main case where replacing it is the better fix.