There is no exact template for designing mobile product pages as the small screen size means its up to each retailer to work out which features are most important for their customers.
On an ecommerce site you can afford to squeeze in almost any feature you want but on a smartphone you need to be more selective.
Even so there are a number of tools and functions that nearly all mobile sites should include, mainly because users expect to see them so leaving them out will damage the UX.
So with this in mind, here are eight examples of great mobile commerce product pages. All of them have flaws but also have features that are worth considering for your own mobile site.
These are the main features I was looking out for:
- Large, hi-res images. Bigger images can lead to higher clickthrough rates and conversions.
- Big, bright calls-to-action. Mobile shoppers tend to be impatient so CTAs need to be unmissable and leave them in no doubt about the next step they need to take to make a purchase.
- Prominent delivery/returns information. Hidden shipping costs are known to be a leading cause of basket abandonment.
- User reviews. Studies have shown that user reviews can increase sales by 18% on average.
- Product recommendations.
- Detailed product descriptions. A concise, unique product description is a great sales tool.
- Stock information. It's incredibly frustrating if customers add an item to their basket only to find out it's out of stock.
Walmart’s product pages are excellent and tick many of the boxes for best practice without appearing cluttered.
They include product images, reviews, an unmissable CTA and product recommendations.
I also like the way that the product description is housed in a collapsible menu so it’s easy to access but doesn’t always take up a huge amount of the screen.
Target has a lot of neat features on it product pages including swipeable images, customer reviews and concise details on its shipping and returns policy.
It also has a tool that allows customers to find the item in a Target store in case they don’t want to buy it online.
There are a few points that I feel could be improved though. For example the CTA is a bit small, as is the font size for product details.
Home Depot has made great use of collapsible menus to create pages that include a huge amount of information without appearing cluttered.
The lists house the product descriptions, specifications and shipping options.
However the coolest feature is the in-store information, which tells you not only the location of your nearest outlet but exactly how many items it has in stock and even the aisle number.
This is a terrific way of tying up your online and offline channels and taking advantage of ‘showrooming’ customers.
The pages also include reviews, recommendations and swipeable images.
Though far from perfect, Macy’s has several decent features on its pages that help it to stand out above many of its competitors.
It is another retailer that makes good use of dropdown menus to make sure it has a clean design without forgoing any relevant information.
Similarly, I like the buttons that it uses to select the product dimensions, while the images and CTAs are also a good size.
On the downside, the product reviews menu is slightly clunky and personally I think it’s a strange decision to put the social sharing buttons above the reviews and returns information.
As with its desktop site, Victoria’s Secret has designed simple mobile product pages that are very simple to navigate.
It includes large, swipeable images and there’s a decent amount of white space around the CTAs to make them easy to press.
Furthermore, product information is housed in a dropdown menu which helps to maintain the clean, simple design.
However on the downside the pages do not include returns information or customer reviews.
Dick’s Sporting Goods
The font size on the Dick’s site is quite small which is an obvious flaw, however the navigation is well designed and worth flagging up.
The pages include swipeable images and recommendations, plus big CTAs that are easy to click. The site also scores points for having full stock and shipping information.
Finally, Dick's has an excellent product description though it’s undermined by the tiny font size.
Under Armour is another site that ticks most of the boxes for best practice, but with a few areas for improvement.
It has decent images, stock information, good product descriptions and a prominent CTA. It also has reviews and makes good use of collapsible menus.
However on the downside the font is quite small, plus the shipping information should be more prominent as it’s currently located at the very bottom of the screen.
I’m not a huge fan of Juicy Couture’s colour scheme as the white and light pink strikes me as a bit flat, however it does at least mean the CTA sticks out.
As with most of the other brands it makes good use of collapsible menus and has an excellent array of product recommendations and imagery.
However another downside is the small font, which makes it very difficult to spot the price.