Shopify questionAnswer4 min read
Why Does My Shopify Store Look Different on Mobile?
Your Shopify store changes on phones because the theme rearranges itself for small screens. Here is what causes each difference and how to fix it.
Key takeaways
- Shopify themes are responsive: on phones they stack sections into one column, crop images, shrink text and collapse menus.
- Most surprises come from image cropping, sections set to show on one device only, and app or custom code with fixed widths.
- Shopify lets you set a focal point on images so themes crop them around the important part.
- Google indexes and ranks the mobile version of your site, so content missing on mobile can cost you in search.
- Who it is for
- Store owners fixing mobile layout
- Time needed
- 4 minutes to read
- What you need
- Theme editor access and a phone
Your Shopify store looks different on mobile because your theme is responsive: it stacks sections into a single column, crops images to fit a narrow screen, collapses the menu and sometimes hides elements on purpose. Most of the differences you don't like come from image crops, mobile-specific section settings and app code, and you can find nearly all of them by previewing the store on mobile in the theme editor and on a real phone.
Most of the stores I review get more mobile visits than desktop ones, yet owners usually design on a laptop. The Shopify and Google details below were checked on 7 November 2026.
What you see, and why
| What you see | Usual cause | Fix |
|---|---|---|
| Banner cut off or heads cropped | Wide image cropped to a tall screen | Set a focal point or a mobile image |
| A section is missing | Hidden on mobile in its settings | Check the section's visibility options |
| Text overlaps an image | Text placed over a banner | Stack text below on mobile |
| Page scrolls sideways | Custom code or app with fixed widths | Remove fixed widths, test without the app |
| Changes don't appear | Old cache or an unpublished theme | Refresh, check which theme is live |
| Different order of content | Columns stack top to bottom | Reorder blocks or sections |
Images: the biggest cause
A banner designed at desktop width is wide and short. On a phone, the theme either shrinks it until text is unreadable or crops it to fill a taller space. That is why product shots lose their edges and lifestyle photos lose people's heads.
- Set a focal point. In
Content > Files, click an image's thumbnail and select its most important part. Shopify says this helps themes crop the image more intelligently. - Use a separate mobile image if your theme's banner section offers one. Many premium themes do.
- Keep text out of images. Text baked into a banner shrinks to nothing on a phone. Use the section's text fields instead.
- Match aspect ratios. Product images in the same ratio keep collection grids even on small screens. Shopify recommends square images of 2048 x 2048 pixels.
Sections, apps and custom code
Some themes let you show or hide a section or block on mobile or desktop. That's useful, but it's also how a section quietly disappears for half your visitors. Click through each section's settings in the theme editor if something is missing on one device.
Apps are the next suspect. Pop-ups, review widgets and chat buttons inject their own code, and some aren't built with small screens in mind. If a page scrolls sideways or a button sits under a chat bubble, turn the app's embed off in the theme editor's App embeds panel and check again. Custom CSS with fixed pixel widths causes the same problem.
Why it matters for search
Google says it uses the mobile version of a site's content, crawled with its smartphone agent, for indexing and ranking. It advises keeping the same content on mobile as on desktop. If you hide product details, reviews or FAQs on mobile to save space, Google may not count them. Use accordions or tabs instead of hiding content.
A ten-minute mobile check
- Open the theme editor and switch the preview to mobile. My theme editor tutorial shows where the controls are.
- Walk the buying path: home page, a collection, a product, the cart and checkout.
- Check each page for cropped images, missing sections, sideways scrolling and buttons hidden by pop-ups or chat icons.
- Repeat on real phones and note anything the preview didn't show.
- Test speed, because mobile networks expose heavy pages. The free Shopify speed checker gives a quick read.
What to do next
- Fix images first: focal points, mobile banners and text out of images.
- Audit section visibility and app embeds for anything that breaks on small screens.
- Work through the mobile basics. My mobile CRO checklist for Shopify covers menus, product pages and checkout.
- Get it fixed properly. If custom code or a theme issue is the cause, my Shopify development service can sort it.
Free tools
Check your own store
Free, no sign-up. Each one runs a part of this guide for you.
Frequently asked questions
Why do my images look cropped on mobile?
Wide desktop banners get cropped to fit a taller phone screen. Set a focal point on the image in Content > Files, use a separate mobile image if your theme supports it, and keep text out of the image itself.
Why is a section missing on my phone?
Many themes let you show or hide a section or block on mobile or desktop. Check that section's settings in the theme editor, and check whether an app block inside it supports mobile.
How do I preview my Shopify store on mobile?
Open the theme editor and switch the preview to mobile. Then test on a real iPhone and Android phone, because the preview doesn't catch every issue.
Why does my store scroll sideways on mobile?
Usually an element is wider than the screen, often from custom CSS with a fixed width or an app widget. Turn off app embeds one by one to find the cause.
Does mobile layout affect my Google rankings?
Yes. Google uses the mobile version of your site for indexing and ranking, and it advises keeping the same content on mobile and desktop.
Can I design my mobile store separately?
Partly. Most themes offer some mobile settings, such as separate banner images or visibility options, but the layout comes from one responsive theme. Bigger differences need custom theme work.
Sources
- Uploading and managing files, Shopify Help Center
- Product media types, Shopify Help Center
- Theme editor, Shopify Help Center
- Mobile site and mobile-first indexing best practices, Google Search Central
Related services and work
I'm a Shopify developer and CRO specialist. I have built and improved Shopify stores since 2018, completed more than 1,000 projects, and hold a 4.96 average rating across 719 client reviews.
More guides
-
Can My Store Have a Different Name From My Business?
Your Shopify store can trade under a brand name that isn't your legal business name. Here is what to register, and where the legal name still has to appear.
-
Should You Migrate Your Store or Rebuild From Scratch?
For most stores the answer is both: migrate the data, rebuild the design. Here is what moves to Shopify, what doesn't, and the cases where a clean start really is better.
-
Do I Need to Show My Address on My Online Store?
Whether your store must show a business address depends on where you sell. Here are the rules for the US, the UK and the Netherlands, and how to handle a home address.
-
How Do I Change Fonts on My Shopify Store?
Changing fonts takes about two minutes in the theme editor. Choosing fonts that stay readable and fast is the part worth thinking about.
