Facebook pixel

How to optimize a Shopify store for mobile

How to optimize a Shopify store for mobile

Nearly 3 out of 4 of every dollar spent on eCommerce is spent using a mobile device. Google’s index uses the mobile version of your site to understand what your business is about.

So as a business, your mobile site is worth the time and attention to optimize as much as you can, which of course TinyIMG can help you do with one of the biggest offenders — images.

Why is Shopify Mobile optimization important?

Like many content management systems, Shopify provides a good base to start from. What should be considered, reviewed, and optimize depends, at least in part, on the Shopify theme you choose or how your website is built on the platform.

11 Shopify store mobile optimization tips

There are a lot of tips and tricks out there to help make your Shopify eCommerce store more optimized for a mobile experience, and we’ve pulled together some of the contenders here all in one place. You’ll find that our tips are a mix of best practices for mobile for user experience, SEO, and conversion altogether, as all of these elements can impact a customer's experience of your website on mobile.

Navigation bar

We’re in a mobile-first world, and we’re all about that scrolling, right? The swipe, the scroll, the tap. But most of the time on websites we want to be able to get back to the navigation bar quickly, particularly if we’re browsing through a bunch of products or comparing.

A quick navigation bar to find our way around rather than tiring us out and scrolling alllllll the way back up to the top of the page? Amazing. Fixed navigation is that answer. You’ll keep the menu bar in view and still let the scroll-happy trawl through your website to find exactly what it is they’re looking for.

Frank Body using a sticky nav

Visuals

Aesthetically, sometimes things can go a bit wonky on mobile if a website is built primarily by viewing it on desktop than on mobile (which, let’s be honest, is a bit easier for the business owner/website manager/social media manager/support team).

So it’s probably worth going back through and looking on your mobile to check how images are cropped, how the banners are sized, and how video or other rich media is looking on your site. If your product shots are somehow pixelated or your banners are cropping out your key product, it could definitely be affecting how people see your website.

Product images

Product images are one of the most important things you can have really well done on your mobile site, and you want to include your products front and center on your Shopify site. For this to really be effective, your products should be shot and presented in similar — if not exactly the same — ways.

Outdoor Voices uses consistent and high-quality product imagery.

Additionally, if you can show your product in use, it’s easier for customers to see themselves using it. More technical things to consider include:

  • Writing proper alt attributes that describe the image.
  • Compressing the image file size to be optimized for web and site speed.
  • Cropping the image to ideal dimensions for the specific placement you had planned.
  • Use the most appropriate file type, generally either .png or .jpg for Shopify product images.

Optimizing each image manually might take much time. Automate the process with TinyIMG and take advantage of other app features

Try TinyIMG for Free

Mobile page speed

Mobile page speed optimization could be its own blog post. In fact, we’ve written one. If you want to go really in-depth, go have a read of it. High-level — page speed is important because who wants to wait for a website to load?

People are impatient, so Google has found a way to measure and integrate site speed into how they rank websites in search results. With Shopify sites in particular a few of the top tips include:

  • Choose a lightweight theme
  • Compress and resize your images
  • Host videos externally

CTA buttons

For a Shopify store, generally you want people who come to your site to buy the products you’re selling. With your call-to-action (CTA) button, then, test having a fixed, or “sticky” CTA button at the bottom of your page, just like you have a fixed navigation bar at the top. For some audiences this is too much, for others, though, this is exactly what’s needed to prompt a purchase.

For CTA buttons, you also want to make sure your tap targets are optimized. Fingers can be clunky on phones sometimes, particularly your thumb, and you want to make sure people get to the page they should be.

Generally, buttons should be at least 48 pixels wide, with at least 32 pixels of white space on top and bottom, separating them from other elements on the page.

Kettle and Fire using a clearly differentiated and well-spaced CTA

Font size

Times New Roman at 12-point size is probably best left in the past. A larger font size (think between 14 and 16 pixels, or 1 rem if you’re using that) will probably better serve everyone.

Larger font size may mean changing how you lay out your mobile site. For example, if you had a smaller font size and multiple columns on a mobile screen, if you increase your font size, you may end up with only a few characters in a line per column. Not an ideal experience, so in a situation like that you’d probably want to change the layout of the columns so they stack on mobile but not desktop.

14px on Love Hair nourishing hair oil product page

Text amount

On the Internet, we tend to scan rather than really deeply read and take in information. This is particularly true on mobile. Because Google’s search results are based on the mobile site, you want to keep all of the information you have on your desktop site on your mobile site.

With that in mind, it’s probably best to design your content with mobile scanning in mind. Keep paragraphs short. Use elements like numbered or bulleted lists where you can. Video or animations can break up text and easily explain complex concepts.

If you want or need to include a lot of detailed information on your Shopify store, consider including it in accordions so people on your site aren’t immediately confronted by an unbroken wall of text about product or delivery details.

Pop-ups

We have one word for pop-ups on mobile sites: avoid. Think about it from a customer’s perspective, or even your own experiences when you’re shopping. Pop-ups can be a small bother on desktop, but for most of us, on mobile, they’re even more of a bother.

A lot of times they take up the whole screen, sometimes it’s hard to find how to close it, maybe you press the wrong thing and end up signed up anyway. It’s not fun.

So there’s no need to push this poor experience onto your own customers. Make things as seamless and easy as you can.

Layout shifts

Layout shifts can be a side effect of poor site speed or the use of extensive JavaScript on your Shopify site. Many of the recommendations we’ve already listed here, particularly around images, can help with reducing cumulative layout shift. Specifically, try to:

  • Set width and height on all images
  • Reduce image file sizes and makes sure they’re the correct dimensions
  • Try not to use pop-ups

Checkout page

While generally you want your entire website to be mobile-friendly, this is even more the case for the checkout. A few things to keep in mind when building your checkout:

  • Integrate with different payment options, not just ShopPay or PayPal
  • Keep the design minimal and make the buttons clear through strong contrasting colors
  • Only ask for the information you absolutely need. Not only is this respecting your customer’s privacy, but it also makes it easier for them to finish their purchase more quickly
  • Make the checkout button easy to find on your website.

Mobile forms

For many of us, mobile forms are a part of the primary conversion on our website. Sometimes that’s mobile forms in the checkout process, other times, it’s a registration of interest or contact form completion.

Regardless of where or when a form is on your website, you should keep mobile in mind when designing and building:

  • Break up form fields over multiple pages if you can’t have a short form
  • Correctly code different types of form fields and use them: radio buttons, drop downs, tick boxes. Anything that keeps a customer from typing too much will probably be helpful.
  • Keep the font size consistent (and large) across your entire mobile experience
  • Treat forms similar to CTAs, with a clear tap target and enough padding around each element.

Checking your Shopify store mobile optimization

While all of these changes are great, it’s likely worth running a post-launch sanity check on everything — sometimes your own eyes and your own experience is the feedback you need to check with your own eyes that what you’ve done works.

Some other, more technical and specific checks to run include:

  • Pagespeed insights: Comparing mobile and desktop speeds pre- and post- changes will help give a sense of how site speed is impacting your mobile experience.
  • Google Search Console: Under the Experience Report there’s a detailed report called Mobile Usability. If there are any mobile issues Google has detected it should be flagged here, and you can mark it as fixed so the page will be re-crawled.
  • Google Analytics: If you have Universal Analytics you’ll have a detailed report on Site Speed. Generally, the ability to add device type as a secondary dimension to all reports should give you the chance to drill down into mobile performance and compare it to your website benchmarks.
  • Google Mobile-Friendly Test: Google’s mobile-friendly test, while the actual “result” is a relatively basic Yes/No, you’ll see more detail around any issues you may not otherwise find in your scripting.
  • Your browser: The console in your browser is one of your strongest tools to debug and sanity check issues that could be affecting your mobile experience. Be warned, the device type emulator in the Chrome browser doesn’t always react in the way a device actually would, so if you can swing it, using something like BrowserStack as an emulator is a good second check.

Summary

The most straightforward way to optimize a Shopify site for mobile is to build it with mobile in mind from the start. That being said, follow these steps with an already existing site, and you’re well on your way to a mobile-optimized Shopify site.

If mobile accessibility and optimization weren’t a part of your process before, after this article hopefully it becomes a part of your day-to-day improvements and ongoing review.

About the author
Nikoleta Kokleviciute
Nikoleta is a Marketing Manager at TinyIMG, an app for image and SEO optimization for Shopify merchants. Nikoleta loves diving deep into digital marketing, eCommerce, social media trends, and creating content that benefits its readers!