Product detail pages are multi-taskers. They provide product information that customers crave, allow customers to experience the product through their device, and when optimized well, they pull in search engine traffic you’d otherwise miss.
This week is Chapter 24 of Ecommerce Illustrated, and contains 24 tips for optimizing product detail pages.
Some elements of the product page are so important, they get their own Ecommerce Illustrated chapters. Stay tuned for in-depth guides on product descriptions, reviews and cross-sell recommendations.
24 Tips for Product Detail Pages
1. Put breadcrumbs in white space
Most ecommerce sites offer breadcrumbs as a navigation aid, but it’s important that they’re placed in white space. Breadcrumbs baked into shaded bars are much harder to notice.
2. Consider prev and next buttons within set
Breadcrumbs aren’t the only effective way to support product discovery. Rather than force the customer to pogo-stick between product list pages and product detail pages, consider big and bold Previous and Next buttons.
3. Support hover to zoom images vs click and close
Hover effects take the friction out of image zoom. Not only does it save click to enlarge, but also the click to close.
The problem with click-to-zoom is zoom windows often take over the screen, and their close buttons can be hard to spot. Enlarge links can also be difficult to spot (such as the arrow icon overlaid the default image below).
When the product image takes over the product page, the customer must notice and click the “Close” or “X” buttons, which typically are very subtle.
4. Show product images in context
When it comes to product images, the more the better. But the most important alternative product image is the one that shows the product in context. These images show relative size, fit or other attribute.
Contextual images can also show a product in use – a very powerful selling tactic.
Of course video can be very effective to show a product in use. ASOS shoots “catwalk” videos for most apparel items.
Sephora leverages social media, embedding relevant Youtube tutorials and reviews. You may also be able to source manufacturer video content.
Bonlook’s virtual try-on tool is the ultimate contextual product image!
5. Avoid dropdown menus whenever possible
Drop-down menus on product pages are problematic because they hide available SKU options, and pose problems on mobile devices.
In extreme cases, multiple SKU attribute variants are combined into a single drop-down menu, such as this example from Overstock.
Instead, separate SKU attributes like color and size, and present them as scannable and clickable buttons (that are also tap-friendly for mobile devices).
Don’t forget to clearly indicate when SKU attribute options are unavailable.
6. Disable one-option dropdown menus
If you must use drop-down menus, follow ASOS’ lead and disable these menus when they contain only a single option.
7. Use a bold Add to Cart button
A conversion rate optimization fundamental is big, bold, prominent calls to action convert better than small, subtle and poorly-placed ones. Online retailers rarely rely on small, gray rectangular buttons in 2016.
While you can endlessly test cart button size, color, shape, position and label text, ideally your cart button stands out from its surroundings.
It’s not enough to just use a bold color. Cart buttons can easily get lost in a mix of social icons, color swatches and secondary calls to action.
When in doubt, err on the side of big, juicy, prominent cart buttons.
8. Show clear error feedback when SKU attributes require selection
When products require attribute selection like size, color, flavor or material, it’s important to provide very obvious feedback when a selection has been missed.
Rather than a subtle-callout (above), try inline flags like Victoria’s Secret (below) or dialog boxes like Nine West (below-below).
Many sites opt to simply gray out and disable a button until selections have been made, but this is problematic as customers may either frustratingly try to click the button repeatedly and assume your site is broken. Or, having seen active, colored buttons on other products on your site, assume the gray button means the product has sold out.
The best approach I’ve encountered is Betabrand’s. If you click Add to Cart without selecting a size, it expands the size selection menu. (Not a drop-down menu!)
If the customer fails to select a size, the button changes to a different color, with Select a Size as the label (or color, if that’s the missing attribute).
9. Avoid pre-selecting SKU options
Many sites apply a default color or size selection when you land on a product page.
Careless or lazy customers may add to cart without realizing they haven’t selected the color or size they really want.
Another issue with default selection is when the selected SKU option(s) sell out, it appears the entire product has sold out. This may also lead to problems with your “email me when back in stock” feature. For example, if your default size is XS, you’ll have an erroneously large waiting list for XS, and customers who actually want other sizes will fail to be notified.
10. Emphasize product and business value props
Merchandising isn’t just about product images, pricing, discounts and product descriptions — there are other persuasive ways to romance the features of a product and help your customer in their purchase decision.
Star ratings are table stakes, but eBags kicks them up a notch by calling out another piece of feedback it gathers – would you recommend this product?
“83% of customers would recommend” can instill as much or more confidence and social proof as a 4-point-something star rating.
Lululemon frames its product description as storytelling with its “why we made this” callout.
Betabrand creatively highlights special features such as “fully reversible” and “four looks in one.”
Taking a cue from Amazon, 80sTees.com calls out a product’s sales position within a category. Number one in Chewbacca shirts!
Don’t forget your business value props. Why should a customer transact with your site instead of your competitors or Amazon?
Lululemon offers free returns:
ASOS offers free worldwide shipping:
What’s your business value prop? Bake it into every product detail page.
11. Create urgency
Communicating urgency can spur your customer to quicker action, but it’s important that you treat them like calls to action – making them prominent, and placing them proximal to your Add to Cart buttons.
Instead of using black text…
…use color to grab attention.
Many sites use “X left in stock” callouts, but you can also remind the customer that sale items can move quickly.
Make sure your call-to-urgency appears in a relevant location. In this example, the sale countdown should appear next to the sale price instead of tucked away in the top corner.
12. Use icons to draw attention to important content
Victoria’s Secret adds a circular arrow icon to call attention to its return and exchange information.
MEC uses a ruler icon for its size chart, and a building icon for store availability.
Dress Barn’s ruler is yellow, even more eye-catching!
13. Make tabbed content obvious
Tabs are one way to organize product detail page content, but their design affects their engagement.
White-on-white tabs may be completely overlooked.
Instead of white-on-white, draw attention to tabs with unusual colors and shapes.
Mothercare uses a “Next Tab” button as a failover tactic.
Avoid placing tabs in dark bars that span the width of the page. Not only are they easy to overlook (the brain concentrates on white space), they break up the product page’s visible fold and may discourage exploration and scrolling below them.
14. Consider expand and collapse menus
Accordion-style expand-and-collapse menus are an alternative to tabbed content or uber-long pages, but can also suffer from invisibility if they’re not designed conspicuously. For example, consider using marker icons.
15. Make descriptions scannable
Don’t forget web copywriting best practices when it comes to product descriptions! Use concise sentences and paragraphs, embrace line spacing and bullets, and emphasize using bold type and color.
Target’s clumpy description is very difficult to scan and process on desktop and mobile:
Likewise Oravo’s description, squeezed into an awkward template, is difficult to read:
Toolbarn’s use of paragraph spacing and bullet points makes its descriptions far more easy to scan:
Mothercare uses short paragraphs, colored headings, line spacing and bullet points to ease reading:
Avoid placing product descriptions atop gray or colored fields. Web and mobile text should be high-contrast whenever possible.
16. Don’t let descriptions slip below the fold
Despite claims to the contrary, the concept of the fold still matters to web design. Though users are more inclined to scroll today than they were in the late 90s and individual screen and browser window sizes vary from user-to-user (making the fold impossible to design for), content that’s buried below the user’s fold is less likely to be seen or engaged with.
It’s not obvious in this example that description and review content is available further down the page.
A template’s use of white space influences what customers expect. Show a portion of a product description or any other content that cuts off at the fold encourages scrolling.
17. Optimize social sharing
If you use social sharing buttons on your product pages, first make sure they’re loaded last in your HTML as to not drag down page load speed.
Second, make sure you test them to ensure they’re not so distracting that they drag down conversion rates.
Third, make sure customers understand how they work. The icon below (top right) may be universally recognized by social media marketers as a “share this” button, but it’s certainly not clear to most customers.
If you want to consolidate social sharing options behind a single button as to not distract customers from more important content, make sure you label it “Share,” like Newegg below.
You may also want to test the placement of your social icons. Dolls Kill places them above product information and combines them with the favorite tool (heart). This approach may actually reduce engagement with the favorites feature because it doesn’t stand out enough to be noticed as such.
Revolve Clothing places sharing buttons below the product image, which contextually makes sense for visually-driven products like apparel — the image is more important than the product title, which a shopper may not even read or fixate on.
Many sites leverage Olapic to display fan photos from social sites like Instagram directly on the product pages of items included in the pics.
This inspiration-of-the-crowds can be very effective, especially for apparel (Instagram), interior decorating (Houzz) and cooking (Pinterest) retailers.
18. Highlight featured reviews
While customer reviews are the subject of their own upcoming Ecommerce Illustrated chapter, smart online retailers pull a featured review (like most helpful). The more reviews there are to weed through, the more helpful this tactic is.
19. Draw attention to reviews
Reviews help your customer make their purchase decision and boost conversion rates, so don’t hide them! If you place behind tabs, include colored stars to attract more attention.
Putting them in an easy-to-overlook tab isn’t optimal.
If you hide reviews behind a tab, test this approach against giving reviews their own section. It’s hard work to attract customer reviews – show them off! Tips for getting more customer reviews coming in an upcoming chapter of Ecommerce Illustrated.
20. Have staff answer Q&A
If you use Q&A tools, don’t leave ‘em hanging. Other customers rarely take the time to answer questions (especially on mobile), and may not know what they’re talking about, so a dedicated in-house expert’s is the best response.
21. Support omnichannel researchers
This tip requires technical judo-chops, but the ultimate brick-and-click experience connects local store inventory with the online channel.
American Eagle Outfitters’ try-and-buy reserve tool is one example.
Home Depot’s tool even provides the aisle and bay location. Props!
22. Include return-busting content
Returns cost your business more than just the money you refund to the customer. Show return-busting content that addresses the common reasons why products are returned.
Victoria’s Secret gathers fit feedback to show an overall fit rating. This helps buyers understand at-a-glance if they should go up a size to be safe or if a given style fits true to size.
If you request “reason for return” when you take product back, you can feed this insight back to your merchandising team.
For example, are fragrances frequently returned due to smell? Create a “scent graph” that plots notes from fruity to floral, musky to classic like this Scent Map tool.
For individual products, consider including a “best for” callout, such as “normal to dry hair,” “trail running,” “pairing with seafood,” or “sports photography.”
23. Show contextually related categories
Cross-selling is another product page tactic that earns its own Ecommerce Illustrated chapter. But aside from “you might like,” savvy online retailers find ways to recommend related categories contextually (within “regular” product content).
For example, a “find similar products by category” tab:
Pair this with a pair?
Who needs breadcrumbs?
24. Build your opt-in email list
Finally, you might not convert your visitor today, but you can ask them to get connected!
Tools like Social Annex allow you to present sidebar calls to action that trigger opt-in pop-overs to build your list and incent a first purchase.
Bonus points if you segment by gender for more relevant email campaigns!
Coming up next in this series on product page optimization:
- Writing persuasive and SEO-friendly product descriptions
- Merchandising product detail pages (tips for cross-sells and product recommendations)
- Tips for getting customer reviews
- Optimizing mobile product detail pages
- Testing product detail pages
To catch all chapters in this series, please subscribe!
Need help with your ecommerce A/B testing strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.