Troubleshooting · For clinics

My storefront looks broken on mobile

Quick checks when your store renders weirdly on a phone or tablet.

2-min readUpdated

Your storefront should look right on every device. If something looks broken on mobile specifically, here are the usual culprits.

1. Cached old version

Pinch zoom out, then refresh with cache clear (long-press refresh on iOS Safari, hit "Empty cache and reload" on desktop Chrome). Most "looks broken" reports turn out to be a cached old layout from before you redesigned.

2. Custom theme override

If you have edited the theme CSS in Design → Theme, a recent change can break mobile while looking fine on desktop. Hit "Preview on mobile" in the theme editor — this shows your storefront in a phone viewport without you needing to grab a phone.

If the preview looks broken too, the most recent theme change is the cause. Roll back from the theme history (every save is versioned) until the preview looks right.

3. Image with wrong aspect ratio

If a product image is much wider than it is tall, mobile layouts can stretch in unexpected ways. Check the product images for any that are extremely wide. Replace with square or portrait.

4. Long product names

If you have a product name that runs to 80+ characters, it can blow out the layout on a small screen. The typography handles long names, but very long names with no spaces (think long compound chemical names) need a manual break. Edit the name to add a space or hyphenation point.

5. Just truly broken

If none of the above explains it, message your operator with:

  • A screenshot from the affected device
  • The exact URL you were on
  • The make and model of the phone

We have devices for the common phone classes and can usually reproduce within an hour.

Was this helpful?
Related articles
Still need help?

Talk to your team — they have your full account context.

Talk to your team →