As an eCommerce business owner, you’re probably regularly adapting your store.
However, it’s essential to design mobile product pages that convert.
Your main goals are to keep your customers around longer and click ‘buy now’ with minimum distractions.
The questions just become more serious when you’re trying to make your mobile experience optimized for the buying experience to improve dramatically:
- How can we decrease cart abandonment?
- 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, design and navigation.
Are you facing similar problems with your mobile product pages?
At ConvertCart, we’ve worked with hundreds of eCommerce stores to improve and design their mobile product pages in becoming successful sales tools.
And we thought it’s only right to compile our learnings and share them here.
27 Ways to Boost Mobile Product Page Conversions
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.
ConvertCart Learnings:
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.
The closer the match, the better the discoverability.
2. Avoid the “intrusive interstitials” trap
A few years ago, Google announced how “intrusive interstitials” 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!
ConvertCart Learnings:
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 a size guide (on fashion sites) which can be shown through pop-ups.
Do read: 15 Brilliant (Non-Intrusive) Mobile Pop-up Examples In eCommerce
3. Make room for mobile-specific hand gestures
It’s best to offer potential customers as many directions as possible. In this case, show that the zoom feature is supported. You can add a zoom icon, show the gesture or simply position text that says ‘tap to zoom in’. As frequent mobile users, all of us are in the habit of using gestures like swiping and scrolling.
So, when you’re building product pages optimized for mobile, you’ll have to keep track of this.
ConvertCart Learnings:
a) Eliminate friction
Improve user experience with swipe features for product images, and product categories.
b) Add buttons for easier navigation
Instead of links which become tough to tap, introduce buttons for major actions such as ‘save to wish list’, ‘back to top’, and CTA.
c) Make sure to define the size of the CTA buttons
Testing them before rollout can help you figure out which size is best optimized for use.
d) Use the ‘pinch and expand’ feature
To take a closer look at a product image, a shopper either double taps or pinches and expands.
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.
Make sure that you are utilizing images with good resolution for this feature to work well.
e) Design for accidental clicks
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.
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. Use flexible grids
When you’re trying to build effective mobile product pages, you’re essentially trying to create UX that’s seamless and responsive.
In this regard, having a fixed layout can pose problems to your mobile optimization efforts.
Flexible grids, on the other hand, invite flexibility and ease of use across devices.
Responsive grids are more suited to maximize the limited screen area on a mobile device while maintaining a uniform viewing experience.
Unlike fixed grids, which come with fixed values, responsive grids come with percentage values.
You'll love this: eCommerce Mobile UX: 27 Ways to Get More Conversions
ConvertCart Learnings:
a) Make use of a 4-column grid
While a 1- column grid works well for a desktop and an 8-column grid best optimizes the tablet experience, for mobiles, it’s the 4-column grid that’s ideal.
b) Work with an auto-layout tool
This can help you mimic a flex container where blocks of content can be dragged and dropped and moved around to give you the big picture.
c) Bring consistency to your spacing
Both horizontal and vertical spacing need to be consistent for your shoppers to undergo a seamless visual experience.
d) Avoid using columns as paddings
The negative space in the side margins exists to offer padding – which means that in your grid layout, you can use all of the space to display your content.
5. Make your CTAs compelling
The eCommerce universe is inherently action-driven.
While different businesses depend on different conversion funnels, they all have one thing in common - to make the user convert into a paying customer at the end.
In a typical mobile commerce experience, the call-to-action buttons decide how fast and how efficiently the user acts.
If optimizing your mobile product pages is your biggest priority right now, then you probably already know that users behave differently when something feels urgent.
The point of your mobile product page CTAs is to compel the user to convert from being a browser to being a buyer.
ConvertCart Learnings:
a) Employ larger buttons
This way you’ll ensure users don’t miss tapping on them.
According to Apple, CTAs for mobile need to be 44 x 44 pixels, while Microsoft states 34 x 26 pixels as ideal.
b) Design buttons with rounded corners
Compared to buttons with sharper edges, buttons with rounded corners create a softening effect to display more text elements.
c) Utilize the ‘thumb zone’ for your CTA(s)
And this means putting your mobile product page CTA(s) at the center of rather than on the sides.
6. 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.
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?
ConvertCart Learnings:
a) Introduce symbols & effects to depict next steps
- Include a simple pull-down to refresh to negotiate internet issues users might face
- 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
- 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) Offer 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
7. Apply sticky headers with care
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.
ConvertCart Learnings:
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
Base this decision on the ultimate goal of your design.
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) Consider what sections to add to the header
For this, keep the customer journey at the forefront.
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 less 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.
8. 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.
ConvertCart Learnings:
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) Save payment methods for future purchases
Bring this feature alongside multiple payment options.
c) Reduce the number of form fields
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.
You must also read: eCommerce Splash Page: 17 Attention-Grabbing Examples
9. Never send customers to "subpages"
Often eCommerce store owners don't optimize product page content for mobile.
Instead, they use desktop content sections for mobile as well.
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 how the customer goes to a subpage to clear their doubts, then presses ‘back’.
However, it lands them on the listing page for products rather than the specific product page.
ConvertCart Learnings:
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.
What information to include?
- Product Description
- Specifications & technical details
- FAQs
- Shipping & returns
- User reviews
b) Use your customer’s lingo
Perhaps, your customer is searching for an “electric cooker with timer”.
However, if you have added only “electric cooker” to the product title, your customer will have to search through reviews on subpages to confirm.
- Do some keyword research related to your products to understand what customers might be looking for.
- Make sure to add all the benefits and correctly tag your products.
10. 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.
ConvertCart Learnings:
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.
11. Answer questions — free of 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?
ConvertCart Learnings:
a) Provide important information at the beginning
Make the initial 3-4 sentences count the most.
- 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
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 clearly capture moments during a concert without any blurs or shakes.
c) Covering the most product specifications
In fact, a good idea is to blend them with the benefits so that shoppers can co-relate why a particular feature or ingredient is so important in your product.
12. 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.
And all of the above gain greater importance when you're building high-converting mobile product pages.
ConvertCart Learnings:
a) Invest in clear and high-quality images
Invest in original product photography. Ensure a mix of product and lifestyle images for optimal experience.
b) Include a short video or interactive 360-degree view
This can help you lessen the total number of images you need to feature to be able to depict your product as closely to the real experience as possible.
c) Use product thumbnails
They offer important visual cues to your customers about product features.
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
This reduces the guesswork and helps customers figure out product features through presented images.
13. Avoid passing big chunks of info as ‘copy’
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.
ConvertCart Learnings:
a) Make use of more icons
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
14. 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?
ConvertCart Learnings:
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
15. 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.
ConvertCart Learnings:
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.
16. Make it easy for customers to access support
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.
ConvertCart Learnings:
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
Keep the number of questions relevant and limited – preferably not more than three.
17. Make “saving orders” easy
Most shoppers use their smartphones to check out websites by various brands, but ultimately buy through their desktop.
This was clarified by the 2018-2019 Episerver B2C Dot Com Report, which found 50% of all online sessions coming from smartphones while only 41% was from desktops.
Then there’s statistics that reveal how the shopping cart is often treated like a “holding area”.
And this is why you’ll have to make it super easy to save orders on your mobile product pages.
This can create the much needed experiential continuity that shoppers are looking for, across devices.
ConvertCart Learnings:
a) Stop redirects to the page that features “save for later” items
Remember the user is in their checkout flow, and what they need is just a clear indication that the item has been saved for later viewing and purchasing.
b) Provide clear feedback on items being moved
The shopper needs to know that the action of saving for later has indeed happened.
This also increases the chances of them coming back to view the product(s) later.
18. 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.
ConvertCart Learnings:
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
This addresses the authority principle which often guides shoppers to make purchase decisions based on what a trustworthy, authoritative figure, organization or publication says about a product or brand.
19. 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.
ConvertCart Learnings:
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.
20. 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.
ConvertCart Learnings:
a) Make exclusive access options evident
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) Use a countdown timer to drive exclusivity
Amazon also runs ‘lightning 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.
21. Be strategic about showcasing stock availability
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.
ConvertCart Learnings:
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 customers engaged
Many eCommerce stores add quirky copy to improve their customers’ moods.
While you are losing a sale, saying something emotive 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.
22. Introduce mobile-only coupons
In 2020, 92% shoppers looked for coupons before buying online.
And that number can only grow in the years to come.
Come to think of it, coupons are a win-win for you as a business and for loyal and potential buyers who need that extra nudge sometimes to make a purchase.
When you offer mobile-only coupons on your mobile product pages, it becomes an added attraction for potential buyers to complete their purchases on that very device.
ConvertCart Learnings:
a) Make the discounts appear in relevant category pages
Create a separate sales section for mobile discounts to avoid confusion and drive traffic.
b) Mention the time frame of the coupon clearly
You don’t want users trying to apply a coupon beyond the expiry date and being frustrated by it in the process.
c) Introduce success and error messages
This is the only instant way buyers will know if they’ve been successful at applying a mobile coupon.
Success and error messages can appear on the mobile screen and also be sent as an SMS on the buyer’s number.
23. Retain consistency across mediums & channels
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?
ConvertCart Learnings:
a) Build consistency into what you’re communicating
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.
24. Drive engagement through 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.
ConvertCart Learnings:
a) Add product count to the add-to-cart icon
Usually, mobile shoppers add multiple products to the cart during one session.
And 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.
This can in turn meddle with the smoothness of their experience.
b) Upsell and cross-sell in the cart itself
You can show products that are frequently brought together.
25. Integrate geo-location capabilities
According to SEO Tribunal, 97% of users learn about a local company by Googling it.
Most of them don’t make contact until they are satisfied with having found out enough information.
And this is all the more reason to ensure your mobile product page experience incorporates user location for better search and discovery.
Integrating geo-location can help you display more refined and personalized recommendations.
It can also be a tool to predict delivery dates and shipping window estimates.
ConvertCart Learnings:
a) Ask for permission
Always offer users the choice to turn on data.
Automatic location activations may be perceived as threatening.
b)Use clear indicators
Make the tappable options easy-to-understand through clear yes and no, and also use intuitive colors such as green to depict a go-ahead and red to refuse.
c) Explain why you need geolocation to be activated
A short explainer stating how the user can be benefitted typically can convince them to share their location with you.
26. Consider 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 setup.
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.
And brands that have applied augmented reality have seen a definite uptick in sales.
So, how can you include the AR experience on your mobile product page?
ConvertCart Learnings:
a) Item placement
Let customers preview a product in their environment.
Some brands, especially those that have to do with home decor and furnishings make use of this feature frequently.
b) Virtual 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.
27. 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.
ConvertCart Learnings:
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 they 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 shows 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.
.svg)
.svg)
.svg)
.svg)
.svg)
