How to Make Your Shopify Store More Mobile-Friendly
According to Statista, the share of mobile retail commerce sales in the overall U.S. retail e-commerce sales in 2019 amounted to 44.7%, while in 2021 it’s expected to reach the whopping 53.9%. Needless to say, that every e-commerce website owner should be thinking about optimizing their store for the current or potential customers with handheld devices.
Shopify is an excellent platform when it comes to providing smooth mobile user experience. Every theme you can find in the Shopify store is fully responsive, meaning that it adapts to the screen size of the device on which it is rendered.
That said, if you want to make your Shopify store truly mobile-friendly, responsiveness alone is not enough. There are many more things you should give thought to in order to turn your website into a truly mobile-ready application. Here are some of the biggest problems that an improperly optimized mobile e-commerce site may bring:
- Low SEO rankings. A mobile-friendly website is favored by the search engines, especially Google. On July 1, 2019, the tech giant introduced the mobile-first indexing. In compliance with this new algorithm, mobile-optimized content receives a higher ranking when the search is performed on a mobile device. If you’re friends with Google, customers are more likely to find your site. Otherwise, expect to sink into oblivion.
- No/poor sales. Even if someone comes across your non-mobile-friendly Shopify site and starts browsing it on their Android or iOS-powered device, they may quickly lose interest if it’s hard to navigate, slow to load, has too much text, or presents other annoying obstacles to normal user flow. Inevitably, a drop in sales will follow.
- Damage to the brand image. Saddest of all, your brand image will suffer. The most valuable business tool — word of mouth — will break. No one will want to recommend your brand after having to struggle with your store’s mobile version. What’s more vital for a business than its image? Lose it, and you’ll lose everything.
The good news is that you can avoid all those troubles if you follow the essential guidelines we’ve prepared for you.
HOW TO MAKE YOUR SHOPIFY STORE MORE MOBILE-FRIENDLY
#1: Optimize Your Tap Targets
Have you ever tapped a button in a mobile app just to select another one next to it? Very irritating, isn’t it? Defining the correct dimensions of your tap targets is extremely important from the UX point of view.
Ideally, you should make all buttons or images wide enough to be tapped with a thumb. You should also determine the optimal distance between your tap targets. This post in Smashing Magazine gives a very good insight into this aspect of mobile development. While different vendors suggest different sizes for buttons and other tap targets, we recommend making their width 48 pixels or more and separating them by at least 32 pixels of white space.
Remember to test your app properly. Ask your coworkers, family members, or friends to tap the buttons and give you feedback.
#2: Simplify Your Navigation
Limit Your Menus to One Level of Nested Content
It’s so tempting to give your customers as many options as you can so that they can have the widest choice of products or services to purchase. Moreover, since 2018, Shopify merchants can construct menus by simply drag-n-dropping the necessary items.
However, this can have a reverse effect. Users may get lost in a multitude of options and suboptions and simply quit your site. That increases the bounce rate and may cost you very dearly from the SEO perspective down the line.
Our recommendation is to review your navigation structure carefully and sort your pages into more and less important ones. Leave what is really crucial for your business and add that to the menu. Keep one level of nested content only. That’s good for both search engine bots and for your users.
Read this post to learn the best way to organize your navigation structure.
Reduce the Number of Navigational Layers
Even with powerful processors in smartphones that make them super fast, it’s still important to have as few navigational layers on your mobile site as possible.
After the sixth or seventh tap on the screen and still not seeing what they want, the most patient of consumers may say, “Thank you. I’ve had enough,” and exit your site without buying anything. Again, the bounce rate suffers. Search engine rankings plummet.
Make Your Menus Invisible
The biggest limitation of mobile devices in the lack of on-screen space. You have to be very resourceful in how you use it. Why keep all those menus in sight? You can make them invisible by tucking them under a toggle menu button. This may take several forms:
Users can click on a button like this to expand and collapse the menu. That frees up a lot of space on the small screen of a smartphone or tablet and contributes to better user experience.
#3: Consider How You Use Text
Make Your Font Large
Despite a limited amount of space that mobile devices provide, you still need to give users important information about your offerings. A small font is hard to read and may discourage visitors from continuing to shop on your site. We recommend choosing a font between 14 and 16 pixels and scaling it within the viewport.
Go for Conventional Fonts
Unless you absolutely need a fancy font like this to describe your products or services, use conventional fonts such as Arial. Why? Users may not have the non-standard font you’ve chosen and will have to download and install it on their gadgets. That deals a blow to your site’s speed, which is one of the major causes of the bounce rate growth.
Cut Down the Amount of Text
Again, you’re facing a tough challenge, we understand. You need to give as many details about your offerings as possible within the tiny area of the viewport. Therefore, you must leave only the indispensable information on the product pages: what an item is called and how much it costs, plus a CTA button.
How can you give more details? We recommend two main methods:
- Display them after a user clicks a photo or image
- Toggle them with a hamburger, three dots, or caret menu button
Remove Overlaid Text from Images
Most banner ads on websites have overlaid text integrated into their code. If you leave a banner like this unchanged and use it on a mobile device, your users are likely to have a hard time understanding your message as the viewport gets smaller.
To solve this problem, we suggest that you extract the text from the code of a banner and place it underneath.
#4: Keep Your Call-to-Action Button Visible at All Times
The main purpose of any e-commerce site, whether web or mobile, is to sell products or services, obviously. Visitors should be mildly but constantly pushed to making a purchase. While you have plenty of space to display the buy button on every page of a website on desktop, you don’t have as much room on a mobile device.
The best way to handle this issue is to have a fixed CTA button whatever place a user is currently on. Just keep it prominently displayed at all times. Who knows? Seeing this button, perhaps a customer will even purchase something they weren’t looking for, thus increasing your sales.
#5: Always Keep the Main Navigation Bar in Sight
Users scroll or swipe to view the information on a mobile site. While using gestures is great from the UX point of view, it may have negative effects as well. What if someone swipes too quickly and misses the description of your best-selling product? The chance that this visitor will return is minimal.
One way to make sure that users always see business-critical information on the screens of their mobile devices is to fix the main navigation menu. What items you add to this menu is up to you. However, we recommend having at least a call-to-action button, a link to the homepage, and a link to the checkout.
Optimizing a Shopify website for use on mobiles is not something you can ignore. An online store that’s not mobile-friendly is bound to lose SEO rankings, experience a drop in sales, and spoil a business reputation. That’s why we encourage you to apply the optimization techniques described in this post.
If this work seems overwhelming to you, we’re always close by to give you a helping hand. The PSD2HTML experts have numerous successfully completed Shopify projects of different complexity levels. Contact us for custom Shopify theme development, app integration, and other tasks.