Why you need to optimize your online store for mobile and how to do it

Fact: your Shopify store isn’t ready to launch until it’s optimized for mobile.

It's a safe generalization to say that the majority of online shoppers also have smart phones and frequently do their shopping via their mobile devices. In the last few years, mobile-friendly website design has graduated from a nice-to-have to a must-have.

If you’re thinking, “I bought my theme from the Shopify theme store, so I know it’s mobile-responsive,” then yes, you’re right! You’ve taken a great first step toward mobile ecommerce success. But mobile responsiveness doesn't always mean mobile optimization.

Beyond just choosing the right theme, there are plenty of tactics you can employ to improve your store’s mobile experience. Grab your phone, pull up your Shopify store, and let’s go over five different ways to optimize your customer’s experience and drive more mobile sales over the holidays.

Choose a mobile-friendly Shopify theme

As mentioned, if you’ve purchased a premium theme from the Shopify theme store, you’re off to a great start. Without implementing any customization, your store should be guaranteed to translate beautifully from desktop to tablet to mobile.

If you decide to dabble in theme customization, always check to see how it looks on both large and small screens. Often this work is done on a desktop, and as you dig in it can be easy to forget about the mobile side of things.

If you want to get ahead of the curve and offer a true mobile-first shopping experience, we’ve created a few themes that cater specifically to handheld devices. Pixel Union's Handy and Reach Shopify themes are designed with the mobile experience top of mind, as is Out of the Sandbox's Responsive theme.

Ensure a smooth checkout experience

Add-to-cart buttons must be displayed front and centre on your product pages while being viewed on a mobile device. The last thing you want is your customers getting lost trying to buy something from you. Make it easy.

As a customer browses your mobile store, they’re going to follow a natural path scrolling through products, watching videos, reading about your company, and so on. Don’t force them into places they don’t want or intend to go.

When tapped, your add-to-cart button should place the product in the customer’s cart, subtly let them know it’s there, and allow them to continue browsing.

Ensuring a smooth checkout experience is important on desktop, but it’s extra-important on mobile. Not all customers are used to shopping on their phones, so do everything you can to make the entire process as clear and easy as possible.

Minimize text on product pages

While your desktop store may have the perfect amount of white space, beautifully written product descriptions, and eye-catching text embedded in photos, it doesn’t always translate to an optimal mobile experience.

There a few key pieces to consider when minimizing text on your product pages. Ask yourself, “Is the written content on this page absolutely necessary to converting customers?” If it’s not, axe it.

If possible, cut down your product descriptions to include core information only. This stops your customers having to scroll down your page.

If you have overlaid text embedded in images, consider removing it for mobile and have the text sit under the photo. This will help with legibility as your customer’s screen size shrinks.

Finally, if the layout of your product page seems cluttered on your mobile store, find a more mobile-friendly Shopify theme that keeps important content at the forefront (like your add-to-cart button) and sorts the rest neatly below in a prioritized order.

Lower your store’s load time

If your online store isn’t loading quickly (like 0.5-2.0 seconds quickly) you’re losing traffic and ultimately sales. Amazon claims they would lose $1.6 billion annually if their average page load time increased by one second. That’s a lot of dough. As soon as your store’s load time spans over three seconds, the probability of a user leaving immediately jumps from 32% to 80%.

Images and videos are the main culprits when it comes to increased load times. The very things that make your store so beautiful and engaging could be working against you. While Shopify automatically compresses your images, it’s important to test load time on your store. The best tool for this is Test My Site by Google.

If you find your page load time isn’t up to snuff, consider removing some images, compressing images manually (this can ensure quality as well), or embedding a video link rather than hosting it.

Prioritize your navigation

How many levels of navigation does your menu house? Shopify’s enhanced nested navigation experience is a true game-changer. Introduced in early 2018, the improved backend now allows Shopify merchants to organize their front-end menus in a simple drag-and-drop way.

With so many navigation options, it’s easy to get overly enthused and build a menu that feels like a complex spider web. While this may work well on large screens (though often not), it’s more likely to cause problems on small ones.

Edit the mobile menu in the backend of your Shopify store to provide your customers with a seamless shopping experience. Keep the most important pages at the forefront of your navigation, nest the less-important pages, and cut any that aren’t essential to your sales. If you have campaign-specific pages or sales, be sure your customers can find these easily.

Find more helpful articles in The ultimate guide to starting an online store.