Shopify Mobile Optimization Checklist for 2026

To optimize a Shopify store for mobile, start with a fast, mobile-first theme and pass Core Web Vitals on mobile: LCP within 2.5 seconds, INP within 200 milliseconds and CLS of 0.1 or less. Then serve right-sized images, make every button easy to tap, keep navigation short, and make checkout fast with accelerated payment buttons such as Shop Pay, Apple Pay and Google Pay.

This checklist covers 24 checks in seven groups, with the Shopify tools and settings for each one. Google also indexes the mobile version of your store: since July 2024, content that isn't accessible on mobile can no longer be indexed. Mobile is therefore the version of your store that counts for search too.

The checklist at a glance

How do you measure mobile performance on Shopify?

1. Know the mobile Core Web Vitals targets

Google's Core Web Vitals are measured at the 75th percentile of page loads, separately for mobile and desktop. On most stores mobile is the harder test, because phones have slower processors and networks.

INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024. On Shopify stores, poor INP on mobile usually comes from heavy JavaScript: app scripts, chat widgets, tracking tags and complex variant pickers.

2. Read real-user data by device

Start with what real shoppers experience. Shopify's web performance reports show LCP, INP and CLS from real visits over the last 30 days. You'll find a summary under Online Store > Themes and the full reports under Analytics > Reports, where you can filter by device type. Shopify labels the middle band "Moderate". Google Search Console's Core Web Vitals report shows the same metrics per URL group for mobile.

3. Find the causes with lab tests

Real-user data tells you that a problem exists. Lab tests tell you why. Run PageSpeed Insights or Lighthouse on the mobile setting for your home page, a collection page and a product page. Our free Shopify speed test runs Lighthouse on mobile and desktop at once.

Two notes for older guides you may read. Time to Interactive (TTI) was removed in Lighthouse 10 in 2023, and FID was never a lab metric. In the lab, Total Blocking Time (TBT) is the closest signal to INP.

How do you choose and clean up a theme for mobile?

4. Choose a fast, mobile-first theme

Every theme in the Shopify Theme Store must be mobile responsive, reach an average Lighthouse performance score of at least 60 and an accessibility score of at least 90 across the home, product and collection pages, and use touch targets of at least 24 by 24 CSS pixels. Treat those as minimums, not as a guarantee. Test the theme demo on a phone, then test it again with your own images, apps and content.

Shopify's free themes, including the Horizon family launched in 2025 and Dawn, are a solid starting point. If your catalog or brand needs a layout that no theme handles well, a lightweight custom theme built mobile-first is often faster than a heavily modified premium theme. That is the kind of work our Shopify theme development team does.

5. Remove apps and code you don't use

Every app that adds storefront code adds weight on every mobile visit. List your apps, ask what each one earns, and remove the ones you don't need. Uninstalling an app doesn't always remove the code it added to your theme, so check the theme for leftover snippets and scripts afterwards. Remove unused CSS and JavaScript at the same time.

6. Load scripts with defer or async

Shopify's theme guidance is direct: themes should never use parser-blocking script tags. Use defer when the order of execution matters and async when it doesn't. Load non-essential widgets, such as chat or reviews below the fold, after the page has loaded or when the shopper interacts. This is one of the most effective ways to improve INP on mobile.

7. Keep the theme updated

Theme updates bring bug fixes, performance work and compatibility with new Shopify features. Test each update on an unpublished copy first, especially if your theme has custom code, then publish it.

How should images, video and fonts be handled on mobile?

8. Serve responsive images

Use the image_url and image_tag Liquid filters. image_tag generates a srcset with sensible default widths, so a phone downloads a small file and a desktop a larger one. Shopify's CDN also detects which formats the browser supports and serves WebP or AVIF automatically. You don't need to convert files yourself; upload good originals and add a sizes attribute that matches your layout. For more detail, see our Shopify image optimization checklist.

9. Load the main image first, lazy-load the rest

The largest image above the fold is usually your LCP element. Shopify's guidance:

• Apply loading="lazy" only to images outside the first screen. Never lazy-load the LCP image.
• Add fetchpriority="high" to the LCP image only, one per page, and never together with lazy loading.
• Use preload: true in image_tag sparingly. Shopify recommends preloading only one or two resources that the browser would otherwise find late.

By default, image_tag already sets lazy loading for images in sections further down the page. Check that your hero and first product image are not lazy-loaded by a theme setting or an app.

10. Reserve space for images, embeds and banners

Layout shifts happen when something appears without reserved space: images without dimensions, late-loading announcement bars, review widgets and cookie banners that push content down. image_tag adds width and height attributes by default. For embeds and app blocks, set a fixed height or aspect ratio in CSS.

11. Keep video light

Upload video to Shopify or host it on YouTube or Vimeo rather than embedding large files from elsewhere. Shopify's video_tag filter supports autoplay, loop, muted and controls, and outputs a poster image. Keep autoplaying background clips short and compressed, and use a poster image so the section has something to show straight away.

12. Limit web fonts

Each font family and weight is another download. Use one or two families and only the weights you need, or system fonts if they suit the brand. Shopify's font_face filter accepts font_display: 'swap', which shows text in a fallback font while the web font loads.

How do you make a Shopify store easy to tap and read?

13. Make tap targets big enough

Treat 24 pixels as the floor and aim for about 44 pixels on primary actions such as Add to cart, the menu icon, quantity buttons and close buttons. Leave space between links in menus and footers. Lighthouse now checks this in its accessibility audit, under target size.

14. Use readable text and 16px form fields

Set body text to around 16 pixels with comfortable line spacing. Use at least 16 pixels in form fields, including search, email sign-up and quantity inputs, because iOS Safari zooms into fields with smaller text when a shopper taps them. Check color contrast too, since phones are often used outdoors.

15. Keep the page zoomable

Use the standard viewport tag, <meta name="viewport" content="width=device-width, initial-scale=1">, which Shopify's Dawn and Horizon themes already include. Don't disable pinch-to-zoom. Shoppers zoom into product photos and small print, and blocking it is an accessibility problem.

How should mobile navigation work?

16. Keep menus short and collapsible

Put the most important categories at the top and fold subcategories into collapsible sections. A good test: the first level of the mobile menu should fit on one screen without scrolling.

17. Keep search and cart within reach

A slim sticky header with the logo, menu, search and cart keeps the essentials one tap away without hiding much content. Many shoppers go straight to search, so keep it visible on mobile, ideally with predictive results as they type.

18. Put the main action within thumb reach

On product pages, keep Add to cart visible near the bottom of the screen, for example with a sticky add-to-cart bar that appears once the main button scrolls out of view. Keep the variant picker, price and delivery information close to it.

19. Make filters work on a small screen

Open filters in a drawer or full-screen panel with a clear "show results" button, and show the number of active filters. Shopify's Search & Discovery app manages which filters appear.

20. Avoid pop-ups that cover the page

Google advises against interstitials that obscure the whole page and suggests banners that use only a small part of the screen. Mandatory dialogs, such as age verification, are exempt. For email sign-ups:

• Use a small banner, an inline form or a bottom sheet instead of a full-screen pop-up.
• Show it after the shopper has engaged with the page, not on arrival.
• Give it a close button that is easy to tap.
• Ask for one field, such as email, with a clear call to action.

How do you optimize mobile checkout?

21. Show accelerated checkout buttons

Dynamic checkout buttons, which Shopify calls accelerated checkout, let shoppers pay with Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay or Venmo straight from the product page or cart, without typing an address on a small keyboard. Shop Pay saves the shopper's email, payment method and addresses for next time. Shopify reports that Shop Pay can lift conversion by up to 50% compared with guest checkout, based on a study it commissioned in 2023.

22. Keep checkout short and test it on a phone

One-page checkout is Shopify's default layout. Keep it, and add only the fields and checkout extensions you really need. After any change to checkout apps, payment methods or shipping rules, place a test order on a phone. Check that the order summary, discount field, delivery options and payment buttons are easy to find and use.

How do you test and monitor mobile results?

23. Test on real phones

Browser device modes and services like BrowserStack are useful, but always finish on real devices: at least one recent iPhone and one mid-range Android phone. Look for horizontal scrolling, sticky elements that overlap content, the keyboard covering form fields, and images or text that don't fit.

24. Monitor mobile results every month

Compare mobile and desktop conversion rates in Shopify Analytics or GA4, and look at where mobile shoppers leave. If one product page has a much higher exit rate on mobile, look at that page on a phone first. Review the Core Web Vitals in Shopify's web performance reports and Search Console every month, and after every theme or app change.

Older checklists often point to Google's Mobile-Friendly Test and the Search Console Mobile Usability report. Google retired both in December 2023, so use the tools above instead.

Do you still need AMP or headless for mobile speed?

AMP: no. Google stopped requiring AMP for Top Stories in 2021, and AMP pages rank like any other page. Shopify has no native AMP support, so AMP means an app and a second version of your pages to maintain. Put that effort into Core Web Vitals on your real theme instead.

Custom theme or headless: sometimes. A lean custom theme gives you full control over what loads on mobile. A headless storefront, for example with Shopify Hydrogen, gives even more control, but it is a bigger build with more to maintain. Choose it when theme limits block important features, not just for a better speed score.

If you want a second pair of eyes on mobile performance and conversion, our Shopify conversion rate optimization service makes evidence-led changes and measures each one after launch.

FAQ

How do I make my Shopify store mobile friendly?

Use a responsive, fast theme, pass Core Web Vitals on mobile, serve responsive images with image_tag, make tap targets at least 24 pixels and ideally about 44, keep menus short, avoid full-screen pop-ups and turn on accelerated checkout buttons. Then test on real phones and monitor results by device.

What are good Core Web Vitals scores for a Shopify store on mobile?

LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less, measured at the 75th percentile of real mobile visits. Shopify's web performance reports show these numbers for your store and can be filtered by device type.

Does Shopify optimize images for mobile automatically?

Partly. Shopify's CDN serves WebP or AVIF when the browser supports them, and image_tag creates a responsive srcset and lazy-loads images further down the page. Your theme still has to use these filters correctly, give the main image priority and avoid lazy-loading it.

How big should buttons be on a mobile Shopify store?

At least 24 by 24 CSS pixels, which is the WCAG 2.2 AA minimum and a Shopify Theme Store requirement. For primary actions such as Add to cart and the menu icon, aim for about 44 by 44 pixels, with space between neighboring links.

Is AMP worth it for a Shopify store in 2026?

No. Google no longer requires AMP for any search feature, and Shopify doesn't support it natively. A fast theme that passes Core Web Vitals gives you the same benefit without a second version of your pages.

Which Shopify theme is best for mobile?

There's no single best theme. Every Theme Store theme meets Shopify's mobile and performance minimums, but real speed depends on your images, apps and content. Test a few candidates on a phone with your own products, or build a lean custom theme if your needs are specific.