Tackling the topic of product detail page layouts is daunting because there is no short answer. Saying one element such as large product images increases conversion, though it's proven, does not tell the full story.
The product detail page needs to be dealt with as a whole. This article will do just that. It will focus on the 'must have' page elements, recommend where they should appear on the page, explain why, and provide tips on how to maximize the value of each.
To support recommendations, experienced online retailers will be used as examples, known experts will be quoted, and for those who are visual, a wireframe has been put together for reference.
The purpose of the product detail page is to:
- Reduce distractions/focus a consumer's attention.
- Appeal to various buying stages.
- Satisfy various buying motivations.
- Answer questions to build confidence.
- Make the desired action simple and obvious.
Bryan Eisenberg has this to say about consumer buying motivations and how to approach:
At the most fundamental level, all people are motivated by a single, critical question: "what’s in it for me" (WIIFM)? Their dominant personality types strongly influence how they ask that question, perceive value, and consciously – or more typically, subconsciously – approach a decision-making task.
This statement leads to two fundamental philosophies for the product detail page:
The product detail page follows a hierarchy of information structured in an intuitive pattern aligned to how your target consumer wishes to view content during their buying journey.
"F Pattern" eye tracking studies indicate typical patterns and help to form a foundation for this hierarchy.
- The content displayed must deliver the right messages (in the form of copy, images, video, confidence building tactics, and obvious action points) to satisfy the "what's in it for me" questions, and is why a product detail page requires considerable thought, work and ongoing effort.
To simplify the breakdown of key elements of the product detail page, it has been broken down into four sections (see wireframe below):
- Section 1: Top left area of the page within the active window.
- Section 2: Top right area of the page within the active window.
- Section 3: Left hand side of the page below Section 1.
- Section 4: Right hand side of the page below Section 2.
It’s important to note some experienced online retailers have moved to a three-column layout (ASOS, Amazon). This is not the time to delve into the pros and cons of this layout, however, if interested, make a comment below.
With all of the talk about removing distractions at product detail page level, navigation is gone from the left hand side of the page. Breadcrumbs add a necessary usability element to assist those who wish to go back a step or two.
Product title can either sit directly above the image or at the top of the page to the right of the image. Eye tracking studies are consistent, stating the eye starts at the top left and moves left to right suggesting the ideal placement for the product title is the top left hand side in order to provide the necessary validation.
Amazon places the product title to the right of the image:
John Lewis has the product title over top the image:
Product title tip one: If you carry multiple brands, state the brand name in the title of the product.
- “Bose Soundlink Bluetooth Mobile speaker” (found at Amazon).
- “Calphalon Simply Calphalon 10” Omelette Pan with Cover” (found at Zappos).
- “Polo Ralph Lauren Custom Fit Long Sleeve Polo Shirt, Polo Black” (found at John Lewis).
Product title tip two: do not be afraid to have long product titles. In a two-column page layout, long titles are easily accommodated. A longer title explains to consumers exactly what the product is, it assists with SEO and there is opportunity to leverage the brand.
Main product image
People no longer want to browse a website, they want to experience it. The old saying "a picture is worth a thousand words" takes on new meaning online.
Those with a merchandising strategy that includes an approach to displaying products in ways to excite consumers and allow them to see themselves using and benefiting from the product will have an advantage over their competitors.
Answering the "what's in it for me" through pictures is simple and fast and is why product images build conversion.
Tip one: How big should the main image be on the product detail page? If the images are to a high standard and effectively tell the story of the product, the larger the better.
Zappos has adopted this to a new standard with a large main product image still making room for other content.
Tip two: Complimentary images are exactly that, they compliment the product or merchandise the product to emphasise benefits or unique features.
Use this space to show different angles of the product, close up shots, or the product in use.
The 'Sharing' section comprises both social icons and sharing functionality. Have this section close to the images and away from the buying area.
Sharing should always be considered the 'Plan B' call to action on the page and not distract from the main purpose of the page (selling).
This can be an effective tool if the functionality is built properly and the business discipline is in place.
Tip: Simply displaying a link titled "add to favourites/wishlist" is the easy part. To monitise this functionality, try one or all of the following:
- Emails are sent out to the consumer at defined intervals reminding them of their wishlist item(s).
- Offer discounts. It’s not recommended to make this a regular occurrence due to it conditioning buying behaviour, but periodically offer an incentive to purchase the wishlisted item.
- Provide notification of a sale where this item will be temporarily reduced.
- Prompt the consumer to send the wishlist item(s) to a family member, spouse or friend to purchase for you. There could be triggers to send this message i.e. Birthday, Christmas, Valentine's, Mother’s Day.
Though every business seems to do it, the presence of social sites on the product detail page is not important.
The reason for this comes down to understanding the difference between the buying intent before a purchase, and the affinity created from the product and/or brand after a purchase.
The expression of intent (exploring products and product content) and affinity (emotional attachment) occurs at different stages of the customer journey.
Tip one: Use the affinity shift in the customer journey through the tactical placement of social sites post purchase (i.e. confirmation pages, and confirmation emails).
Tip two: Another tactical placement for social sites is at the end of video.
Content situated at the top right section of the page within the active window.
In order of importance from top to bottom of Section two:
List the RRP, the Sale price (if applicable) and the savings.
Tip: Make the percentage saved obvious. Years of studies have proven the power of showing the percentage savings. Use this bricks-and-mortar tactic in the online environment.
Amazon does this effectively, by showing both the dollar value and the percentage savings.
This is in the form of a star rating and a link to read the customer comments (link takes consumers to the bottom of the page).
Those who read reviews and/or testimonials base their buying decisions on this content. 61% of people read reviews and 63% are more likely to purchase after reading a review.
And this is why this page element is prominently placed. Don’t make the excuse your product mix is seasonal and there is not enough time to aggregate enough reviews to make it worthwhile.
The right customer review technology will assist in automating and simplifying this function of the business.
Product benefit copy
Common "what's in it for me" questions relate to how the product will benefit a consumer (i.e. "how can this make my life better"), making this concise message important.
There is a shortage of good examples and this could be due to the level of content lifting in other forms such as better quality images and/or the use of video.
Product size copy
Below the benefit copy make a statement explaining the sizing of the model wearing the garment (assuming it is an apparel site using a model): height, chest size, waist size, and the size of the garment he/she is wearing.
The Iconic does a good job of this. Communicating sizes for non-apparel products builds average order value. For example, Florists who communicate the product image is a 'large bouquet' increases the incidence of the large size being selected (defaulting the product selection to 'large' also helps).
With the immense popularity of showrooming and general comparison-shopping with mobile devices, the presence of a product code near the top of the page assists this information/buying process.
Make a brief statement about the delivery, then link off to more content. Ideally, the brief message should consist of the cost and the standard time to deliver to assist in accommodating consumers who want their products immediately.
This message reduces shopping cart bailouts by introducing the cost at the right time.
Tip: Getting the delivery message right is fully dependent on how simple your pricing model is for shipping, and is why 'Free Shipping' is a conversion enhancer.
Apart from the no-cost element, it is easily communicated site wide. ASOS has the Free Delivery message loud and proud on all product detail pages with a simple pop up communicating timelines for global regions.
The 'buying area'
The buying area is a section of the product detail page containing all information required for a consumer to select the right product for purchase.
The buying area is meant to draw the consumer’s eye making it obvious this is the primary action he/she is meant to take on the page and is achieved with subtle shading or colouring of the background area.
This, combined with a strong call to action button, makes this area of the page obvious. An example of the buying area in use can be seen on every product detail page of Zappos.com.
The buying area contains the following content listed in order:
- Product availability (in-stock message).
- Colour options (if required).
- Size guide (if required).
- Size options (if required).
- The call to action button.
- Confidence building message i.e. security.
Assuming you display products in stock, a simple statement such as 'in stock and ready to ship' is a confidence builder for the later stage buyer.
Having this statement sitting within the buying area provides the perception the statement is specifically for this product or any variation of the product.
Consumers understand the use of both swatches and drop downs listing colours, but be aware of the pros and cons for each.
Swatches can be a challenge in accurately representing the colour of the item and becomes poor merchandising practice. If there are a large number of colour variants, swatches take up a lot of valuable page real estate making the drop down a more suitable option.
Tip: When a colour option is selected, have your main product image change to reflect the colour selection. This is de-risking the purchase for the consumer, and takes the reliance off of getting the swatch thumbnails identical to the fabric colour.
Have the size guide as a link directly above the size options. As the eye of the consumer fixes on the buying area it begins to work down from top to bottom.
If a consumer is unsure of their size it is best to educate them on the sizing before they are asked to select a size.
Tip one: When displaying size guide content, keep the consumer in the product detail page. If the size guide is another piece of software to assist in building confidence in the size decision, make sure it is simple and usable and communicate the benefits of taking these extra steps.
Don’t make sizing a barrier to the sale.
Tip two: If the size guide is content, ensure it is content for that particular garment type. For example, if the garment is woman’s jeans, do not have sizing content showing sizing for men’s jeans.
Great example of this is on ASOS. The size guide content is specific to the sub category. The Men's Jumpers and Cardigans sub category has a 'Men’s Jumpers and Cardigans' size guide. Adding friction at this stage of the buying journey can lose a sale.
Like colour, there are pros and cons of drop downs vs displaying 'size boxes'. Boxes take up space and will push the call to action down the page.
Many will argue the use of boxes makes it easier to select a size, but consumers understand drop downs. The true advantage with drop downs comes with planning page layouts/templates for product detail pages.
Regardless of the number of sizes, the drop down will always be a fixed shape taking up the same amount of space on the product detail page (make sure you manage the width of your drop down box for longer titled variations).
A strong argument against the display of boxes for size (and colour) relates to the inflexible nature of the templates driven from the ecommerce technology.
Many ecommerce templates have limitations to their ability to display different variations of product detail pages. For example one product may have 10 sizes and another may have two, but the same product template is used meaning the product with only two sizes on offer has a block of white space, making the page look unorthodox.
Zappos and ASOS use drop downs, Amazon uses a combination of both and John Lewis use boxes for both colour and size. If you are focused on the integrity of page layouts and want to control the placement of your call to action, use drop downs.
Add to cart button
Since this is the primary desired action for this page, it’s worth sharing a few key characteristics of a best practice add to cart button:
- It is a contrasting colour to your site. If your site is green, regardless of the “green means go” mantra, do not have a green button.
- It is large (size matters).
- It draws the eye of the consumers; making it obvious what action he/she is supposed to take.
- It looks “clickable” i.e. it’s not "flat".
Many articles tackle this subject very well, the point here is, there is a science to creating this button.
Tip: Incorporate messages around the add to cart button to build confidence.
Amazon used this strategy for years on its 'add to cart' buttons. Even though they removed it, we have still used it quite successfully for clients recently. Notice how Amazon used the words 'you can always remove it later' on the button and the use of the lock graphic and the additional words 'shopping with us is safe. Guaranteed.'
Left hand side of the page below section one.
Ideally, the top of this section can be seen just above the fold to indicate there is more content to view. This section is meant to be rich with content to satisfy those who are in information gathering mode or early stage buying.
They are methodical in nature and work at a very slow pace to ensure they can find every bit of information to assist them in making the right purchase decision and is why this content can be safely below the fold. These consumer types are 'scrollers'.
There are various ways to manage content in this section with the use of tabs being the most common.
Product feature copy
Consists of materials, material breakdown (i.e. 40% cotton), dimensions, weight, cleaning instructions, assembly instructions, technical features (critical for electronics). The more detail the better!
Tip one: Do not have this content bundled up in PDFs. There are obvious SEO reasons, more importantly it needs to be easy to read.
Tip two: Make sure the pixel size of your font does not get smaller as you scroll down lower on the page. The 'scrollers' are not skimming, they read everything. Make it easier on them.
As long as consumers can easily read and follow the comments, this section will do its job. There are many extra functional tools that can be used such as 'was this review helpful?', but in the early days, keep things simple.
This content de-risks the purchase, and is important to have sitting within the product detail page. It does not matter if it is the same content site wide.
The time returns content is relevant, so place it in a relevant position to compliment the buying process.
Same as returns information in the sense that it’s OK if it’s the same message throughout the site, it is keeping the consumer on the page. The entire delivery story must be told. All costs for all regions.
Tip: Mention the track and trace service if it is available. It is another method to de-risk the purchase.
The detailed content for sizing can be below the fold if there is a link in the “buying area” that pulls consumers down to this area of the page.
Right hand side of the page below section two.
Product relationships (cross and up selling).
This section focuses on building relationships with the feature product and is below the buying area. The placement of this content is similar to how the chocolate treats are situated in checkout lanes at the grocery store.
Consumers can and do venture into a buying mode where distractions of other product offers will add friction to their buying process. Only once the buying mode is complete with a product selection is the consumer susceptible to purchasing other items.
The proximity of product relationships to the buying area and its relevancy improves its chances for selection.
This enters the classic debate of taking consumers directly to the shopping cart once the add to cart button is selected vs. leaving the consumer on the product detail page with the hopes another product will be selected for purchase.
Great topic for another day (if you are interested to read more about this topic make a comment below).
Tip: Displaying relevant product relationships can assist in the purchase of the main product. This is merchandising in its truest sense. Bricks and mortar retailers have perfected this tactic for decades.
The consumer may not purchase the extra product, but it assisted the buying decision.
The ASOS 'Complete the look' does a great job of replicating this experience online.
Recently viewed products
When browsing through sites with large product mixes this can be helpful.
The product detail page is where the magic is supposed to happen. When a product detail page does its job two things happen:
- The consumer meets his/her goal (they have their need fulfilled).
- The retailer achieves its goal and acquires a happy customer.
Following some or all of the recommendations here will provide a solid starting point. Your continuous improvement process will take it from there and is why the top performing online retailers have evolved.
Product mixes and target markets influence product page layouts, however, if you don't have a foundation from which to start, evolution is slow and costly. Learn from the experience of others and expedite the evolution of your product detail page.
Our Ecommerce Best Practice Compendium contains more than 170 valuable tips to help online retailers to improve the ecommerce user experience and maximise conversion rates.