The New Golden Rules Of Product Page Design

With digital sales on the rise, the pressure has never been greater on product display page design.

Share this article

While brick and mortar stores are shuttering all over the country, digital sales are set to expand rapidly. Some pundits predict annual growth in excess of 23% and eMarketer expects e-commerce sales to increase to a whopping $4 trillion by 2020.

That puts a lot of pressure on an often overlooked part of the retail experience: the product display page. Historically the preserve of engineers, rather than UX and visual designers, product pages can resemble a poorly conceived mash-up of badly lit photos and hard to decipher product features. But thankfully, for those with a sensitive aesthetic disposition, a host of new experiences are informing the design of the best pages on the web.

What’s the big idea?

Before we get into the specifics, it’s worth outlining some fundamentals. Product detail pages must do three things well:

  • They must give detailed, benefit-focused information about the product in question.
  • They must offer an easy and obvious way for buyers to take the next step towards ownership.
  • And they should provide a way for shoppers to be presented with alternative suggestions.

With those broad principles to guide us, here’s our breakdown of the new golden rules for product page design.

A Nike PDP: the gold standard in e-commerce

Rule #1

Above the fold: the new minimum standard

There are six main elements that are critical for conversion. These should be included in the initial load of the product display page and appear above-the-fold on desktop.

  • A. Product Images: product images are the next best thing to being able to physically touch, hold and test your product. High-quality product images must be the first thing your shoppers see when they load your product pages. See Rule #2 below for more information.
  • B. Price: it’s one of the very first things we look for. And sales prices pique our interest even more. Show how much your consumers are saving on their purchases to get them one step closer to purchase.
  • C. Product Variations: if you have numerous product variations displaying (rather than listing) them can improve your sales by as much as 58%.
  • D. Add-To-Cart Button: the #1 job of your product page is to get your shoppers to click the “add-to-cart” button. So make sure it is one of the easiest elements to spot on your product page.
  • E. Customer Ratings: 85% of consumers read reviews before purchasing. So display your reviews prominently to show your shoppers what others think about the product.
  • F. Fear-busting: estimates suggest as much as $9.1 billion in online sales is lost every year because shoppers fear they may be making a mistake. Head their concerns off at the pass with as much useful information as you can muster: hit common concerns head on, such as shipping and return policies, fit and size charts, and product function.

Rule #2

Merchandising is everything

The quality of your product images directly affects your ability to generate sales. In fact one study confirmed that 92.6% of online shoppers say visuals are the most influential factor affecting their purchase decisions.

  • Use high quality, custom images: creating amazing product images should be your main priority.
  • Use multiple product views: featuring multiple product views can account for as much as a 58% increase in sales. You need to show your potential product owner the goods from every angle.
  • Detail views: Break down the aesthetically interesting, or functionally specific elements of your product.

Rule #3

Let the copy do the talking

Having an effective copy strategy is essential – and getting the balance right in terms of the types and amount of copy is critical.

  • Product name: Each word is a potential keyword for organic search, so longer can be better. Long names also indicate more value and stand a better chance of attracting the visitor’s attention.
  • Simplicity in a cluttered space: when it comes to product features and benefits, keep it simple and to the point.
  • Create scannable product descriptions: 79% of people are “scanners”, so make sure you include short versions of your product descriptions to give your shoppers a quick overview of the reasons this product can benefit them. For those who crave more, include a longer version of your description further down the page.

Rule #4

The power of the moving image 

As more and more of us routinely stream content to our devices, product video has become an essential part of the display page mix. In fact, some say product videos can increase conversion by as much as 85%.

  • Use graphic overlays: highlight benefits, deflate objections and answer the most frequently asked questions people could have. 31% of consumers purchase products after being convinced by product videos.
  • Keep them short and sweet: give customers as much of a look at your product as they need to feel excited and convinced it will serve their needs.
  • Inject your brand values: with consumers spending more and more time on product pages, and less time engaging with branded content, this is an ideal opportunity to add a little branded touchpoint.

Rule #5

Peer-to-peer dialogue

Consumers today can be wary of brand promises. But they are increasingly swayed by the opinions and beliefs of their peers. In fact, 85% of consumers read online reviews before buying. There are always uncertainties when shopping online. This is why a selection of good (and bad) reviews can help nudge your shoppers into buying. When people feel they are informed after reading the pros & cons, they are more likely to take action.

The subtle art of the cross-sell

Share this article

Rule #6

Don’t just sell, cross-sell

In a retail environment, products are painstakingly merchandised and artfully grouped into collections and other compelling visual or thematic associations. Do the next best thing online and guide customers to other products they may also love.

  • A. Recommended Products: Show your customers other products they might not have considered. Keep them engaged on the site and give them options to help them narrow their search.
  • B. Customers who bought this item also bought: Leverage the power of consumer behavior and show the best-selling related products.

Rule #7

Have a brand moment

According to a new survey, over half of U.S. online consumers begin their product searches on Amazon. And the vast majority of those people pretty quickly land directly on a product display page, bypassing entirely any brand experience.

But don’t despair, there are still plenty of opportunities to build branded content on Amazon and other major retailers’ sites, through A+ detail pages or by using other tools such as webcollage. Take advantage and remind consumers why they fell in love with your product in the first place.

Rule #8

Mobile optimized

For retailers, the debate is over: mobile devices will officially take over from their desktop counterparts by 2021 — by which point some analysts predict 53.9 percent of all retail e-commerce is expected to be generated via m-commerce. And as far as traffic is concerned we’re already well past the tipping point, with mobile internet users now outstripping their desktop counterparts around the world.

And since some pundits suggest as many as 90% of users start a task on one device and finish it on another, optimizing your experience for mobile is no longer optional. Your mobile product page needs to be as consistent as it can be with your desktop version, and capable of saving progress for a seamless experience from one device to the next.


We hope this list gave you some new ideas or at least affirmed your own best practices. From our perspective, there’s one thing today’s research has officially confirmed: mobile-first is no longer an optional strategy – it’s the status quo.

Let’s Talk

We’ve been designing digital experiences for over 10 years for some of the leading names in retail, pharmaceuticals, and B2B technology. Contact us if you’d like to find out more.

Drop us a line.

Contact us

120 2nd St. Floor 3,
San Francisco, CA 94105

(415) 227-9975