Chapter 3 Personalize Your Product Page

A product page is where people decide whether they need your products or not. Yet, traffic to this page type is not necessarily hot traffic. 

People land on your product pages for many reasons and at many temperatures. And since it’s where people make up their mind, serving each group of traffic with personalized content is critical to your conversion rate.

Essentials content needed for a personalized product page

When it comes to product pages, personalization is virtually equal to optimizing particular content to meet the needs of returning traffic. Apart from that, most of the content is needed for all traffic types. These content form the structure of a typical product page:

  • Product information
  • Product call-to-actions:
    • Wishlist, add to cart
  • Product benefits
  • Product unique value proposition
  • Social proof
    • Product reviews
    • Video testimonials

Cold traffic – Catch their attention with product USP

Usually, cold traffic is from first-time visitors who get landed into your store via a direct link. However, though browsing the page without a particular product in mind, anyone intentionally clicking on the link has a particular interest in that type of product.

For visitors with such a low level of dedication, showcasing the best features of the product should be prioritized first.

01-USP-target_com
Target.com uses both product images and product description to feature the USP of the product

The content included in this section about cold traffic is essential content for any product pages and therefore needed for all traffic groups.

Product information

Product images

Upon entering a product page, people appreciate having at least a few different images to click through and tend to stay longer on pages that have more images.

Basically, each product needs at least 5 images to be properly evaluated, which could be grouped into 3 types:

  • Images that show products “in scale”: Providing images with its surroundings gives people a sense of its proportion and how it fits in their own space.
02-1-product-image-inscale-01 02-2-product-image-inscale-02

Gauging the size of the product becomes much easier with a hand in the image.

  • Images that highlight a product’s features.
  • Images that show products from a few different angles

Along with the 3 basic image types, specific types of images are necessary for certain product types:

  • Lifestyle images: These help people associate the product with a desirable lifestyle.
  • “Accessories included” images: If any accessory is included in the purchase price, it needs to be shown with the product in product images.
03-lifestyle-image-best-buy
An example of a lifestyle product image
04-product-image-walmart
Walmart provides images of every angle possible of the products

On mobile, it’s necessary to have an indicator that many product images are available. This makes sure people don’t confuse the default image as the only image. Allowing people to swipe to view the next/previous image is also important, as it creates a smooth mobile user experience and makes it easier to explore them.

05-ASOS-product-image-mobile-1
ASOS uses dot icons to indicate that there are many images available

Product price

Product price is the basic information that many people seek for right upon entering a product page. Being unable to quickly find the product price can easily frustrate people and even leads to a negative judgment of the whole site.

Locate and style the price so that it’s the most visible possible so that people can find it without effort.

06-ASOS-product-price-1
ASOS highlights the price in red, making the price dominant and hard to overlook
07-ASOS-product-price-mobile-1
ASOS’s decent and eye-catching price on mobile

For products that are at a discount, including the original price is a must. This is to make sure visitors are aware of the amount of money saved, create a psychological impact and encourage making purchases.

08-compare-at-price-victoria-secret-1
“Compare At Price” makes sure people know they save money buying the product

Product variations

Several product types come in multiple variations. Depending on the industry, the requirement for the structure and UI of product variations varies. But regardless of the industry, there are some principles that product variation should stick to avoid fundamental UX pitfalls.

  • Content consistency: Make sure product information is synchronized across all variations so that visitors can compare the variation and make an accurate assessment.
  • Use color swatches, small photos or labels instead of a dropdown list: Making all variations visible gives visitors an overview of the options available and accelerates selection. Also, color swatches and small photos allow visitors to visually evaluate the variations, which cannot be done with a plain text description.
09-walmart-variation-white
Make sure people find the same information with each variation selected.

Product benefits

Be straightforward and avoid flowery language

Use bullet points, blocks of text, and headlines to make the section as easy to scan as possible. Absolutely avoid flowery language that requires more reading without delivering more value. 

People tend to scan everything to seek product information, lengthy language can slow down the process and lead to needless frustration.

10-product-benefit-target_com
Use coherent language and make it easy for visitors to scan the product’s specifications
11-product-benefit-mobile-1
Target.com uses bullet points to present the product highlights, making the section look neat and coherent.

Use images and video

Compared to text, images and videos are always preferred. Not only illustrates product benefits better, images and videos also reduce the chance information is overlooked.

12-nothern-tool-product-features-images-video
Notherntool effectively uses images and video to present the benefits of the product
13-product-benefit-notherntool-mobile
For complicated spec-driven products, images are indispensable

Product unique value proposition

If there’s something that makes your product stand out from its alternatives, make it highly visible, even visually prominent. It can be the turning point that people make their decision to choose your product.

14-iphone11-USP
Apple highlights the iPhone 11 Pro’s unique value proposition.
15-Apple-USP-mobile
Apple has always been good at leveraging its unique value proposition.

Warm traffic – Assure visitors with coherence

Visitors get warmer when they click a link, submit forms or view some images. Given their previous actions, warm visitors are supposed to be more familiar with the product and are seeking more information.

For these visitors, factual and neutral information, presented with coherency would push them closer to the decision to make purchases.

Social proof

Back to Baymard’s research about why people shop online, 44% of test subjects responded that it’s because they can see other users’ reviews on the products.

16-why-people-shop-online
44% of people shop online because they can see other people’s reviews.

Product reviews

Usually, people reach the reviews section to seek objective information. Make sure the section is as objective as possible and give them a proper perspective.

  • Always have an option for visitors to submit a new review: Allowing review submission increases the objectiveness of your existing reviews. Also, encouraging users to upload images of how they used the product is also a way to increase trust with real product images.
  • Include a rating distribution summary: This makes sure people are not misled by the first reviews they see.
  • Display 8-15 reviews and have a “View more reviews” button: Give people a decent overview of the reviews while still keeping your site from being flooded with reviews.
17-bose_com-reviews-1
Visitors to Bose.com can quickly have a proper perspective towards the products based on the Rating Snapshot and Average Customer Ratings.
18-walmart-reviews-section
It’s easy to achieve an overview of the product’s reviews.

Video testimonials

In short, video testimonials transmit information much faster than written testimonials.

Watching other people expressing their thoughts also creates an emotional connection between your visitors and your customers. Regardless of how good your product information is, a few words from customers can outweigh the whole product page.

For intangible products and services, video testimonials are even more important for visitors to objectively evaluate the products.

Frequently asked questions

For people seeking information and considering the options, having questions answered immediately is important. Having an FAQ section allows people to leave questions and read answers for the frequently asked questions, which effectively supports their decisions to make purchases.

20-FAQ-overstock-1
Overstock’s dedicated section for questions and answers.
21-FAQ-mobile
Overstock’s FAQ section on mobile.

Product CTAs

Add-to-cart button – Give it a prominent and unique styling

On a product page, an Add-to-Cart button is indispensable. Compared to first-time visitors, the Add-to-Cart button’s features and design are important to visitors who already decided they want the products.

To avoid confusion, make sure the Add-to-Cart button has a prominent and unique styling. Ideally, Add-to-Cart buttons should be the most eye-catching and stand out from their surroundings. 

22-CTA-Amazon-confusing-buttons
On Amazon, the Add to Cart and Buy Now buttons being virtually similar in styling makes it confusing to determine which one is the prominent call-to-action.
23-Walmart-ATC-button
Walmart’s Add to Cart button excellently stands out from its surroundings, with white space and a prominent styling.
24-Walmart-ATC-mobile
The Add-to-cart button is visually prominent both on mobile and desktop.

Wishlist – Avoid requiring an account

When people like a product, yet are not ready to make a purchase, they tend to save it for later consideration. Among many things they might do, using wishlist accounts for 31% of the most popular behaviors, according to Baymard’s research.

25-_wishlist_-save-feature
A considerable 31% of responses rely on a wishlist or “save” feature to store the item when they aren’t yet ready to purchase.

Though being favored by a considerable amount of shoppers, this feature is easily dismissed due to simple and avoidable reasons. For the feature to work effectively, make sure the following factors receive decent attention:

  • Avoid requiring an account: People hate logging in. In fact, 31% of shoppers abandon their carts because they are required to create an account.
  • Make sure people know how it works: This includes how to save items and how to find the items saved. Saving products means nothing if people cannot find the product they saved.

Also, though being a convenient feature, adding a product to a wishlist is not your primary goal. A wishlist button should never be visually equivalent to the prominent Add-to-Cart button.

26-Wishlist-ASOS-1
A heart icon is a common way to indicate people can save the items.
27-Wishlist-ASOS-mobile-1
ASOS’s heart icon for wishlist on mobile devices

Hot traffic – Get rid of concerns

Returning visitors who previously added products to their carts are typical of hot traffic. Adding products to carts or wishlists is the strongest evidence of a person’s interest in a product.

These visitors clearly have a demand for the product. Clearing the concerns that are stopping them from buying would be an encouragement for them to make purchases.

Payment, shipping and returns

Shipping – Always include shipping cost

Shipping and returns are still the two biggest downsides of eCommerce and the major causes of site abandonment. Though the problems that lead to cart abandonment vary, cart abandonment can basically be minimized if this information is made clear on the product page.

  • Always include estimated shipping cost and shipping date
  • Be cautious when using “Free delivery”. Try to avoid surprising people with additional costs on “Free deliver” products. 
  • If a product is available for “Free delivery”, place the badge near the “Buy” button
28-walmart-shipping-info-1
Shipping information is made clear on Walmart’s product pages.

Returns Policy – Available and easy to read

People are about to pay for something they’ve never seen, held or firsthand tested. The anxiety that the products might not meet expectations is the main reason for cart abandonment. Clearing these concerns with a coherent returns policy would encourage people to buy the products.

29-returns-target-1
Target.com makes it clear the product can be returned within 365 days to any of its stores.

Payments – Highlight if an instalment plan is available

For products with high value, the availability of an instalment plan contributes significantly to the cart abandonment rate (or conversion rate). The principle is simple, if an instalment plan is available, make it clear and visible so that people can easily be aware of it.

30-target-payment-1
Information about payment methods is clearly presented on Target.com’s product pages.

Cart content

While people are considering a product, never distract them with another product. A cart content section can serve as an urge that draws people away from the product page, which leads to page abandonment.

31-overstock-productpage
Overstock doesn’t include the “Cart content” section on its product pages.

On its homepage, Overstock has a section showing cart content and to urge checkout. Meanwhile, the product in their cart is totally not mentioned.

Upsell / cross-sell

Product recommendation is a sensitive thing. If there’s not enough data to personalize the section with precision, consider omitting it. No recommendation is better than a “one-size-fits-all” recommendation.

32-cross-sell-best-buy-1
Bestbuy.com suggests the product related to the product users are viewing.
33-cross-sell-best-buy-mobile
Bestbuy allows quickly selecting the recommended product with the checkbox.

On mobile’s limited viewport, consider carefully the sequence of information. Including the upsell/cross-sell sections shouldn’t affect other important sections like the product image, product information, or product reviews. Ideally, an upsell/cross-sell section is placed at the bottom of the page.

Product page design for your inspiration

Below are some of the best product page designs assessed by Baymard’s Institute. Take a look at how the pages deliver product information in a concise and effective way. Get yourself inspired before diving in to design your own product pages.

Home Depot

Home Depot’s product page is highly evaluated because of its excellent product images and good product information. Also, using a sticky bar to make product information ever-visible is a smart move to keep visitors well-informed about the product.

34-Best-product-page-01
homedepot.com

Wayfair

Good layout, good product descriptions, and good Cross-Sells & Cross-Navigation are the aspects that make Wayfair’s product pages good. The Add-to-Cart button is also a good example of prominent styling for a primary call-to-action button.

35-best-product-page-02-wayfair
wayfair.com

Walgreens

Image gallery UI and user reviews are the strength of Walgreens’ product pages. Due to the nature of the product as a spec-driven product, Walgreen includes a high-quality image of the product’s supplement facts and other information, which allows users to get the key information instantly.

36-best-product-page-03
walgreens.com

B&H Photo

B&H Photo is a typical example of good product images. Every single angle of the product is detailed thoroughly. A video is also used to illustrate the product features.

37-best-product-page-04
bhphotovideo.com

Lowe’s

Product images and product descriptions are what improve Lowe’s’ product page significantly. Information is presented within vertically-collapsed sections, allowing visitors to have an overview and easily explore each section.

Lowe’s product images section is a good example on including three essential image types.

38-best-product-page-05
lowes.com

Learn more

Credit: This guide uses research findings from the Baymard Institute’s e-commerce UX research.

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×