This is the fifth and final article of our blog series dedicated to emerging trends that will shape e-commerce and Shopify in 2023 and beyond.
If you’ve missed our introductory guide and the other four articles of the series, now is the perfect time to read them:
- 5 Trends That Will Shape E-commerce in 2023 and Beyond
- E-commerce Trend 1: The Rise of Omnichannel Retail and Multi-channel Experiences
- E-commerce Trend 2: Long-term Customer Relationships Take Center Stage
- E-commerce Trend 3: Brand Identity Becomes Paramount
- E-commerce Trend 4: The Rise of Social Commerce
Today, we’ll talk about trend 5: The rise of mobile shopping. Let’s commence!
2022 Mobile Commerce Stats
- Retail m-commerce sales hit $359.32 billion in 2021, an increase of 15.2% over 2020. By 2025, retail m-commerce sales should more than double to reach $728.28 billion and account for 44.2% of retail e-commerce sales in the US.
- Despite historically suffering poor conversion rates because of customer frustration from having to check out on a small screen, smartphones have become the driving force behind m-commerce growth. US volume is poised to increase from $128.4 billion in 2019 to $553.28 billion through 2024.
If you want to keep up with these numbers, having a responsive website is not enough. You must deliver an outstanding mobile shopping experience. This will help you:
- Increase the rate of user attraction and customer acquisition
- Boost customer engagement and satisfaction
- Build brand loyalty
- Improve customer retention
- Increase your average order value and customer lifetime value (CLV), etc.
Today, we’ll show you how to optimize your Shopify store for mobile and deliver a stellar mobile shopping experience.
- Think mobile-first
- Improve your Shopify store’s speed
- Optimize your navigation for mobile
- Consider how you use text
- Let product photos do the talking
- Optimize your CTA buttons for mobile
- Simplify mobile form interactions
- Optimize your checkout for mobile
There are two things to consider in terms of mobile shopping:
- Only 12% of consumers find mobile shopping convenient. The most common issues shoppers face include websites not designed with small screens in mind, pop-ups and intrusive ads, and lack of information (Source: Dynamic Yield).
- Also, when people have a negative brand experience on mobile, they are over 60% less likely to become repeat buyers (Source: Tech Jury).
Smartphones are redefining what consumers expect from online shopping. Today, people expect a certain type of functionality that is uniquely tailored to mobile. To exceed their expectations, you must go beyond responsive design. You need to start thinking mobile-first.
What does this mean?
Responsive design means that the content of a website is designed to fit on different screens. Usually, the process involves designing for desktop first. As a result, the mobile version of the website may be a bit clumsy. For example, some images (especially infographics or tables) may not look so good, some pages may load slower, the checkout process may be too long or complex, mobile forms may be difficult to fill in, and more.
Mobile-first design involves designing for mobile browsing first. As a result, the mobile shopping experience is seamless. This leads to a lower bounce rate, higher customer satisfaction levels, and more conversions.
To sum up, responsive design involves designing for desktop and adapting for mobile. Mobile-first design involves designing for mobile devices first and adapting for desktop. To ensure your website loads properly on mobile devices and can live up to customer expectations and emerging e-commerce trends, you must follow some basic mobile-first design principles.
8+ mobile-first design principles
- Minimize the use of text. Ensure your formatting is clear and the content is easy to scan.
- Select a font that is easy to read on a smaller screen. Google recommends a base font size of 16 CSS pixels.
- Reduce the number of links in the navigation menu.
- Keep your borders wide and lines clean.
- Implement interactive elements.
- Ensure all interactive elements (such as buttons, links, live chat icons, etc.) are easily clickable. For example, customers shouldn’t have to zoom in to be able to click on a button.
- Optimize your Shopify store for the “Thumb Zone” - the screen surface area people can easily reach with their thumbs.
The term “Thumb Zone” was coined by Steven Hoober (a UX researcher and expert), who conducted a study to analyze how different people hold and use their mobile devices. According to the study, 49% of users depend on a single-hand grip for device support, and 75% interact with their mobile devices using just their thumbs. Learn more: Smashing Magazine, The Thumb Zone: Designing For Mobile Users
How to optimize your Shopify store for the "Thumb Zone"?
- Important website components (e.g., the navigation menu, CTA buttons, the shopping cart button, the checkout button, etc.) should be positioned in the “Thumb Zone.”
- Spacing is essential. There should be enough space between the different elements on the page - this minimizes the risk of users clicking on buttons or links they don’t want to click on.
- All clickable elements (e.g., buttons, links, tags, images, etc.) should be large enough to be tapped with a thumb.
- Consider both right-handed and left-handed users.
- Think vertically. Arrange your products to deliver a delightful shopping experience on mobile. For example, arrange your products in columns. The best practice is to keep the number of columns under two. Get inspired by ZARA’s beautiful mobile design:
Improve your Shopify store’s speed
The probability of bounce increases by 32% if mobile page load time goes from 1 to 3 seconds (Source: Google).
We have already discussed the importance of having a fast-loading website in our guide to page speed optimization for Shopify. Customers are impatient - when shopping online, they want to find what they need quickly and easily. This is especially true for mobile browsing since people usually use their phones on the go.
To ensure your Shopify store loads fast on mobile devices:
- Optimize your content for search intent & ensure you include only relevant information.
- Use HTML localStorage specification or automated mobile acceleration solutions.
- Ensure your images are the appropriate size and resolution to fit on mobile screens.
- Avoid using pop-ups. Even though they’re great for capturing emails and promoting sales or recently launched products, they’re difficult to close on mobile screens. This may hinder the shopping experience and frustrate your customers. Besides, they can negatively impact your page speed.
- Avoid using sidebars. Asides from slowing down your pages, they’re distracting, take up too much screen “real estate,” and can negatively impact the user experience on mobile.
When we use our phones, we’re constantly scrolling, swiping, tapping, etc. Everything happens quickly and in swift motions. That is why all essential page elements and business-critical information must be visible at all times. You can achieve this by integrating a fixed navigation bar into your design. Your fixed navigation bar should contain a CTA button, a link to your homepage, a link to the shopping cart page, and a link to the checkout page.
To deliver a better mobile shopping experience, you should simplify your navigation and create a smooth conversion path (with a limited number of actions). More specifically, you should:
- Reduce the number of navigational layers - on mobile, it is easy to get lost amongst various categories, subcategories, filters, tags, etc. The more complicated your navigation is, the higher the chances are that consumers will leave. So, keep it simple and stick to one level of nested content.
- Use a mobile-friendly menu alternative, such as hamburger menus. This will save space and help you deliver a better shopping experience. Here’s an example:
When you tap the hamburger menu icon, a secondary navigation menu appears. It contains all links from the header menu (displayed on desktop devices).
Consider how you use text
Mobile devices have a limited screen space. To catch your customers’ attention, you must present all essential product information in a concise, yet engaging manner. One way to achieve this is to minimize text and let your product photos do the talking. For example, your copy can be limited to your product name, product variant, price, a CTA button, and a short product description. You can use a collapsible menu that includes additional product information. To facilitate your customers’ buying decisions even more, you can use images to showcase all product features and characteristics. Get inspired:
Image source: ZARA
Also, text should be easy to read. Remember that a customer shouldn’t have to zoom in to read your product descriptions. The best practice is choosing a UX-friendly font between 14 and 16 pixels.
Last but not least, text and images should not overlap. Even though this may look good on a desktop computer or a laptop, it is difficult to read on smaller screens. Therefore, there is a risk that your customers will get frustrated and leave.
Let product photos do the talking
Mobile shopping is a visual experience. We already pointed out that the use of text should be minimal. In this section, we’ll explain exactly how you can leverage product photos and use them in a way that delights your customers, answers their most burning questions, and drives sales.
First and foremost, product photos should be the focal point of your product and category pages.
- Category page - Simple and sophisticated grid of beautiful product photos & limited copy. This is an excellent example of how visuals can simplify the website’s navigation and facilitate the decision-making process.
- Product page - Beautifully designed and easy-to-navigate photo carousel that displays the best product features and showcases the product from different angles.
Source: Frank & Oak
Second, use real product photos. In this way, you’ll be able to showcase the product features in a highly authentic manner. It is best to include photos that showcase the product in different settings - a neutral background (the classic product photo), a model wearing the product (if it is a piece of clothing or an accessory), showing the product in use (if it is an appliance, a tool), etc. If you have product variants, use real photos for each variant - this will help you deliver a more informed and seamless shopping experience that emulates the experience of shopping in a brick-and-mortar store. For example, people won’t have to wonder how a particular item looks in a different color. This will build confidence in your products and help you turn hesitant shoppers into first-time buyers. Also, it will reduce the number of returns, saving you time and money.
Pro tip: If you work with influencers, create a campaign with an influencer who loves the product (or, even better, collaborated with you in creating it). Then, add some of the influencer’s photos to your product pages. Showcasing such images on your website will boost consumer trust. Also, it will provide more context and create a powerful narrative that showcases your unique brand personality. Get inspired:
Your CTA buttons should be:
- Prominently placed above the fold and visible at all times. This is a way to constantly remind your customers to take action in an effective and non-intrusive manner. It is best to use a contrasting color that matches the overall aesthetics of your website - in this way, the button will instantly catch your customers’ attention, but it won’t look awkward, intrusive, or out of place. Get inspired: Scotch & Soda
- Easy to tap, i.e., customers shouldn’t have to zoom in to add items to their carts. The best practice is to design buttons that are large enough to be tapped with a thumb. Also, there should be enough space between the buttons, so that a customer doesn’t accidentally tap a button they don’t wish to.
- Your CTA copy should be straightforward (e.g., “Add to Cart,” “Buy Now,” etc.).
Simplify mobile form interactions
Complicated or long forms cause frustration and are a common reason for cart abandonment. To optimize your forms for mobile:
- Remove all unnecessary fields.
- Create descriptive form labels.
- Disable autocorrect on the “Name” and “Address” fields.
- There are several things to consider regarding spacing between the different fields. On the one hand, customers should be able to easily fill in each field (using their fingers). On the other, more space requires more scrolling which could hurt the overall user experience. Test different options to find the balance.
- Form fields should be in the “Thumb Zone.”
- The keyboard should automatically adjust to the field types. For example, you should have an alphabetical keypad for the “Name,” “Email,” and “Address” fields, and a numerical keypad for the “Phone number” and “Credit card information” fields.
Optimize your checkout for mobile
Mobile shopping carts have an abandonment rate of 85.65% (Source: Barilliance). A complicated checkout process is one of the most common reasons for cart abandonment. This is why it’s important to optimize your checkout for mobile. To do this:
- Reduce the number of steps a customer has to go through and the number of fields they need to fill in. Ask for relevant information only. The less your customers need to type, the higher the chances are they’ll complete their checkout.
- Place the checkout button above the fold. Ensure it is large enough to be tapped with a thumb. Use contrasting colors and a clear CTA. Note: In Shopify, you can personalize your buttons. For example, you can create dynamic checkout buttons and deliver a swift and seamless checkout experience.
- Integrate payment gateways.
- Offer a guest checkout option. More often than not, people are in a hurry to place an order. Or they don’t want to register. Or, maybe, they’re not 100% sure they want to place an order and any unnecessary step they have to go through is a reason for them to abandon their cart. Offering a guest checkout option will help these impatient and hesitant buyers convert.
Testing if your website is mobile-friendly is the final step of the mobile optimization process. These are the two most effective ways to find out if your Shopify store is mobile-friendly:
- Use Google’s Mobile-Friendly Test to check if your Shopify store is mobile-friendly. Just enter your URL in the “Enter a URL to test” field and click “Test URL.” Also, you can test code snippets.
- Use Google Search Console’s Mobile Usability Report to check your website for mobile usability issues.
Mobile usability will be essential in 2023 and beyond. To ensure your website looks well and functions properly on mobile devices, you must follow mobile-first design principles, ensure your Shopify store loads fast, optimize your navigation for mobile, minimize the use of text and put your product photos front and center, optimize your CTA buttons and checkout for mobile, and simplify mobile form interactions.
We hope this article will help you achieve all this. If you have further questions, just leave a comment below!
This is the last article of our blog series dedicated to emerging e-commerce trends. In the past weeks, we discussed the current e-commerce landscape and talked about 5 trends that are here to stay:
- The rise of omnichannel retail and multi-channel experiences
- Long-term customer relationships take center stage
- Brand identity becomes paramount
- The rise of social commerce
- The rise of mobile shopping
We shared valuable industry and Shopify-specific insight, best practices, actionable advice, and a ton of inspiring examples.
It has been an exciting journey! We hope it will inspire you and help you navigate the challenges merchants currently face! Also, we hope it will give you the insight and tools to future-proof your business, build a brand that lasts, and set yourself up for success in 2023 and beyond!
If you have any comments, recommendations, or simply want to share your experience, feel free to drop us a line!