How To Optimize Your Shopify Store for Mobile

According to a recent EMARKETER forecast:

• Americans spend an average of three hours and 15 minutes per day on their phones.
• The total value of online retail orders placed on mobile devices in the US will reach $558.29 billion in 2024.
• Mobile commerce now represents 44.6% of ecommerce sales and 7.4% of all retail sales in the US. 

In other words, if your Shopify store doesn’t work well on mobile devices, you will likely miss out on many potential sales.

Also, Google reports that mobile-friendly sites tend to show up higher in their search results. So, if your store isn’t optimized for mobile devices, fewer people are even going to find it in the first place.

In order to help you reach more customers and make more sales, this guide will cover everything you need to know about Shopify mobile optimization. 

Maximizing Accessibility on Mobile Devices

About 16% of the world’s population has a significant disability. Making sure that your mobile site is accessible to everyone helps promote a positive brand image, and it allows you to reach more potential customers as well. 

Here’s how you can fix a few of the most common mobile accessibility issues:

• Font size: Visitors with poor vision may have a hard time reading content on the relatively small screens of mobile devices. You can help them out by using a large default font size for your mobile site. 
• Tappable elements: Small screens can also make it difficult to navigate your site if you’re not careful, especially for users who have trouble making precise finger movements. Make sure the tappable elements on your store, such as product customization options and Buy Now/Add to Cart buttons, are large enough to easily click. And whenever multiple tappable elements are located near each other, such as in your site menu, add a decent amount of inactive space between each element to help prevent people from accidentally clicking on the wrong option.
• Modals and overlays: The more simple and streamlined you make your mobile site, the more accessible it will be to everyone. Modals, overlays, and other pop-up elements disrupt the user experience, and they can be hard to close for users who may already struggle to navigate a site with their thumbs. Avoid using these elements whenever possible.
• Meta descriptions: Many people with visual impairments rely on screen readers to use the internet. These software programs convert written text into audio — if your images aren’t paired with a meta description, such users will have no way of understanding what’s depicted in them.  
• Data entry: Certain disabilities can make manually filling in data quite time-consuming. To speed this process up, you can use features such as select menus, radio buttons, or checkboxes instead of form fields. When form fields are necessary, enabling autocomplete suggestions will help.

Best Practices for Mobile Page Structure

Page design for mobile devices calls for a much different approach than desktops. When editing your mobile view, you should follow these established best practices: 

• Margins and padding: For your site to look good regardless of the size of the visitor’s screen, you’ll need to set the margins and padding for page elements as a percentage rather than a set number of pixels. 
• Containers: Adding content within containers first before creating pages will help ensure that everything is formatted correctly. 
• Columns: You should only use one column of content on your mobile site in order to avoid unreadable text wrapping. When stacking these columns, carefully consider the information hierarchy — the most important elements should be prioritized at the top, and the columns should be properly ordered so that all the information and context needed to understand each column is included above it. 
• Accordion sections: The small screens of mobile devices don’t give you much room to work with. By using accordion sections and other expandable elements, you can provide a lot of information without making the page too crowded. Just make sure that these elements are collapsed by default — that way, the visitor will be able to expand the information they’re interested in while everything else remains hidden from their view.
• Less is more: As mentioned above, simplicity is the key to mobile design. On the desktop version of your site, there’s enough room to include just about everything you can think of that might help you inform and persuade visitors. You should consider dropping the less important elements entirely (or at least streamlining them considerably) for the sake of usability. For example, instead of including all of your shipping and return information on every product page, you could include a link to one separate page that details these policies.

Navigation and Site Structure for Mobile

In most cases, offering a small hamburger menu icon at the top of each page is the best way to set up the navigation system on your mobile site. This will allow you to offer a wide variety of navigation options without adding any clutter, as these options will be hidden unless the visitor decides to open the menu. 

Yet again, it’s important to note that the mobile version of your Shopify store should be as streamlined as possible. Once the menu is open, you don’t want to overwhelm the visitor with too many options — consider eliminating or consolidating some of the menu items for your mobile experience.

Of course, you don’t want to go too far and get rid of options that often lead to a purchase. Whether it’s through your mobile homepage or a hamburger menu item, it should be easy for the visitor to perform key actions such as searching for a product or finding your store’s contact information. 

There are many Shopify themes available that allow you to have different menus for the desktop and mobile versions of your store. To demonstrate, here’s how you would do this in the Prestige theme.

Step 1. After logging in to your Shopify store, select the sales channel that you would like to customize in the left sidebar of the main menu. 

Step 2. Select the “Customize” button next to the theme you would like to edit. 

Step 3. Select the “Header” section.

Step 4. In the settings for this section, you’ll find an option for “Mobile menu” — hit the “Select menu” button. 

Step 5. Here, you can select a menu that has already been created or create a new menu. 

Choosing to create a new menu will take you to the “Add menu” section of the Shopify dashboard, where you can add each menu link and label text one-by-one.

Optimizing Images for Mobile Devices

According to Google, 53% of mobile users will leave a site if it takes longer than three seconds to load. If your mobile experience is sluggish, a lot of people who otherwise may have placed an order will just back out instead.

To improve performance, pay especially close attention to your images, as these are usually the largest files on websites. The best practices for image optimization include:

• Consider whether each image is truly necessary for the mobile version of your site. 
• For each image that you decide to keep on the page, convert it from the JPG or PNG file format to WebP if you haven’t done so already. WebP files are significantly smaller, and you won’t lose much image quality in the conversion process. There are many free online tools available for this purpose, such as CloudConvert. 
• Rather than loading the entire page immediately, you should only initially load elements located above the fold. If the visitor scrolls down, you can set it up so that elements will load as they come into the visitor’s view. This practice is known as lazy loading, and it’s especially helpful for demanding resources like images.

Beyond performance, you should also make sure that your images are responsive, which means they will automatically adjust to the screen size of the visitor’s device. Most of the options on the official Shopify Theme Store are responsive by default, but those using a theme from a third-party marketplace may need to edit their site code to make their images responsive. 

Optimizing Page Copy for Mobile Experiences

As with the number of features and images on your mobile site, the number of words should also be as streamlined as possible. Be concise. 

Also, a generous use of subheadings and bulleted lists will make your content easier to read. And in addition to using a large enough font, make sure there is a stark contrast between the font color and the background color. 

Which font are you using, anyway? Some of the more decorative options out there, like serif fonts, can be hard to read on small screens. Instead, use a simple font with clean lines for your mobile site. 

Making Mobile-Friendly Store Designs With Shogun

Shogun’s user-friendly interface and powerful features will allow you to make your Shopify store pages optimized for mobile. 

First of all, Shogun makes image optimization easy:

• Images are converted into the WebP file format when uploaded. 
• Lazy loading is enabled by default — images located within the first 700 pixels of page length will load immediately, but everything below that will only load on demand.
• Shogun uses a content delivery network (CDN) that automatically adjusts images for the size of the visitor’s device (e.g., if the visitor is on mobile, Shogun will serve up smaller versions of large images to minimize performance impact).

It’s also easy to edit the mobile version of your site in Shogun. 

To access Shogun’s visual editor, simply open the app and select the page you want to customize. 

You can use the screen view buttons located near the top of the page to toggle between different preview options (four views are available: desktop, laptop, tablet, and smartphone). 

With the smartphone view selected, you can see how your site will look on this type of device as you make your edits. 

The visual editor’s element library provides you with all the tools you need to build exceptional mobile experiences. 

The “Structure” elements will enable you to follow the best practices for mobile page design described above, such as using containers for your content, arranging content in one vertical column, and adding accordion menus to save space without sacrificing valuable information. 

Indeed, once you’ve added a “Column” element to the page, you can toggle the “Stacking on smaller screens” option on — columns will then stack one on top of the other when viewed on mobile devices, as long as there are three or fewer columns. This allows you to have parallel columns on your desktop and laptop versions, where such a design choice makes more sense, while at the same time maintaining one vertical set of columns on mobile. 

You can also use the settings here to customize the order of the columns (i.e., whether the stack starts with the left-most or right-most column).

To ensure that an image is responsive, you just need to check that the “Responsive image” setting for the “Image” element is toggled on. 

Whenever necessary, you can manually adjust the aspect ratio of an image as well — this can help reduce cumulative layout shift and minimize disruptions to the mobile user experience. 

Many elements have an “Edit on:” setting, which allows you to make styling choices that will be shown on some types of devices but not others. 

Finally, you can use Shogun’s Insights feature to make sure you’re not forgetting any important aspects of mobile design before you publish your page. 

The Insights tool will grade your page on four different factors: Accessibility, Best Practices, Performance, and SEO. If your score in any of these areas is less than perfect, Shogun will tell you exactly what’s wrong and how to fix it. 

Here are a few of the potential issues that you may be alerted to through Shogun Insights:

• Buttons too small: If there are any buttons on the page smaller than 48×48 pixels, that will bring down your score. 
• Font too small: If the font size of more than 40% of the text on the page is smaller than 12px, that will bring down your score as well. 
• Images aren’t responsive: You won’t get a perfect score if you forgot to toggle the “Responsive image” option on for any of your images. 
• Incorrect aspect ratio: One or more images look stretched and need to be adjusted.
• Poor color contrast: You don’t have a contrast ratio of at least 4.5:1 for small text or 3:1 for large text.