[How-to] Guide To Building A Top eCommerce Product Page For Conversions

The primary goal of a product page is to convince (and ideally persuade) visitors to purchase your products by showing them detailed information and pictures about these products.

The vast majority of your conversions and revenue for your business will happen from your visitors visiting a product page and adding the products presented to their cart.

However, while it’s true most conversions are initiated on the product page, it doesn’t mean that all of your visitors will add a product to their cart (or buy it) straight after visiting the product page.

Nonetheless, the product page is absolutely vital to your business.

Its design, the choice of product pictures and information displayed should be chosen carefully, as they will greatly impact your visitors’ decision to ‘Add to Cart’ or not and ultimately buy your product.

The length of the “buying cycle” will inevitably depend on the type of product that you are selling and where your visitors are currently in the funnel (Is it their first visit to your site? Have they researched alternatives? Have they previously bought from you? etc…) but a great product page experience will always help you convert more visitors into buyers regardless.

After thoroughly analyzing what makes a high-performing product page, we were able to find out the few areas that really move the needle, no matter the industry you are in:

1. The layout – how important elements are organized in a logical manner
2. Images – since visitors can’t touch products they need to rely on high-quality imagery
3. Description – will depend on the complexity of the product but need to address questions visitors might have and communicate clearly on the product’s benefits
4. The “Buy Box” – the box where visitors can materialize their buying decision
5. Reviews – The more reviews available, the more trust visitors give to your products

Now that we’ve got a taste of what makes a great product page, let’s see in detail what you should do to improve yours.

What to expect in this article

1. Avoid using tabs on your product page
2. Each product should have pictures taken from different angles
3. Display every product picture as product thumbnails next or below the image gallery
4. Add clickable swatches to change from one color variation to another and to select size variations
5. Include a size guide (with several unit sizes) to your product pages
6. How to design the “Buy Box”
7. Show return policies on the product page
8. Let users save products in a wishlist without having to create an account.
9. Let people buy out of stock products, if not collect their emails
10. Product descriptions must address your visitors’ main concerns
11. Implement the rating average and how many people left a review at the top  of every product page
12. Allow visitors to add a review without logging in/creating an account
13. Add breadcrumbs at the top of your product pages
14. Allow visitors to add complementary products to their cart in a single click
15. Always include alternative products at the bottom of your product pages

Avoid using tabs on your product page

When it comes to the layout of your product page the main rule you should follow is to avoid hiding content behind tabs.

Out of the 3 main product page layouts that are 1) with tabs 2) with collapsable sections and 3) a ‘simple’ product page with no breaks, tabs, or collapsable sections, tabs are usually performing the worst. Most of your visitors simply won’t see them and therefore won’t read the content behind them, no matter how useful this content could’ve been to drive more conversions or to give precious information about your product.

This is why it’s recommended to avoid tabs altogether when deciding on your product page layout.

a) Alternative 1: Use collapsable sections

Collapsable sections on a product page can be useful as they don’t reveal too much information and keep the product page organized. This kind of page layout is used for products with a short description and no images included in the description. Also, the first section is usually uncollapsed by default so that visitors don’t have to click on it to reveal it

If you decide to opt for this product page layout you have to make sure the collapsed sections

b) Alternative 2: Adopt a ‘simple’ product page layout without breaks

Some product pages might have so much content to fit in that adding a sticky summary bar that basically has the same goal as a table of content, will make the navigation significantly easier for your visitors. Imagine if instead of scrolling 4 times to reach the review section, visitors could do it with only a click? Also, as they scroll through the page, visitors could be confused about which section they are reading (and how many are left to read). With a sticky summary bar highlighting in real-time where they are you offer, then a better user experience and a better sense of overview. Assessing all the features of a product becomes easier. Of course, such a feature only works on Desktop and would be way too impractical to use on Mobile.

Each product should have pictures taken from different angles

Customers will buy a product based on the problem it solves and based on how it looks. Your pictures are what will make your visitors buy from you or not, so you really need to double-down on product photography. Unlike in physical stores, people cannot manipulate products so they need to have the best representation possible of the product, preferably shown in different angles or situations.

One of the main pitfalls of buying online is that it’s a lot more difficult to assess a product from a screen than feeling it for real. By adding pictures from different angles, you will really help visitors make an informed decision, as they can evaluate a product almost as if they were touching it.

There are a few guidelines to follow on what pictures should ideally be included on every product page:

a) Add pictures of the product used in the context

You need to reassure and emotionally connect with your visitors with inspiring product pictures and pictures showing how to use the product. Choose carefully the first picture from the gallery which is going to appear in order to give the best first impression possible to your users. If your product has important features, you should take advantage of it by visually showing them on its pictures.

For example, if you are selling a computer with last-generation ports, you will add a picture specifically showing this feature. “Features tell and benefits sell”. Visitors are interested in much more than simply the specs and features of a product, but rather want to see how they could be using it and how it could ‘improve their lives’. In this regard, the product picture should ideally convey positive emotions to potential buyers.

b) Ensure the product images allow to evaluate the size of the product correctly

The product’s dimension could be very well described, but it doesn’t mean visitors will read it. By indicating directly on the picture the size of the product (or by including a reference that allows evaluating its size), visitors will be a lot more confident this product fits their needs.

c) Consider adding text to your product images to explain or highlight some features

It can be beneficial for potential customers to have some short text directly included in a product picture so they won’t miss important features or technical details.

Display every product picture as product thumbnails next or below the image gallery

It is hard for visitors to analyze how many pictures there are if ‘dots’ are being used to illustrate a different picture. Instead, use visible square product thumbnails next or below the product picture (in the image gallery) currently displayed. Also, make sure that every product thumbnail is visible under or next to the image gallery so they become ‘unmissable’.

a) Include videos or short clips in the image gallery

Videos help visualize products in ways that pictures can’t do. Implementing at least one video (or an animated GIF) per product that you are selling is usually better than pictures, which by nature are static and don’t necessarily allow visitors to see the product under every angle.

b) Consider adding a 360° product view

An alternative to videos is to have a 360° view of your products. Visitors appreciate this uncommon view as it gives them a feeling of control, which they usually miss from ‘regular’ pictures or videos since they still cannot control the angles under which they want to see the product. However, see the 360° view as a “nice-to-have” complementary feature to the other product pictures, but not as a replacement.

Add clickable swatches to change from one color variation to another and to select size variations

We don’t want users to miss out on color variation, so make them visible and usable enough with clickable color swatches. Buttons or switches are easier to select than opening up a dropdown and then choosing from a list of options. Buttons and swatches also show all the possible variants visible all at once.

By consistently replacing dropdowns with swatches you allow your visitors to see all the options at once and you will instantly reduce the number of errors from selecting the wrong size or color.

Include a size guide (with several unit sizes) to your product pages

A size guide helps visitors see if the product is the right fit (literally) for them. Indeed, when buying clothes one of the most common questions to answer is “Will it fit?”. So having a size guide displayed high on the product page enables visitors to answer that question quickly. Depending on where you are selling your products or to whom you are selling to, you might want to include different unit sizes in the size guide table (inches and centimeters).

How to design the “Buy Box”

The “Buy Box” is the second most important element on your product pages (after product pictures). Similarly to the product cards on a category page that shows all the essential information about the product, the “Buy Box” shows all the important transactional information and offers visitors the ability to ‘Add to Cart’. We found 3 features that are really important to nail when designing your product page “Buy Box”:

1. The ‘Add to Cart’ button
2. The price
3. Shipping information

a) The ‘Add to Cart’ button and price must stand out

Price is one of the most decisive factors that visitors take into account in their purchase decision. This is why visitors must be able to identify quickly. Likewise, the ‘Add to Cart’ button must be prominent and have a high contrast color (but please don’t ‘test’ 50 different colors, you have better things to optimize!). The ‘Add to Cart’ button is critical, as clicking it shows a very high buying intent.

b) Show the former price close to the new discounted price, how long the discount will last and how much can be saved with it (in percentage and/or monetary value)

Visitors are extremely sensitive to the price (and to making good deals!). So let them know about discounts, how much can be saved compared to the old price and for how long the discounts will stand. However, we recommend against using ‘artificial urgency’ to lure buyers in.

Also, if a product is sold in different quantities, then include a price per unit. It’s human nature to look for the best opportunities (think ‘the best bang for your buck’). But when buying packs of products or products sold in different quantities, figuring out which one has the lowest cost per unit becomes difficult.

That is why we advise including a price per unit for products with multiple quantities. Also, indicating the cost per unit is great to highlight that packs or bundles come cheaper than individual units and are powerful assets to boost your Average Order Value).

c) Display an expected delivery date and shipping costs on your product page, ideally in the ‘Buy Box’

Consider adding a ‘ZIP code’ input field to the product page that would calculate the shipping costs and expected delivery date. Also, make sure the cheapest shipping option available is displayed.

Moreover, make it clear on the product page what the threshold for free shipping is and update the amount based on the user’s cart content. It should be clear to users how much exactly they are going to pay and what is the free shipping threshold. Moreover, by setting your free shipping threshold above your overall website Average Order Value you will encourage visitors to add more products to their cart.

Show return policies on the product page

Visitors might not consider buying a product if there aren’t any return policies visible. Among the reasons why people won’t buy a product, a “difficult return process” ranks high. They want to have safety nets in case the product is not the one they ordered. And since visitors mostly consider buying a product once they are on the product page you should take advantage of that opportunity by providing this information there, and also preferably in the cart and checkout.

Let users save products in a wishlist without having to create an account

To some degree, people who are deliberately adding products to their wishlist are showing some buying intent. But not allowing them to take a step that could later turn them into buyers is a missed opportunity. Get rid of the account wall to add to the wishlist and simply make sure to manage their expectations: let them know how long the products will be saved for and explain to them all the cool benefits creating an account has, but try not to be too pushy.

Let people buy out of stock products, if not collect their emails

If a product is out of stock, visitors will buy it somewhere else and you lose a potential sale. A solution to products running out of stock is to still collect the sales but inform buyers that the time to deliver the product will increase. If the product is definitively out of stock then you should try to collect visitors’ email to let them know about products or categories most similar to it. This way you are offering them an alternative to still buy from you.

Product descriptions must address your visitors’ main concerns

Visitors will have fears, uncertainties and doubts (also called “FUDs”) about your products, which is why you need to anticipate as much as possible the questions they may have with detailed product descriptions. For example, you should let them know how your product has been manufactured, the different use cases it can be used for, or how to maintain and fix the product.

Your product descriptions should be easily scannable by alternatively using titles, short paragraphs, bullet lists, and highlighting the main features with visuals. Even with technical products that have longer descriptions than visual products, most visitors will only read what appears to be the most important parts of the product’s descriptions. They will skim the page and look for bold titles, short informative texts, and bullet lists. Also, make your text digestible by using ample white space. Moreover, your products’ main features should be highlighted with annotated visuals as some readers will pay more attention to it than text.

Finally, try to include the most important features in your product titles or subtitles. Having the main feature of a product directly in its title or subheading will allow your visitors to analyze quicker if they are on the right product page. For example, it could include information about its size, what it does, the material it’s made of, or if it’s compatible with another product.

Implement the rating average and how many people left a review at the top of every product page

Clicking on the rating average should scroll visitors down to the review section. Also, if there are no reviews yet, then you need to invite visitors to ‘Write a review’. People feel a lot more confident buying a product if it has many customer reviews, as it indicates social proof and trust (“if many people bought it and commented positively, then it’s probably a good product”).

In addition to the ratings displayed at the top of the page, you must include a review section where your visitors are able to filter and read reviews and their summaries based on a specific grade.

Indeed, it is quite common to see visitors inspecting 1-star reviews first to see what problems customers have experienced with a given product, and also to balance out countless positive reviews.

Allow visitors to add a review without logging in/creating an account

As we have seen just before reviews play a vital role in people’s buying decisions and the more reviews you collect, the better it is to build social proof. So make it easy for buyers to add a review without creating an account.

You should also enable buyers to include their own product pictures in their product reviews. People appreciate User-generated content (UGC) as it looks genuine, provides context, and gives a less ‘polished’ angle compared to the professional photography displayed across the product page.

Add breadcrumbs at the top of your product pages

Breadcrumbs make it easy for visitors to see where they see in the website hierarchy and navigate back to categories related to the product they are currently viewing. Breadcrumbs are all the more useful when visitors land directly on a product page after clicking on an ad, as visitors can quickly grasp where they are on the website.

Allow visitors to add complementary products to their cart in a single click

Encourage visitors to spend more on your site by showing them a section dedicated to complementary products. These products could be added to the cart in one click and can seriously increase the Average Order Profitability of your website. You should also consider implementing product bundles, where buying a group of complementary products comes cheaper than paying full price for each individual product.

Always include alternative products at the bottom of your product pages

While visiting a product page generally shows a rather high buying intent, it doesn’t mean visitors will ‘Add to Cart’ and buy. This is why you should be offering alternative and complementary products to the product currently being inspected. Doing so also ensures that visitors won’t stay on the product page with no other options to explore or go back to the category/search result page. Complementary products can help you achieve a higher Average Order Value as they appear a good complement to a product, while alternative products are usually products from the same category and with a similar price range.

Wrap up

Building an eCommerce product page is tough, you need to squeeze in a lot of information, and include high-quality pictures, reviews and alternative offers.

By focusing first on high-quality imagery, showing the product under different angles, then making the shipping information prominent in the “Buy Box” and finally by collecting reviews to build trust, you can build a top product page that drives conversions too.

Take these guidelines to benchmark your own eCommerce site and see what is missing.

Need help implementing some of the guidelines above?