24 Tips for Optimizing Product Detail Pages

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.

breadcrumbs-in-gray-bar

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.

prev-next-buttons-pdp

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.

burton-hover-zoom

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).

prod-enlarge

prod-enlarge-2

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.

oco-image-enlarge

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.

product-in-context

Contextual images can also show a product in use – a very powerful selling tactic.

vat19-product-in-context

Of course video can be very effective to show a product in use. ASOS shoots “catwalk” videos for most apparel items.

asos-video-context

Sephora leverages social media, embedding relevant Youtube tutorials and reviews. You may also be able to source manufacturer video content.

sephora-youtube-vids

Bonlook’s virtual try-on tool is the ultimate contextual product image!

virtual-try-on-tool

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.

dropdown-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).

multi-sku-config

Don’t forget to clearly indicate when SKU attribute options are unavailable.

strikeout-skus

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.

disable-solo-selections

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.

gray-button

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.

bed-bath-cta-style

When in doubt, err on the side of big, juicy, prominent cart buttons.

juicy-cta

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.

mothercare-select-option

Rather than a subtle-callout (above), try inline flags like Victoria’s Secret (below) or dialog boxes like Nine West (below-below).

vic-secret-config-error

nine-west-config-error

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!)

betabrand-cta-2

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).

betabrand-cta-3

9. Avoid pre-selecting SKU options

Many sites apply a default color or size selection when you land on a product page.

uo-default-sku

Careless or lazy customers may add to cart without realizing they haven’t selected the color or size they really want.

uo-default-sku

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?

ebags-86-recommend

“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.

lululemon-product-value-prop

Betabrand creatively highlights special features such as “fully reversible” and “four looks in one.”

product-value-prop-betabrand

Taking a cue from Amazon, 80sTees.com calls out a product’s sales position within a category. Number one in Chewbacca shirts!

80s-tees-product-props

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:

lululemon-biz-value-prop

ASOS offers free worldwide shipping:

business-value-prop-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…

urgency-black-text

…use color to grab attention.

contextual-urgency-yoox

Many sites use “X left in stock” callouts, but you can also remind the customer that sale items can move quickly.

sale-items-sell-fast

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.

sale-ends-not-proximal

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.

return-icon

MEC uses a ruler icon for its size chart, and a building icon for store availability.

mec-icons

Dress Barn’s ruler is yellow, even more eye-catching!

dressbarn-size-chart

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.

oco-tabs

Instead of white-on-white, draw attention to tabs with unusual colors and shapes.

shaped-tabs

Mothercare uses a “Next Tab” button as a failover tactic.

next-tab-button

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.

toolbarn-tab-bar

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.

expand-collapse-description

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:

target-description

Likewise Oravo’s description, squeezed into an awkward template, is difficult to read:

oravo-description

Toolbarn’s use of paragraph spacing and bullet points makes its descriptions far more easy to scan:

toolbarn-description

Mothercare uses short paragraphs, colored headings, line spacing and bullet points to ease reading:

mothercare-description-spacing

Avoid placing product descriptions atop gray or colored fields. Web and mobile text should be high-contrast whenever possible.

low-contrast-description

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.

spencer-desc-below-fold

It’s not obvious in this example that description and review content is available further down the page.

spencer-desc-below-fold-2

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.

social-sharing

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.

newegg-share

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.

social-icons-high

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.

social-icons-below

Many sites leverage Olapic to display fan photos from social sites like Instagram directly on the product pages of items included in the pics.

uo-social-merch

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.

most-helpful-review

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.

red-stars

Putting them in an easy-to-overlook tab isn’t optimal.

ratings-tab-subtle

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.

qa

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.

uo-in-store-lookup

uo-in-store-lookup-2

Home Depot’s tool even provides the aisle and bay location. Props!

home-depot-in-store

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.

fit-rating

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:

contextual-cross-sell

Pair this with a pair?

mothercare-contextual-crosssell

Who needs breadcrumbs?

under-armour-shop-all-tops

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.

save-20-promo

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.

You may also like...

Leave a Reply

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