14 Innovative Approaches to Mobile Product Detail Page Design

Mobile product detail pages (PDP) follow a largely standard design. Given the small area of screen real estate available and the commonality of the content to be conveyed it is not surprising that PDP designs have become quite similar.

In this post I’ll examine which retailers are trying new ideas for displaying content and offering unexpected functionality on the PDP. Here are 14 examples to explore.

Looking for more examples? Read part 2 of this post.

Image Filmstrip

Product images are the most important part of a mobile PDP. Given the small visible area, retailers should enable their customers to see as much of the product as possible. Desigual’s approach to this is to display product images in a filmstrip rather than the typical single hero image approach.

Showing a portion of the next product image not only provides some more visual interest to the page but also plays on the curiosity of the shopper, encouraging them to swipe to see the next photo. This is more effective than simply providing pips to show that more product images are available.

Desigual mobile website product detail page

Add Extra Item

Subscription underwear retailer, AdoreMe, has a useful feature for women who are ordering a bra and panty set.A link on the product detail page lets the customer easily order an extra pair of panties to go with the set. This is convenient for the shopper and an effective way of upselling for the retailer.

A link on the product detail page lets the customer easily order an extra pair of panties to go with the set. This is convenient for the shopper and an effective way of upselling for the retailer.

AdoreMe mobile website PDP

Swipe Up/Down to View Images

Forgoing the traditional right-to-left horizontal swipe to view more product images, Forever21 requires you to swipe up and down to view the image gallery.

In addition, the retailer has gone all-in to focus solely on product images as there is no other content on the page. To view any product information you need to tap the small “INFO” box.

Forever21 mobile website PDP

Fixed Page Background

Online shoes retailer Aldo uses a fixed background image to embellish the product page. The background image is a close up of the main product image, which reinforces the design aesthetic of the product.

Although it is a unique approach, I found that when scrolling, the fixed background image competed with the summary content on the PDP, making it feel a little harder to read.

Aldo mobile website product detail page

Show Item Popularity

In addition to providing the standard add-to-wishlist button, Boxed displays how many other customers have already added this product to their wishlists.

This provides a strong social proof message about the popularity of the product, so that the customer can feel confident making a purchase decision.

Boxed mobile website product detail page

Product Comparison

Product comparison functionality is common on desktop but less so on mobile. Darty bucks that trend by providing users with the ability to compare up to three products on their mobile PDP, which is useful for certain product categories such as smartphones.

Tap on the black tab at the bottom of the screen to add a product to the comparison tool:

Darty mobile website PDP

Then tap on the numbered green tab to view the compare products page:

Darty mobile website compare products

Blog this Product

Almost all mobile ecommerce retailers offer social sharing options on the PDP. However, Nelly also offers the option to embed product information in a blog post. Tap on the pen icon to blog about a product:

Nelly 'blog it' option on mobile PDP

This opens a modal window from where the necessary HTML can be copied in order to add the product image and key info to a blog post:

Nelly blog it modal screen

Product Summary

Most mobile product pages prioritize the product image by placing it at the top of the page. Bonobos takes a different approach by leading with a pithy product summary at the very top.

Bonobos product summary on mobile PDP

Image Grid

Burberry gets the maximum mileage out of their product images by repeating them further down the PDP in an interesting layout.

Burberry mobile product detail page

Highlighted Customer Review

Crocs doesn’t wait for the user to actively seek out customer reviews. Instead, they bring customer feedback up into the product content by inserting a featured customer review within the product description.

Crocs featured customer review on mobile PDP

Choose Model to View Clothes On

Most clothing models don’t look like everyday people. To counter this, Good American offers the ability to choose which size model on which to view product images.

So, if you’re a size 14, for example, you don’t have to imagine how the item might look on you while viewing it on a size 0 model. This is a great example of the Good American brand living up to its promise of offering clothing in inclusive sizing.

Good American mobile website product detail page

Tap on the “SELECT FIT MODEL” button to display options for viewing the clothes on different size models:

Good American choose fit model screen

In the example below, I chose to view product images with the size 14 model wearing the clothes.

Good American size 14 model mobile website PDP

Why Did You Choose This?

Providing customer Q&A is a useful addition to product reviews so that customers can get answers to specific questions. However, it can be challenging to establish a base sampling of Q&As so that customers will feel that if they ask a question it will be answered.

Cole Haan addresses this issue by asking a simple question to everyone who bought the item: “why did you choose this product?” This is a creative way to add user content to the Q&A section.

Cole Haan Q&A on mobile website PDP

Detailed Product Care Information

Although not unique, the next feature is still relatively uncommon among apparel retailers. C&A provides detailed product care information on their PDP so you know exactly how to look after your purchase.

C&A product care information on mobile PDP

Real-time Social Proof

Compared to in-store shopping, mobile shopping is a relatively solitary activity. Missguided tries to counter this by displaying real-time social-proof messages over the product image showing how many other people are also viewing the product and how many have purchased it recently.

This helps to add urgency — if other people who are viewing the item purchase it perhaps it will go out-of-stock; and also confidence that the item is a good purchase as many other customers have also bought it.

Missguided social proof messages on mobile PDP


For even more examples of mobile PDP design, read part 2 of this post.

Leave a Reply

Your email address will not be published. Required fields are marked *