How To Design Mobile Product Pages For Successful Sales

Launch Your Online Business in Just 7 Days

Did you know that over half of all internet traffic globally now comes from mobile devices?

According to Statista, there are 3.5 billion smartphone users and 52% of all traffic is mobile as of 2020.

And with the rise in mobile internet usage comes the growth of mobile e-commerce.

In 2021, mobile e-commerce sales are expected to hit $3.56 trillion.

It’s clear that ecommerce stores that want to succeed need to learn how to adapt to these mobile trends.

While having a mobile optimized homepage is important, mobile-friendly product pages are even more critical.

Product pages are amongst the most important pages on any ecommerce site.

Not only are they the most visited, they’re also likely to be where customers decide whether to buy or not.

In short, your ecommerce store can succeed or fail on the strength of its product pages.

In this article, we’ll look at how you can design mobile-friendly product pages to achieve more sales than ever.

1. How to Design Mobile Product Pages

Since your product pages are tremendously important, you need to optimize them to achieve the best possible conversion rate.

When I founded my web design agency, Lform Design, in 2005, we could not have predicted how ubiquitous mobile technology would become. Yet nowadays most of us carry a smartphone in our pockets.

This means that web design needs have changed. Earlier this year, I named responsive design as one of the top web design trends of 2020.

Every professional website design agency today will tell you that this is no longer a nice to have, but a necessity.

In this section, I’ll walk you through my top tips for creating mobile-friendly product pages that drive sales:

1.1. Optimize Your Images

A mobile screen is smaller than a desktop screen.

For that reason, you need to be careful when you choose the images you include on your product pages.

When you use responsive web design, your site visitors see the same site regardless of what type of device they’re using.

However, the content is rearranged in the way that makes the most sense for their shape and size of screen.

File size is really important here, since the way the image appears will change on mobile but the file size won’t.

A file size that is too big will result in slow page load times over a mobile data connection, which can kill your conversion rates.

Around 50% of users will leave a page if it takes more than 3 seconds to load.

The best way to deal with this is to strike the balance between serving high quality images, but without making the file sizes too big.

Image compression will help you to reduce a file size without significantly impacting the appearance of the image.

There are numerous image compression tools you can use for your product images.

JPEG Optimizer, Kraken, and Compression.io are just some of the available tools.

1.2. Keep Text Short and Sweet

Images are important, but so is your web copy.

Many people find it difficult to read large chunks of text on a small mobile screen.

Therefore, ensure your product copy is short, snappy, and easy to read.

Here’s an example from clothing retailer Dorothy Perkins:

Notice how the text is short and to the point, while providing all the relevant information.

Visitors can tap on the little plus/minus button to expand or collapse the shipping and returns section.

Lots of white space, short paragraphs, and bullet pointed lists work particularly well for mobile product pages.

Focus on readability and remember that it’s harder to read large blocks of text on a small screen.

1.3. Make Your Product Page Responsive to Swipes and Zooms

When people are using mobile devices, they expect to be able to swipe through images and zoom in easily to see more information.

They will likely get frustrated with a site if these “mobile gestures” don’t work in the way they expect.

Many of us do these actions on mobile sites without consciously thinking about it because it’s what we’ve come to expect.

Therefore, make sure your site visitors can scroll through your pictures using a swipe motion and zoom in easily to see more detail.

Take note of how Amazon does it - the customer can not only swipe through images, but can see how many there are thanks to the dot icons.

1.4. Use Product Reviews Cleverly

Consumers don’t tend to like taking risks. When they purchase something, they want to get their money’s worth.

If they’re not sure how trustworthy a site is or how high quality a product is, they’ll likely skip buying altogether.

Ecommerce store owners have long understood the value of product reviews for this reason. But they are no less essential on mobile product pages.

However, if you want them to have the desired effect, you also need to be clever about how you use them.

Since you can only fit so much content on a mobile screen, many retailers utilize an overall star rating to show what customers think of the product:

That’s precisely what Black Bag Coffee Co. (pictured above) does.

Customers can then tap on the stars to read individual reviews if they wish.

By showing that multiple customers have rated the product five stars, the company packs a lot of social proof into a very small space.

The other advantage of reviews?

IB Times found in one survey that 42% of mobile users make impulse purchases frequently.

If customers can see reviews on your product pages, they’re more likely to tap that “buy now” button on a whim.

1.5. Automatically Save Data

Not all mobile purchases take place in one sitting.

Your consumer might put items in their basket, then return to check out at a later time.

Since so much mobile shopping happens on the go, it’s also possible for your mobile site visitors to suddenly lose their internet connectivity or get distracted by something else.

This is why it’s very important for your site to automatically save data for every user session.

If your visitor reopens the page later to find that all the products they put into their shopping cart are no longer waiting for them, they’ll get frustrated.

Many won’t bother looking for the items again, and you’ll have lost the sale.

Instead, create a seamless experience so that when visitors leave your mobile product page and then return later, they will find their items still in their cart and waiting for them to check out.

1.6. Make Sure the “Add to Cart” Button Appears Above the Fold

Want to make sure your mobile site visitors push through and make a purchase?

The trick is to make it as easy as possible for them.

Present all the most essential information onto a single screen, reducing the need for the site visitor to scroll.

That should include the “Add to Cart” button.

Here’s how it looks:

You want your readers to take action, so make sure the button for them to do so is centrally located and impossible to miss.

1.7. Give Recommendations

Remember what I said above about mobile shoppers being particularly inclined towards impulse purchases?

You can make the most of that by adding an upsell or cross-sell to your product pages.

In other words, recommend other items they might like.

Make sure the products you recommend are related to the product they were already shopping for.

For example, if a customer was looking at a dress you might recommend the perfect shoes to go with it.

If they were looking at a laptop, offer a laptop bag. And so on.

Here’s how Brooklinen does it:

Feature your recommendations prominently so customers won’t miss them.

However, make sure it doesn’t overwhelm the main product they were looking at.

2. Mobile Product Pages for Successful Sales

Mobile product pages are no longer a luxury or a nice add-on. In an era where mobile internet traffic is growing year on year and mobile ecommerce is rising to match, shoppers expect the sites they visit to be mobile-friendly.

Therefore, make sure you use responsive design features and curate your mobile product pages to drive conversions at every step.

Remember that you might not get everything right the first time.

It might not always be obvious what will work with your audience.

Therefore, try things out and run A/B tests to see what works best.

Even a small change, such as altering how your call to action is worded, can make a big difference.

Here’s to reaching your ecommerce goals this year!