Ecommerce Personalization Blog

Ecommerce tips, strategies, and news – all without ever having


Product Page Design that Increases Sales

Great product page design creates great customer experiences.  However, there are two significant challenges product pages face. 

First, there are many types of buyers that engage with product pages - from those exploring to those ready to buy now. And second, products are diverse. Each has it's own set of attributes, making any one product  page design unlikely to fit each product perfectly.

This post explores product design best practices to create amazing customer experiences. We look at how to use design to provide optionality for customers in three important areas: product page images, the "buy area", and cross sales.

Product Page Design Best Practices: Target Above the Fold

Product page design is challenging for a few reasons. First, the page is high stakes. Every customer passes through your product page. Second, not everyone who sees your product page is at the same stage of the buyer journey. 

Some visit product pages searching for the right fit. Others are researching. And still others come with a full intent to buy the exact product they are looking at.

Thirdly, eCommerce stores typically carry many types of products. However, despite carrying products with varied attributes, many eCommerce stores use a single product page template.

In other words, eCommerce stores find themselves trying to optimize for many types of products and customers with a single design.

These different needs put insane demands on a product page, and most fail at doing it well. To help, we broke down how Target treats their product page. 

eCommerce Product Page Image Design Best Practices

Images remain one of the most crucial elements in a product page design. Some best practices for product page images are

  • Enable zoom - Allow customers to easily see up close detials of your products
  • Relative sized pictures - Give a sense of relative size by having the item by a common object or worn by a model. 
  • Image diversity - Include pictures from different angles to give a complete view of the product.  
  • Incorporate social proof - Because images are often the first element on the page to be seen, you should aim to incorporate social proof into some of your images.
  • Clear carousels - It is easy to overlook the carousels. Great product page designs make it obvious that there are more images to explore. 
  • Detail product variations - support customer understanding of different product versions such as colors, sizes, or add-ons.

Below we pull out how Target optimizes their product page images. 

Product Image Design Best Practice 1: Zoom with pointer

Details matter. To help customers see and understand their products, Target enables an intuitive, easy to use zoom feature on all of their product images. 

Simply hover over the image and it will be resized, allowing you to inspect any part of the image you'd like. 

Product Image Design 2: Dynamically change images based on selected color

Many products have variations.

You should change the featured images to match the product attributes selected. 

In this case, the product is a short sleeve t-shirt dress. The dress is available in 9 different colors.

Target does an excellent job dynamically changing the featured images to match the selected color. 

Customers can now inspect the exact color they are interested in. 

Product Image Design 3: Incorporating Social Media Images

I love how Target incorporates user generated content into their product page designs. 

In this case, after the three model image shots they begin displaying images of regular customers with the dress on. 

How does Target curate these posts? One way is via their Instagram channel. They've created a hashtag #targetstyle to give customers an easy way to engage with the brand. 

They are then able to quickly search for uploaded images that fit their criteria for a product page image. Next, they send a simple comment to the profile asking for permission to use the image on their site. 

Again, they make use of a hashtag to make it straightforward for their team.  Below is an example exchange.

And the team doesn't stop at just one user generated post.

Multiple user generated images makes customers feel confident in buying the item. 

Product Image Design 4: Providing at scale images

Target's feaure images incorporate a model to allow visitors to see how the dress fits.  Things like how tight it is, how short the dress is in length and sleeve, and neckline are all difficult to describe in words.

Even better, visitors are able to see how the dress fits on non-models through the user generated images. 

Product Image Design 5: Making additional images in image gallery obvious 

Target doesn't overload the image carousel. Instead, they make it obvious that more images are present by placing a dark overlay and messaging letting site visitors know how many images are available. 

This is the only dark overlay on the entire product page. 

Product Page Best Practices Buy Area: How to handle multiple customer groups the right way

The "buy area" describes the widgets where customers can actually purchase the item.  

Traditionally, on desktops this is above the fold on the right hand side. Best practices for product page buy areas include

  • Provide customer reviews - Reviews are a powerful form of social proof. Reviews should be summarized in an easy to understand way. Customers should be able to inspect reviews in detail. 
  • Create short links to learn more - Give customers an easy way to learn more, either through reviews or specific frequently asked questions.
  • Easily select product attributes - Make selecting the type of product they want to purchase easy. 
  • Provide shipping information - Shipping costs is the primary reason for shopping cart abandonment. Displaying shipping costs up front, and better yet giving clear ways to achieve free shipping, removes this reason for cart abandonment. 
  • Offer more than one shipping method - Speed options such as next day delivery as well as location (such as click and collect strategies).

Target does an excellent job addressing multiple buyer types at once.

Buy Area Design Best Practice 1: Provide free shipping

Unexpected shipping costs are the primary reason for cart abandonment

Target incorporates the free shipping benefit into their value pricing strategy. They know customers value free shipping, so they use it as an incentive to get customers to increasing eCommerce average order value

Buy Area Design Best Practice 2: Quick links to learn more

Not all product page visitors are ready to purchase. 

Target does a great job providing quick links to jump to other parts of the page. At the top they give two options. 

The first is to see reviews in detail. 

The second jumps to a Q&A section. One interesting tactic they use is organizing the FAQ questions by popularity. Those that are asked most frequently get pulled to the top. 

I particularly like that Target allows customers to answer and provide feedback on the items. They dynamically insert a label "Target Team Member" when they themselves provide clarification to the FAQ. 

Buy Area Design Best Practice 3: Call to action buttons to save item 

Still other customers are looking to purchase later. We've seen online purchase behavior incorporate more and more research - most notably in the emerging research online, purchase offline behavior.

Here, Target gives customers an easy way to save the product to a personal list, or register it as a gift. 

Buy Area Design Best Practice 4: Part of a look

Target curates looks for their products. 

Looks are part education and part upsells. They educate customers on how to put various items together to create an entire outfit. In the process, they create implicit cross-sells.

We explore looks in more detail here

Buy Area Design Best Practice 5: Easy attribute selection

Lastly, Target does an amazing job exposing the various options in an intuitive, easy way. 

The key is exposing the product attributes visually as opposed to hiding them in drop down menus. Visitors can easily see various color options and have quick and selecting their preferred color and size is as straightforward. 

Product Page Cross Sales Best Practices: How to increase profits

Finally, I want to explore product page cross sale best practices.

Personalization technology has opened up numerous ways to make powerful, relevant recommendations. Here's a short list of product page design best practices you can implement to increase profits. 

Cross-sell Design Best Practice 1: Creating looks

As mentioned, looks do more than educate customers. They provide a natural way to offer complimentary products. Here, Target gives an assortment of looks for the product. 

When you click on one of the looks, a simple item widget pops up. You can easily navigate to any of the complimentary products, save them, or view more details. 

Cross-sell Design Best Practice 2: Dynamically changing product images in looks

When you offer various product attributes, it is important that you personalize the cross-sales you make. 

Dynamically personalizing looks are a fantastic use of dynamic content.

Here, Target dynamically updates the looks widget to match the selected product attributes. Both the images themselves, as well as the matching accessories are changed in real time.

Cross-sell Design Best Practice 3: Personalized product recommendations

Target's product recommendation widget is flexible. It offers a simple navigation bar to allow customers to filter the recommended products. In this case, the product we are viewing fits both a crew neckline as well as a mini length. 

Target gives us the option to filter based on either. 

Switching to mini length type dynamically updates the suggested products.

Likewise, selecting "show more" will expand the number of suggested items.  This functionality is perfect for shoppers looking to add to their cart or browse. Instead of having to navigate back to the category they came from, they can see what items they want on page.  

Cross-sell Design Best Practice 4: Easy navigation to recently viewed items

Lastly, Target makes it easy for shoppers to find previous products. Their second product recommendation widget is recently viewed items. 

As shoppers go through the product catalogue, this is a running in-session history of products they have expressed interest in. 

Next Steps

Product page design is crucial to convert visitors to customers.

In order to satisfy the requirements of multiple types of customers and properly present the right offers, you should consider partnering with a personalization vendor.

Barilliance powers hundreds of eCommerce store's product pages with personalized content. Click here to see if Barilliance is a good choice for your store.

You Might Also Like