How to Build a Mobile Product page that converts?

Product Pages are at the epicenter of conversions. They are a fundamental building block for all shopping experiences, where customers get the information and eventually decide (or not) to buy.

by Arthur Bonnecarrere
Founder @ once.app

Why mobile product pages are so important?

2020 saw mobile surge to more than 2/3 of all e-commerce traffic, and yet many of the websites are built desktop-first with responsive designs only.

Product Pages are at the epicenter of conversions. They are a fundamental building block for all shopping experiences, where customers get the information and eventually decide (or not) to buy.

Responsive websites don't make the cut anymore, merchants need to shift to a mobile-first paradigm.

With more revenue coming from mobile, yet low conversion rates, there's simply no doubt that you need to put all your efforts into getting best-in-class mobile design - and I wanted to share some of the best practices for the product page

How to Build a Mobile Product page
that converts?

Think Visually

The product page is the last step before customers buy. Merchants sometimes forget that mobile means smaller screens with less information density, so drop unreadable text, thumbnail images, and Wikipedia-like UIs.

・First thing first, put large visuals that fill the screen. You want your product to get full attention.

・Second, have a clear and large buy button above the fold, the famous Call-To-Action (CTA). It should always remain visible and thumb-accessible.

・Third, add icons instead of texts. For product options, for instance, let's say you're selling a shirt with different colors, instead of having them written, you can show color bubbles. Some Shopify Apps let you do so very easily, like Variants Options Swatch King or GVariant: Image + Color Swatch

There are many other visual tricks that might apply to your shop, just use this visual approach to think of every step of the shopping journey.

Serve a mobile friendly XP

Mobile unlocks many functionalities and gestures otherwise not present on desktop. The goal is to leverage and adapt the product page XP around these. A few important gestures are the swipe, the pinch to zoom, tap, long press, and scroll.

At Once we create native-like UX, making use of all these gestures for intuitive mobile navigation. For instance, we offer swipe navigation between products of the same collection, which increases the number of views per session and avoids many back and forth to the collection page.

Another fundamental aspect is the loading time. It changes the browsing experience completely with huge repercussions on the bounce rate. I addressed the topic in more detail in this article, as it deserves a comprehensive approach to be fully grasped.

Simplify the decision process

Supporting customers in their buying journey is essential on mobile, where attention spans are very limited. It's a subtle balance between information intelligibility, product credibility, and brand confidence.Digestable product information was discussed in the visual thinking section.

Appealing content and appropriate density are the key elements here.Social proof is a great way to bring credibility to the table. Whether it's from standard reviews or User Generated Content like videos/images on social networks, this is always a great way to build trust between customers and products, delegating credibility assessments to others.

There are a bunch of apps on the Shopify App Store to help you achieve this.Brand confidence is usually achieved with clear and simple return, reimbursement, and shipping policies. While it's already becoming the norm across the e-commerce world, many shops still lack clarity and information accessibility on these topics; which can negatively affect how customers view your brand.

A simple and clear statement on return policies, for instance, puts customers in a more appropriate position to decide, as they feel it could easily be 'undone'.A bit out of scope here, but still very important, is the checkout method. Make sure you enable as many one-click solutions as possible to remove the form-filling hustle. Luckily, it seems that Shopify is working under the hood on a new checkout experience that will include all of the best practices so you don't have to bother.

Conclusion

Having a great product page is not that hard, and you now have the keys to produce the best-in-class mobile product page. While there's no perfect answer on what's the best experience for your shop, you should always A/B your different UX to make sure you have an optimized funnel for your products.

Get Started with Once

Mobile optimized
storefronts

Get Started Now