Great news! Mobile eCommerce is growing.
Forbes reported that mobile commerce will grow to 68% by 2022 as more people shop on their phones. A recent eMarketer report, The Future of Retail 2020, the growth of e-commerce will reach $845 billion by 2022.
As an eCommerce business owner, you might be regularly adapting your store. However, it’s essential to strike the perfect balance and design mobile product pages that convert. Your main goals are to keep your customers around longer and click ‘buy now’ with minimum distractions.
However, the not-so-great news is that many eCommerce business owners struggle with mobile conversions. Here are some common questions we get:
- How can we decrease cart abandonments?
- What will compel customers to buy again?
- How can we improve our mobile UX?
- What will convince potential customers to stay longer on the mobile product page?
Many eCommerce store owners are late to realize they are facing conversion issues due to complicated mobile UX. eCommerce stores also struggle with retention and repeat customers if customers find their mobile product pages difficult to navigate.
Are you facing similar problems with your mobile product pages?
Our teams have worked with hundreds of eCommerce stores to improve and design mobile product pages that convert. And we thought it’s only right to compile our learnings and share them here. Let’s dive into it!
22 Best Practices to Design Mobile Product Pages That Convert
Here are 21 best practices for eCommerce product pages to design and optimize for maximum mobile conversions. By implementing these, you have the chance to reach a wider customer base and even get your eCommerce store ranked with one of the best converting product pages.
1. Let the page copy flow naturally
Norman Nielsen Group’s study reveals that around 57% of customers spend their time viewing pages above the fold. That’s why it’s essential to attract attention right away.
a) Showcase an immediate benefit to the visitor. This hooks them into lingering around for more time and engaging with what you have on offer.
b) Offer a glimpse of the product and its features. This helps in creating anticipation for the customer.
c) Ensure the product title matches your customers’ search terms.
2. Avoid the “intrusive interstitials” trap
A few years ago, Google announced how “intrusive interstitials” or aka “popups” on mobile sites would hinder ranking. According to them, pop-ups on mobile sites interfere with their shopping experience.
Google says that page ranking might be affected if it detects the following signals:
- Pop-ups that cover the main content, when a user immediately lands on a mobile page
- A standalone pop-up that the user has to dismiss before accessing the main content
- If the pop-up layout is similar to the above-the-fold portion of the page, but the original content has been inline underneath the fold.
So, can you still use pop-ups on mobile sites?
Yes, you can. See how!
a) Add a triggered pop-up
An excellent way to avoid the penalty is to not show the pop-up as soon as the user lands on the product page. Instead, utilize a scroll or time-triggered pop-up that doesn’t cover the whole page.
b) Add a pop-up teaser
For example, the teaser can show the offer title. When clicked upon, it can expand to show the entire offer and relevant CTA.
c) Add a prompt-based pop-up
Sometimes, a product contains a lot of content and it’s difficult to showcase everything on the product page. A good example can be the size guide which can be shown through pop-ups.
3. Bring in mobile gestures
As frequent mobile users, all of us are in the habit of swiping and using other gestures. Therefore, your customers will expect no less on the eCommerce store.
a) Eliminate friction and improve user experience with swipe features for product images, and product categories.
b) Add buttons for easier navigation such as save to wish list, back to top, and CTA. (Refer to the above image for positioning)
c) Make sure to define the size of the CTA buttons and test them before rollout.
d) Pinch and expand. It’s a habit. You see an image of a product and want to take a closer look. So you either double tap or pinch and expand. It’s a basic mobile function. And if your customers can’t do it, then it hinders the overall user experience. Research shows a whopping 40% of eCommerce stores don’t support pinch or tap gestures for product images. While incorporating such gestures for mobile users, make sure that you are utilizing images with good resolution.
e) Accidental clicks. To err is human. A large part of your customers will accidentally tap on something they didn’t want to on mobile screens. In such cases, it’s important to have a good ‘back’ system in place or at least some action.
While you don’t want customers to abandon product pages without making a purchase, you need to add a clear nudge that takes them back to the results page and not the homepage, making them lose the applied filters and searches.
Perhaps, the customer has moved from the product page to the checkout page and asks to go back. A pop-up here asking if they are sure of the action can give them enough pause to review their accidental tap.
HEY, HERE'S A QUICK VIDEO WITH 7 BRILLIANT EXAMPLES (& WHY THEY WORK)
4. Improve UX with micro-interactions
When it comes to mobile shopping experiences, everyone talks about usability.
Good mobile store usability means customers get relevant information right away and see clear navigation cues that help them explore your store.
Therefore, micro-interactions are a big part of ease of use.
Some UI experts often talk about micro-interactions as the secret to what makes mobile usability great. While this is true, don’t overthink it. Just think of what will help make your mobile store appear more friendly.
A great example of micro-interaction is the simple animation of the ‘Prime’ slider on Amazon offers a similar feeling to an on/off switch. The action compels the page to adjust results and show products that are relevant to the Prime filter.
Smooth and quick.
So, what micro-interactions can you include?
a) Action-based Effects:
- Mobile users often experience internet issues so include a simple pull-down to refresh.
- Explore animation effects such as loading (for information load), bounce (to make the text appear as if it expands and shrinks),
- Think visual with symbols like ✓ or ✕ to save space and for ease of communication.
- You can include color effects to show if a relevant filter is applied. Humans perceive certain colors for certain actions. A color change is a great visual technique to offer micro-interaction without being intrusive.
b) Clear Navigation Cues
- A back-to-top arrow like this ↑ can help customers to scroll to the top of the product page where your CTA is positioned.
- Include swipe, pinch and grab to zoom gestures. These gestures are habitual for customers and hinder the experience if it's absent.
5. Sticky headers: to use / not to use?
A clean header increases the chance of discoverability of the other elements in a mobile product detail page. When the header is minimal, there are high chances potential customers will not get distracted.
a) Don't fixate on the header size. A customer’s attention needs to be on the main content, so decide the pixel size and height accordingly.
b) Decide between sticky and fixed headers based on your design and ultimate goal. While sticky headers ensure customers always have the ability to take the next set of actions, fixed headers are less intrusive and offer more control.
c) Which options to add to the header is again a choice you need to make with the customer journey in mind. To encourage customers to make a purchase, a clean header will offer better navigation. Keep the categories and subcategories in the hamburger menu and other important pages such as deals and offers in the tab option.
d) Opt for an icon instead of a search box. This takes up lesser space and doesn't look cluttered.
e) Avoid placing the search button behind a hamburger menu. Instead, keep it in and around the header.
f) Optimize autosuggest. This can make the customer’s journey smoother by reducing their effort.
g) Expand the search option out to a full screen. It’s a great way to grab the attention of visitors. This pronounces the search function especially in mobile devices while momentarily pushing all other elements into the background.
6. Never send customers to "subpages"
Show all the content or just enough? It’s a common dilemma while designing mobile product pages.
Confused and frustrated, they have to find the product all over again or just abandon their search.
Often eCommerce store owners don't optimize product page content for mobile. Instead, they use desktop content sections for mobile as well.
However, customer behavior on mobile is different than on desktop. Since the screen is smaller, trying to consume too much content in the limited space of mobile devices can be difficult for customers. Therefore, while designing mobile product pages, avoid giving customers a content overload and keep your copy clean and crisp.
To make a mobile experience seamless, eCommerce stores end up complicating the flow of information. Consider that the customer went to a subpage to clear their doubts, then pressed back. However, it lands them on the list of products rather than the specific product page.
a) Add vertically collapsed sections
Improve readability by experimenting with tabbed content. This can help customers to access the content that’ll drive their purchase decisions. If you have a lot of content, then vertically collapsed sections can help you list all product details without the worry of overcrowding. These sections can be divided for easy reading.
What information to include?
- Product Description
- Specifications & technical details
- Shipping & returns
- User reviews
b) Use your customer’s lingo
Perhaps, your customer is searching for an “electric cooker with timer”. However, you have added only “electric cooker” to the product title, your customer will have to search through reviews on subpages to confirm.
1) Do some keyword research related to your products to understand what customers might be looking for.
2) Make sure to add all the benefits and correctly tag your products.
7. Answer questions — no jargon
Excellent product descriptions can aid in the SEO value of your eCommerce store and convince your visitors to place an order. Here's a list of questions that your product descriptions must answer:
- What does the product do?
- What pain points does your product solve?
- Benefits of using the product, besides the obvious?
- Who uses the product?
- Why should I buy this product?
- Why should I trust your brand?
a) Provide important information at the beginning of the product description in the initial 3-4 sentences.
- Choose bullet points over paragraphs
- Add a sub-headline for each paragraph
- Use icons for certain features (eg, eco-friendly, colors, etc)
- Use correct grammar and punctuation
b) Relate to your target audience’s interests and hobbies, and if your product fits the segment then you can accordingly write copy. For example, if you are selling a selfie stick and a large portion of your customer base is a fan of music. Therefore, you can write copy on how a ‘selfie stick’ can be used to clear capture moments during a concert without any blurs or shakes.
c) Don’t miss out on covering the product specifications while crafting creative product descriptions.
8. Use ONLY high-res images
Images really make the difference and are one of the highlights of product pages that convert regularly. A detailed image gallery assures customers of the product’s quality and helps them have as close an experience to the real (brick-and-mortar) deal as possible. High-resolution images can also help in creating your eCommerce store’s brand identity.
a) Invest in clear and high-quality images through original product photography.
b) You can include a short video or interactive 360-degree view in your image gallery as well.
c) Use product thumbnails. They offer important visual cues to your customers about product features. If they get an all-rounded view on your product page, it’ll be easier to arrive at a buying decision
d) The images shouldn’t be larger than the smallest smartphone screen. If you force customers to scroll, it will no doubt lead to frustration.
e) Add a zoom icon. It reduces the guesswork and helps customers figure out product features through presented images.
9. Visualize copy (no "big chunks of information")
Mobile customers often skim rather than read. With multiple social media apps and other notifications, it’s easy to get distracted and drop off. Therefore, if they are faced with long paragraphs of content, customers might get overwhelmed and leave the page.
a) Icons to the rescue
Product options such as size, colors, and other variants can be shown through icons rather than copy.
b) Space it out
If you do have supporting content that cannot be adapted into visuals or icons, then take care to make it easier to read.
- Make sure your font size is legible on a mobile screen.
- The text color is contrasting with the background.
- Good text spacing for readability.
10. Customize CTAs (not just in different colors)
Of course, you have a ‘Buy Now’ CTA button on the mobile product page. You’ve researched what CTA button colors will compel action and positioned it under the product summary.
Now, you’re thinking, what else is there to customize?
a) Multiple CTAs
Most product pages should have at least two CTAs because there are usually two types of visitors. The first type might be on the website to just browse or still in the contemplation stage of the journey. The second type can be potential customers who are further down the buyer journey, and ready to make a purchase.
Here are some CTA copies to explore for the primary CTA:
- Buy the look
- Add to bag/cart
- Add to wishlist
- Quick buy (through 1-click apps)
Here are some CTA copies to explore for the secondary CTA:
- Write a review
- Notify me
- Social sharing buttons
b) Define the CTA button for screen size
Don’t make your customers squint or hunt for the CTA button. While your website might be responsive for mobile screens, it might shrink your CTA button, making it difficult to tap.
Here’s what you can do:
- Experiment with full-width CTAs for mobile screens
- Try sticky CTA buttons on the product page.
11. Highlight prompts to make customers' life easy
Research by Baymard Institute shows 49% of potential customers abandon carts due to unexpected extra costs. These costs include everything from shipping, taxes, or fees (customs, etc).
When a customer adds a product to the cart, they have almost decided to purchase it. However, when extra costs are added, there are high chances of cart abandonment.
a) Add a ‘free shipping’ prompt above the fold. eCommerce stores can run free shipping offers and recover sales.
b) Attract their attention with some FOMO. For example, we added little nudges on Getfpv’s product pages such as “number of people also viewing”) on product page banners, and the sales just shot up!
You can use tags such as “bestseller,” “trending,” or “selling fast” on product pages to offer social proof and a sense of urgency.
12. Let customers connect with you
A report states that 96% of users said customer service is important in their choice of loyalty to a brand. It’s also been determined that Americans tell an average of 15 people about poor customer service.
a) Add a non-intrusive chat widget. A sticky variation often works well, especially when color-coded in alignment with the rest of the page.
b) Quick feedback forms after completing the checkout process.
13. Make your breadcrumbs (really) prominent
Breadcrumbs are even more important on a mobile product page because of the cramped space. It helps customers locate where they are on the site and simplifies navigation.
a) Stay away from long breadcrumbs
You can do this by avoiding overcategorization—this will reduce the hierarchy of categories and subcategories. Reducing the number of pages can also help.
b) Avoid breadcrumb wrapping and elision
Wrapping breadcrumb links to a second line, given the size and space issue on mobile sites, can cause failures. On the other hand, some mobile product pages use elision to indicate there are mid-layers to the displayed hierarchy. They can be distracting and can demand extra actions from visitors.
c) Avoid clutter
Keep only the most necessary breadcrumb details at the top of the product page. This will ensure the breadcrumbs don’t get lost in the middle of other elements that may have been designed in a similar style.
d) Make site hierarchy easy to understand
Choose from location-based breadcrumbs, history-based breadcrumbs, and attribute-based breadcrumbs to see what will make your site hierarchy most conducive to the user’s attention. Also, use up and down arrows to convey shrink-and-expand.
14. Don't hide negative reviews
A common element of product pages that convert consistently is social proof. Customer reviews can be difficult to view on a mobile product page since there may be a lot of them. However, without social proof, customers won’t trust your brand or purchase a product.
a) Add specific filters for reviews and ratings. Searchable reviews decrease guesswork by keeping the reviews super personalized.
b) Don’t hide negative reviews. As challenging as they sound to the brand’s image, they offer a more wholesome view and also create trust.
c) Show certifications and any industry awards.
15. Upsell, but don't be pushy
Major brands use various innovative tactics to offer personalized product recommendations to their customers.
Navigating menu bars, product categories, and subcategories can be a painful experience. Product recommendations help a lot in driving conversions faster and more effectively in this case.
a) Upsell and cross-sell products in the same category. You can position it in the space below the fold, ensuring an added personalized incentive to visitors.
b) Experiment with adding images of the recommendations in the image gallery or collapsible list. Test out which of these methods will best suit your product pages, taking into consideration the density of content as well as design.
16. Promote with a touch of exclusivity
Promotions and offers are the best way to get a steady stream of traffic on that converts. Sharing exclusive access makes the mobile shopping experience feel personal.
a) Amazon Prime is a great example of exclusive access. The product page often includes the prime logo under the price to display that the customer can get the product sooner than other customers.
b) Amazon also runs ‘lightening deals’, a time-bound, promotional offer where a product is featured for several hours on the Amazon Deals page with slashed prices. The time countdown is situated right under the price section to prompt customers to buy it immediately.
17. Auto-fill info wherever you can
Research says that approximately 46% of cart abandonments occur at the payment stage
If customers have to manually enter payment information, it gives customers more time to rethink their purchase or get interrupted.
a) Save customer data such as size and other variables for uncompleted purchases. The saved data can also help during future shopping experiences. It reduces checkout time and also creates a greater recall value.
b) While it’s important to offer multiple payment methods, it’s also a great option to save payment methods for future purchases.
c) The average checkout flow is 5.2 steps long and has 11.8 form fields. You can reduce cart abandonments by getting form fields to 8 to collect information.
18. Never say never
Product out of stock.
Four words can disappoint and frustrate any customer.
As an eCommerce store, you will inevitably have products that go out of stock. Rather than deleting, most stores just push it down the product list to avoid wasting a customer’s time.
a) Use it for urgency
If you are retiring a product or product range, then use it as an advantage. Add a prompt that shows how much is in stock and how much time is running out. You can also run campaigns to move that product faster.
b) Keep your customer engaged
Many eCommerce stores add quirky copy to improve their customers’ moods. While you are losing a sale, at least a joke or two can help cement your store name in a customer’s mind, increasing brand recall.
c) Give customers options
Add an email opt-in so that the customer receives reminders when the product gets restocked. You can also prompt them to explore similar products in the same category.
19. Always close the loop
If you often run eCommerce marketing campaigns, then at least part of your customers come through that medium. In that case, it’s essential, customers linger around for a longer time on your mobile product pages.
Perhaps, customers click an ad, scan a QR code, or swipe through a social media app. However, many eCommerce business owners lament that these customers often immediately leave the mobile product page. Do you face the same problem?
While designing product pages for higher conversions, be sure to:
a) Add similar messaging as the marketing campaign in the product images or product descriptions.
b) Apply the discount or promotional offer to the product. This will nudge the customer to make the purchase faster.
20. Get creative with the cart
After all, your main aim is to get sales. The moment customers press “add-to-cart” or “buy now”, it’s a win. You would think that the next step would be to ease their checkout process. However, there are still ways to get more sales.
a) Add product count to the add-to-cart icon. Usually, mobile shoppers add multiple products to the cart during one session. In this case, if they don’t see a tally on the cart icon, they might manually go to the cart to check if the products are added. In this case, it interrupts their shopping experience.
b) Upsell and cross-sell in the cart itself. You can show products that are frequently brought together
21. About time we took AR/VR seriously
Your product page needs to sell convincingly.
It’s the equivalent of customers seeing and touching the product in a brick-and-mortar. While images, videos, and 360° visuals are all great, you can go one step further with augmented reality.
While it’s not new tech, it is still nascent in the eCommerce industry. However, brands that have applied augmented reality have seen a definite uptick in sales.
AR simply allows customers to preview products or experience services in their own environment and on their own time so that they can make an informed purchase.
So, how can you include the AR experience on your product page?
- Item placement: Let customers preview a product in their environment
- Try-on: Customers can virtually try on a product on a selfie or video
Brands like Adobe, to make shopping easier, are even developing more precision features for item placement AR. The still-testing stage tool will show rendered three-dimensional previews of products in a customer’s living space.
22. A/B test mobile product pages
Many online stores like to test marketing campaigns and new features with A/B testing. Testing mobile product pages eliminates guesswork and offers a clear direction on how to adapt the page design.
We have worked with many eCommerce stores to A/B test their mobile product pages and increase conversions.
a) Lay down the foundation
Before A/B testing mobile product pages, outline the following:
- What do you want to test?
- Who is your target audience?
- How will you measure the success or failure of A/B testing?
b) Think long-term
- Create an A/B testing plan with different variables. Try not to change the variables often.
- Set a duration of more than a month for in-depth analysis. Even if the results don’t look positive, don’t be hasty and change the plan immediately.
c) Be realistic
- Negative results might be demotivating. However, they tell you what you are doing wrong and steer you in the right direction.
- Set measurable goals. While getting more sales is your priority, decide on an achievable number and work towards it.
BONUS: Get customers to the right product page - cover all possibilities in autocomplete suggestions
Yes, we know we are talking about how to design high-converting product pages. However, you need to make sure customers are coming to the right product page through their searches.
The mobile screen is small, the keyboard is smaller. Ergo, predictive text is not only a brilliant solution, it’s expected.
For example, if I start typing ‘steam’ in the search box, I’ll wait till the search shows me different predictions such as ‘steam iron, steam cooker, steam inhaler’ and choose the appropriate search.
It’s basic user behavior. While offering suggestions, don’t do too much and not too little. On mobile, it’s necessary to stay balanced with predictive text.
Keep in mind, that on mobile, the possibility of errors is high too. However, as many as 69% of brands don’t offer relevant predictive text for misspelled search words.
Now, if a customer spelled a word incorrectly, they might notice and correct it. But if failed to notice, then they might try the category navigation with varying success or abandon the store completely.
You don’t want your customers to think your search is ‘poor’. Research showed that most customers waited for autocomplete to suggest something relevant and then move ahead.
Map all relevant misspellings of your products and product descriptions. For mobile, here are some things to keep in mind regarding autocomplete:
1) While you might shorten product titles, text wrap longer autocomplete suggestions so that customers can see a full suggestion and make an informed choice when making a selection.
2) Use appropriate font sizes, tap area, and spacing, as well as dividing lines to separate suggestions. Spacing help users to read easily and select autocomplete suggestions.
3) Remember to add a tag above the product title that says which search term led to the product page. It’ll reinforce the search word that can help customers to find similar products.
Over to you - Happy selling!
As mobile shopping experiences become more personal and innovative, eCommerce business owners are continuously experimenting with features and UX to create product pages that convert. These are several easy-to-implement tactics to copy—on creating smooth navigation—from the chosen brands in the section. With the above ideas, you can design high converting product pages that also look appealing to the eye.
Mobile product page UX is one of the biggest pain points for customers. Fast and smooth are what they’re looking for. Increase conversions with ConvertCart’s CRO360 and easily optimize your mobile product pages and get those sales ringing.