Mobile Ecommerce Design Trends: 11 Best Practices to Optimize for Mobile-First Sales

Mobile Ecommerce Design Trends: 11 Best Practices to Optimize for Mobile-First Sales

When it comes to mobile ecommerce design trends, we know two things.

First, mobile-friendly sites are all but universal.

As of March 2017, “80% of top Alexa sites were mobile adaptive.” Likewise, mobile sales — e.g., “M-commerce” — are outpacing traditional ecommerce growth by 135.3%: 17% year-over-year compared to 40%.

Unfortunately, there’s a second thing we know …

Mobile design isn’t enough to capture mobile sales.

Despite the majority of Internet users preferring mobile over desktop browsing — and, despite mobile commerce’s incredible YoY growth — the majority of online sales still take place off of mobile devices.

It’s a painful disconnect for both merchants and shoppers alike. During 2017’s online holiday shopping season, Adobe Digital Insights found that while desktop accounted for 44% of all traffic, it still commanded 61% of sales:

The divide between mobile ecommerce and desktop ecommerce remains

Those same skewed ratios are reflected in industry-wide data as well … except on Shopify.

Over Black Friday, Cyber Monday, Shopify saw mobile account for 64% of all sales, “an increase of 10% year-over-year.”

Mobile ecommerce surged during Black Friday, Cyber Monday on Shopify

What explains this difference?

In some cases, the answer lies in platform-agnostic mobile ecommerce best practices. In others, we’ll get specific with a few in-house advantages of mobile optimization on Shopify Plus.

Regardless of your current platform, here are …

1. Start with Ecommerce, not Mobile Design Trends

First things first, “responsive design is not mobile optimization.” That was the thesis — and headline — of Shanelle Mullin’s masterful 2017 article on ConversionXL. Within the piece, Talia Wolf offered this distinction:

“Though responsive design is much better than having to ‘pinch-and-zoom’, it isn’t an optimized experience for mobile visitors.

“At its core, responsive design makes the desktop experience look good on mobile, but it doesn’t address the specific needs of mobile visitors.”

In the case of ecommerce, a caveat is in order. While the “needs of mobile visitors” must certainly be respected, what matters is marrying their needs with your own. Afterall, a delightful user experience (UX) is worthless if it doesn’t culminate in sales.

At the enterprise level, it’s easy to get seduced by mobile design trends, instead of investing in proven optimization tactics. How can you unearth the difference?

You start with what the very best are already doing right.

On this front, perhaps the best summary of the industry’s current best practices is Inflow’s Best In Class Ecommerce Mobile Report, which includes a downloadable matrix of the top ecommerce brands and how they stack up across a host of mobile design and optimization criteria:

Chief among their insights are two tips … a don’t and a do.

Don’t use hero slider images: 

“Long despised by CROs everywhere, it looks like the rotating hero slider is finally going away. This year’s list sees only 2 sites still rotating the hero banner, down from 7 last year.”

Nike follows both mobile ecommerce design trends as well as optimization best practices

Despite an enormous product catalog and constantly changing digital initiatives, Nike does not use hero slider images

Do use a top navigation menu:

“Having a top nav on mobile is something only a few innovative sites are doing. … The Inflow conversion team has tested this all last year and it has yet to not work.”

On mobile, Frank Body utilizes (1) a fixed navigation bar in the header, (2) a retracting footer navigation for top collections, and (3) an extendable slider navigation on the side

2. Use Progressive Enhancement as Your Backbone

Mobile design is achieved through two main paths.

Along the first, you start with a full-screen desktop experience and trim down for screen sizes through a process known as graceful degradation. Along the second, you begin with the smallest, most foundational elements of your UX and work your way up.

The second process is known as progressive enhancement or adaptive design. For illustrative purposes, Tiffany Tse (a Front End Developer Advocate Lead) likens progressive enhancement to the layers of a cake: (1) HTML, (2) CSS, and (3) JavaScript. 

Progressive enhancement should be the backbone of your mobile ecommerce design

The bare-bones version, which is built to work on absolutely every conceivable platform, is loaded first — e.g., HTML. Then additional styling and functionality — CSS and JavaScript — are added as the browser and screen sizes allow.

Graceful degradation vs progressive enhancement is an undervalued mobile ecommerce trend

Graceful degradation (top) versus progressive enhancement (bottom)

As Tse explains:

“Progressive enhancement is a development approach, not a technology choice. You [or your] developer, decide on a base level of user experience for your site or application, and more advanced functionality is added if a browser supports it.”

For a detailed examination of progressive enhancement, take a look at What is Progressive Enhancement and Why Should You Care? 

A better end-user experience significantly impacts mobile usability, but progressive enhancement can dramatically impact the next best practice as well.

3. Tune-Up for Fast Mobile Page Speeds

While it’s not the most exciting topic, decreasing a site’s load speed matters for attracting, acquiring, and keeping customers. After reviewing a dozen case studies, Skilled found that site performance affects a host of ecommerce metrics:

Mobile ecommerce design and site performance affect key metrics

Mobile design maintains the aesthetic of its desktop counterpart, but in many cases, it fails to optimize behind-the-scenes elements that unnecessarily eat data. The result is a beautiful experience that visitors pay for in lengthy load times.

Not only do nearly 60% of Google search results now come from a mobile device, just this month Google officially announced that “starting in July 2018, page speed will be a ranking factor for mobile searches.” All this means …

The costs of slow load times add up fast.

We’ve written extensively about how to improve speed and site performance here on Shopify Plus, and it’s no accident the very first step in that cornerstone guide reads: “Start by Testing Your Mobile Performance.”

For mobile ecommerce, test your site with PageSpeed Insights

Google PageSpeed Insights is the perfect starting point to test not only your own site but your competitors as well. If you’d like a detailed checklist to follow, simply go to How to Improve Ecommerce Site Performance: 10 Steps to Faster Page Speed and Better Sales.

The bad news is that better UX and faster speeds — responsive design — don’t necessarily translate into more sales — optimization. And that’s where we turn next.

4. Anticipate Omni-Channel Shoppers in Mobile Ecommerce

Strange as it sounds, a sub-par mobile ecommerce experience could deter customers from purchases -- even when those customers are shopping in a store.

A new Forrester Research report reveals that “by 2021, mobile devices alone will influence $1.4 trillion in local [retail] sales.”

Likewise, the Harvard Business Review found in an exhaustive study of 46,000 shoppers:

“Only 7% were online-only shoppers and 20% were store-only shoppers. The remaining majority, or 73%, used multiple channels during their shopping journey. We call them omnichannel customers.”

Even more to the point, HBR noticed a trend:

“Our findings showed that omnichannel customers loved using the retailer’s touchpoints, in all sorts of combinations and places. Not only did they use smartphone apps to compare prices or download a coupon, but they were also avid users of in-store digital tools such as an interactive catalog, a price-checker, or a tablet.”

Mobile commerce lies at the heart of an omni-channel retail strategy.

Mobile ecommerce lies at the heart of omni-channel retail

For instance, Upstream Commerce Retail Intelligence found that “88% of shoppers say that they prefer to ‘webroom’ or research purchases online and then buy them in-store.” The main reasons for this online-to-offline behavior were to “find the lowest price” and “compare product” features.

Alternatively, “76% of shoppers say they regularly research products in a brick-and-mortar store before ultimately buying online.” The top reasons for offline-to-online were to “find the lowest price” and to “avoid a checkout line.”

Regardless of the direction your customers move in, bear in mind that 60% of internet users “start shopping on one device but continue or finish on a different one, and 82% of smartphone users say they consult their phones on purchases they're about to make in a store.”

Mobile ecommerce drives in-store purchases

Image and data via Think with Google

Aligning your in-store experience with mobile shopping, whether you follow the examples of outstanding omni-channel brands or go the way of stand-alone pop-up shops, is critical. Using QR codes, mobile-specific comparison pages, geo-fenced SMS coupons, and prioritizing FAQs on mobile are just some of the methods both large and medium organizations are doing this.

Many are also turning to mobile-enabled in-store checkouts and mobile wallets.

Long lines in-store can be a major drag. Mobile point of sale (POS) devices — like PayPal, Square, and Shopify POS — offer an easy-to-use and cost-effective solution.

In the case of mobile wallets, the big three (Apple, Google, Samsung) all use NFC (near-field communication technology for making payments. It works by simply tapping your NFC-ready phone on NFC enabled payment terminals.

From an ease and cost perspective, there are no clear-cut answers. For NFC, you’ll need to get new terminals to have support as well. In most cases, the price of the terminal stays the same or you pay a premium that is ~$50. Bulk pricing also brings down costs.

So far, these omni-channel strategies have revolved around in-store applications. The demand to merge retail and mobile, however, also extends to before your customers step inside.

5. Factor in Local Search Behaviors

When it comes to comparison shopping and impulse buying, mobile devices and local search go hand-in-hand. In fact, a recent Google study found that

50% of smartphone users are most likely to visit a store after conducting a local search.

Plus, “34% of tablet and desktop users will also buy in-store after a local search on their smartphone.” 

There are some important steps you can take to offer a convenient mobile shopping experience and ensure that your products and services are showing up in local, mobile searches.

Some experts recommend offering solutions like a “quick snapshot of your prices on a mobile landing page,” or “a ZIP [or postal code] box to generate a map to your closest store locations.”

Also, don’t forget to include your phone number in any Google Ad Words campaigns via call extensions. That will make it easier for customers to call you about local store promotions that you are advertising when they are searching nearby.

Creating Google+ brand and local pages (which can now be merged together) is also an important factor for increasing the likelihood that your business appears higher in local search rankings.

That’s because Google gives ranking priority to its own properties (like Google+, YouTube, etc.) in its search results. Google has strict guidelines on how to complete a local business profile which you can check out here.

In addition to optimizing your own website and Google+ pages for local, mobile search, you should pay attention to local review websites. According to a survey by Influence Central:

“90% of consumers think the information they get from reviews is more important than talking to a salesperson.”

Of course, catering to omni-channel shoppers and factoring in local search are smart best practices for retailers blending physical commerce with pre-purchase mobile touchpoints.

What about mobile ecommerce optimization at the moment that matters most?

6. Offer Native Mobile Ecommerce Checkouts

Not to be melodramatic, but mobile ecommerce lies or dies at the checkout. If only a small percentage of your online sales are coming from mobile users, you may need to refine your checkout process.


By following the golden rule: less is more.

As far back as 2012, Econsultancy advised merchants “to make the purchase journey as short as possible.” Today, that principle is even more foundational: fewer clicks, fewer screens, fewer fields, fewer taps, clicks, and swipes all add up to one thing: more customers.

Here’s where we turn to a few in-house advantages on Shopify Plus.

Ideally, once a user enters your mobile-checkout process, they should be presented with mobile-first payment options that enable them to purchase in a single click. On Shopify Plus, you can do this through:

  1. Shopify Pay
  2. Apple Pay
  3. Android Pay
  4. PayPal
  5. Amazon Pay

Offering all five at once can be overwhelming. For first-time customers, include only those options that are most popular among your existing customer-base.

MVMT's mobile checkout goes beyond mobile ecommerce design

MVMT Watches’ mobile-optimized checkout does more than just display beautifully; it also defaults to two of the most-popular mobile-payment methods

This doesn’t mean you should skip traditional logins and credit cards, as long as those methods have proven themselves as attractive to mobile shoppers:

Urban Planet’s mobile checkout begin with offering shoppers a choice between PayPal, logging into their account, or utilizing Shopify Pay

Shopify Pay is another competitive advantage. During Black Friday, Cyber Monday, over 400,000 people spent over $30 million 3x faster using Shopify Pay.

Shopify Pay's mobile-first approach is a perfect fit for the future of ecommerce

Lastly, Shopify Scripts — which lets you customize and personalize the entire cart-to-checkout process — can be used to show, hide, reorder, or rename payment methods during the checkout based on products in the cart, customer group or tag, a customer’s shipping address, or their device type:

7. Connect Social Marketing with Social Selling

The average digital adult spends 5 hours a day on their mobile devices. And the majority of internet users are now accessing social networks on their smartphones or tablets.

In fact, SmartInsights reports that global numbers for active mobile social media users are almost the same as the number of overall social media users worldwide at 2.549 Billion versus 2.789 Billion respectively.

That’s why it’s imperative that you invest in a mobile promotion and advertising strategy to increase mobile traffic and conversions on your native social selling channels like Facebook shops, Shopping on Instagram, Buyable Pins, and marketplace communities like Houzz.

For example, Shopify Plus customer MVMT Watches launched a Facebook Shop in 2014 -- around the time that mobile usage surpassed desktop users for the first time. The company saw its mobile usage increase to 60% almost overnight.

The MVMT team wanted to “cut out steps in the purchasing process” and make it easier for social media users to buy directly via their favorite social networks -- so they could capture more sales, rather than losing a customer once they leave to visit an external site landing page.

When MVMT first launched its social commerce effort on Facebook by opening a shop at the top of its page, the results were encouraging:

  • 1,500 people visited MVMT’s Facebook shop in a week
  • A .5% conversion rate (which doubled once people got comfortable buying via their phones) resulted in more than $15,000 in revenue MVMT might otherwise not have gotten

But MVMT couldn’t have achieved these results without Facebook ads. The company also runs promoted pin campaigns which initially resulted in a 2x lift in conversions and higher average order values than other traffic sources. Facebook and Pinterest together now drive a huge source of MVMT’s mobile traffic.

To launch your own mobile-optimized social sales channel, simply log into your Shopify Plus account and follow the steps outlined here to add a platform like Facebook Shop as a sales channel. In order to then drive paid mobile ad traffic to your social sales channels, check out this helpful article on How to Master Cross-Device Ad Targeting.

8. Create Mobile-Only Personalized Experiences 

The mobile web is both a blessing and a curse for ecommerce merchants. Users have short attention spans and are easily distracted by text messages and social media notifications — or whatever hilarious thing the barista just said in their favorite coffee shop.

To stand out, create personalized user experiences that help keep their attention long enough to convert them into buyers.

Here are a few recommendations from Shopify Plus partner Dynamic Yield:

Optimize Page Layouts For Traffic Sources

On a mobile device, you need to help customers find exactly what they’re seeking in just a few seconds — while using less real estate than on a desktop to make your sales pitch.

Personalizing product recommendations based on the traffic source of new visitors is a smart strategy.

If a user arrived on your homepage after a search for hockey equipment, consider moving product recommendations for hockey players higher above the fold to help with relevant product discovery.

When visitors enter your URL directly or arrive at your site via a generic search, you can use Tinder-style product discovery widgets on your homepage to quickly introduce users to popular products.

Personalize Free Shipping Messages for a Visitor’s Location

A simple, yet emotionally impactful way to personalize a user’s experience on your site is by identifying their IP address to deliver custom free shipping offers.

For example, when a user adds items to their cart on your site, a message can dynamically adapt to reflect the value of items relative to the free-shipping threshold.

If the first message displays “FREE SHIPPING to TORONTO with a $50 purchase” and a user adds a $25 product to the cart, it’ll change to “YOU’RE $25 AWAY FROM FREE SHIPPING” to encourage users to buy more.

Personalize Promotions Based On a User’s Device

There’s a lot that you can glean from identifying the type of device from which a user is visiting your site. For example, data from Black Friday 2016 revealed that iOS users for a large outdoor merchant’s site spent about $110 on average while Android shoppers had an AOV of around $85.

In this case, the merchant could display a 20% off coupon for orders larger than $100 for Android users while that same 20% off promotion could be applied to more expensive items for iOS users.

9. Leverage Mobile Chatbots for Rescuing Abandoned Carts

Emails are a tried and proven way to encourage customers, through reminders and special offers, to buy the items they left behind in their checkout cart. But chatbots are quickly gaining ground in this area — either in conjunction with or instead of emails.

Bikini Luxe, for instance, uses a combination of emails and Facebook Messenger to send special offers to customers who have already linked up their Facebook accounts:

Over Black Friday and Cyber Monday, Pura Vida Bracelets used Facebook Messenger to rescue abandoned carts through a series of three updates:

Pura Vida Bracelets' chatbot for mobile ecommerce

The lesson from this example is that it’s important to go beyond personalization that simply uses <FName>. That’s why Pura Vida’s Facebook Messenger promotion on Black Friday and Cyber Monday was:

  • Easy: Clicking “Checkout Now” sent visitors directly to their full carts, with no need to re-add items nor re-enter information
  • Urgent: A “Last chance to get 50% off” message reminded customers that now is the time to buy
  • Relevant: Pura Vida’s cart rescue only included what someone had already shown interest in

10. Let Analytics Be Your Guide

There are a lot of elements involved in creating a lasting mobile-first customer experience. So, it can seem daunting to decide where to begin – especially if you have a limited budget or are in the position where you have to “prove the value.”

A good place to start is with your web analytics data.

  • What is your mobile-user bounce rate?
  • What keywords are mobile users searching for?
  • Can they find them on your site?
  • Are users dropping off during the mobile checkout process?

Here’s a great checklist and guide to help you get started.

If all roads point to a need for a better mobile customer experience, then your analytics data can help you to identify the best practices listed above where investment makes the most sense.

11. Don’t Forget About Mobile Ecommerce Design Accessibility

Many State and Federal laws in North America and Europe are becoming sensitive to the needs of disabled citizens. Large enterprises and SMEs alike are facing the Americans with Disabilities Act (ADA) and Section 508 lawsuits. And rules are already beginning to form in Europe.

Shopify Plus Partner Something Digital advises that merchants engage in accessibility exercises to ensure compliance — as well as avoid litigation — as part of their IT and marketing calendar.

Unfortunately, the majority of the mobile web is not built with accessibility in mind.

Many sites even prohibit users from taking advantage of the accessibility or personalization features of modern smartphones.

Accessibility Best Practices

Shopify’s Liquid template technology allows store owners to add accessibility features directly from their store’s back office.

According to Something Digital, web developers can use Aria attributes to let browsing platforms know that accessibility features are enabled on a site. These attributes can be added to plain HTML, which essentially tells the platform: If you’re looking for where to start with accessibility, here I am.

This goes a step beyond plain old semantic HTML, which describes the type of content, and details its purpose.

For screen readers, the most important element of site design is the ability to maintain focus. When a link is clicked and displays a modal window, for instance, focus should be moved to that modal.

Once dismissed, the focus should then be returned to the prior link or text area from which it was stolen. Something Digital doesn’t advise to remove modals altogether; instead consider if using them is necessary or a common practice and approach them with accessibility in mind.

By replacing iconography with simple text instructions, mobile users can benefit from the smaller page sizes. Plus, by implementing common keyboard navigation techniques to menus, web crawlers such as Google can understand and prioritize navigation structures on your sites.

Another best practice is using browser plug-ins to test out designs that emulate common color blindness. With these plug-ins, you can find potential issues with conversion, such as drawing attention to your calls-to-action.

Where Should You Start?

You can begin by performing a quick check of your site. There are many tools online to test simple ADA guidelines like font size and colors.

Some of those tools include:

To learn more, you can read about the ADA Guidelines. After performing a quick self-assessment, reach out to a knowledgeable Shopify Plus Partner agency like Something Digital to continue the conversation about a UX audit and accessibility primer.

Final Thoughts

Implementing a mobile-first accessible ecommerce design and UX optimization will not only enable you to convert more customers directly via their mobile devices, but you’ll also capture more of your potential customers who are searching online (either locally or in general) and want to comparison shop on your website (and your competitors’ sites) using a mobile device.

Then, once you’ve got the sales data to show that having a mobile-first design is helping to influence multi-channel purchase decisions, you can continue to track results and develop a plan to roll-out other mobile customer experience channels – all with an eye towards building and sustaining brand loyalty.

About the Author

Andrea Wahbe is a freelance B2B marketing strategist and corporate storyteller who writes about Canadian SMEs, marketing, and digital media trends. Follow her on Twitter.