These are not only ingredients for a good relationship, they’re also what makes a good product page.
And creating good product pages is critical to your success in eCommerce.
Because the product page is where your customers “window shop.”
It’s where their buying decisions are made – and lost.
The pages below do a masterful job of presenting their products and providing info that gets the sale.
Let’s go shopping!
North Face is known for its extreme weather gear.
Not only is their clothing superbly manufactured, but their product pages are also second to none.
Take this Retro Rain Jacket, for example.
The jacket is shown in different views, front and back and even with the hood on and off.
They even show a super close-up to demonstrate the jacket’s rain resistance:
That’s how you create intimacy.
That’s how you make a sale.
We also love, LOVE the product snapshot:
This simple element gives a quick, visual description of the product in a way we’ve seen on few if any other websites.
Uniqlo is a Japanese fast fashion retailer, noted for its dedication to clean design, and affordable, versatile products.
What we like most about this page, beyond the high-quality, large photos, is the star rating directly under the product name.
It’s the first element after the product name.
Even before the price.
Uniqlo is well aware of the power of social proof and uses it to their advantage by placing reviews in such prime real-estate.
Because the product ranking is clearly displayed and hyperlinked to full reviews lower on the page, customers can get an “at-a-glance” overview of reviews and dive deeper, if they’d like to.
Dollar Shave Club disrupted the billion-dollar shaving industry with their out-of-the-box approach to promo videos and buck-the-trend product page design.
This product page for shave lather is an example of how effective simplicity can be when presenting a product.
Above the fold, nearly the entire page is devoted to a hero product image in addition to a few photos of the product in use.
Below, the use of an orange “ADD” button draws the eye, as does the customer review section. By scrolling, customers can see the rest of the details about the product:
This maximizes screen real estate – and allows this product page to be both simple and effective.
As one of the largest eCommerce websites in the world, it probably comes as no surprise that Amazon gets a lot of things right when it comes to product page layout.
What works best about this page is that it has a clear hierarchy of information.
On the right-hand side is a box that lets you :
This may seem like a lot packed into a single design element – but they’re all related.
They’re all actions a customer can take related to the items or the shopping cart..
This clarity makes taking an action – like checking out – much easier for shoppers.
Sephora is one of the largest makeup companies in the United States and has captured nearly 10% of the $56 billion beauty market in the US – thanks to plenty of brick-and-mortar stores, and a slick, well-designed website.
This product page by Sephora is a good example of the importance of detailed, informative product descriptions.
Buying makeup online is, as you can imagine, is not easy.
You can’t try it on in-store, and makeup palettes can be very expensive.
This particular palette of cheek pigment clocks in at $59.
Sephora realizes that photos alone are not enough to convince a customer to buy.
To overcome this challenge, their product page breaks down everything about this item, including:
All of this information is easily accessible and organized logically, making it easy for a customer to get answers to their questions.
Casper was one of the first companies to really shake up the world of mattress sales – and they remain a market leader, despite the fact that there are now nearly a dozen online-only mattress companies fighting for this market segment.
A mattress is a big investment.
To counter this price aversion, Casper created their product pages to address the most common concerns when purchasing a big-ticket item:
Below the product details and the photos, Casper answers the three most common questions:
There’s also the option to chat, live, with a customer representative – which helps ensure that customers get all of the information they need to make a buying decision.
American Apparel went bankrupt – then was reborn as an online-only retailer, shuttering all of its brick-and-mortar stores, and focusing on internet sales. So far, the company has been quite successful under its new ownership – and the brand is stronger than ever.
What we love about American Apparel’s product page is how the color swatch and CTAs “follow you” as you scroll down the page:
Even when you scroll down to view further details and photos, the calls-to-action – such as selecting a color, choosing a size, and adding the product to your bag – never leaves your customer’s sight.
This makes customers more likely to convert, and add the item to their shopping cart.
J. Crew is one of the most well-known brands when it comes to upmarket clothing, and its website uses a simple design to streamline the buying process and convert website visitors into buyers.
Their product pages, like this one for a Nike Killshot @ snearker follows pretty much every product design best practice:
But what makes this product page shine is the “SIZE & FIT” section just below the ADD TO WISHLIST button.
Sourced from user reviews, this helps customers understand if these shoes run true-to-size, or if they run large or small.
By having this information displayed prominently on the product details page, J.Crew ensures that customers have all of the information they need to complete their purchase with confidence.
So, what takeaways can we gather from this collection of products pages?
While each one is different, here are some actionable insights you can think about when designing your own products pages.
Learn more about eCommerce best practices: