Home > Blog > User Experience > 4 Essential Factors of Successful Ecommerce Product Page – Part 1: The Buy Area

Andy Thorne

User Experience

4 Essential Factors of Successful Ecommerce Product Page – Part 1: The Buy Area

The product page on your ecommerce site is where people decide on whether they’re going to purchase the product or not. More often than not, ecommerce ux best practices are ignored on product pages, giving your users a negative ecommerce User Experience and causing people to abandon the site.

To ensure your website visitors don’t bail, we’ve written a ecommerce ux best practice guide on the 4 essential elements of high performing e-commerce pages (below) to ensure your add to basket button doesn’t just get more clicks, it gets worn out!

The 3 Purchase Stages – What are people thinking when they head to your product pages?

Understanding the decision making stage users are at is vital in helping your users. Sometimes users are ready to buy, and sometimes they’re not.

Don’t always assume your customers are ready to purchase when visiting your website, there may be several other reasons to consider.

Consider the 3 main purchase stages that your users may be at:

  1. Just taking a look for future purchasing
    Some users are just browsing products, with no intent to buy
  2. I need this product, and I’m ready to buy now
    Other users go straight to the product and are ready to purchase
  3. I don’t know much, but I know I need a product like this
    And the remaining users know absolutely nothing about the product and need to understand the entire product category as a whole.

This decision making process means that the product page is a tricky thing to get right. Too much information and you stop the immediate ‘I-want-it-now’ user to take action. Too little information may mean the ‘casual browser’ may not come back.

The product page is the centre piece of your ecommerce site, and there are a wide number of page elements that you need to get right. According to Baymard Institute just 18% of e-commerce sites have an overall “acceptable” or “good” product page UX performance. Which means 82% have a poor UX.

82% of the world’s ecommerce sites have a poor product page experience

If you’re one of those 82% of ecommerce sites, do not fret, you can experience higher conversion rates. Begin with your product page, the centre piece to your ecommerce store.

The product page, the centre piece is ultimately where your site visitors will decide whether or not they buy from.

What are the 4 essential product page elements required for the the highest conversion rates?

4 essential elements on your product pages that should be rating 10/10 to be securing conversions.

There’s no one ideal design. However, there are tried and tested elements, which when utilised, can increase your conversion rate by a factor of 10 (at least).

In this article I explain 4 of the most vital areas you should be adding, tweaking and testing regularly to help more people buy your products.

  1. The Buy Area
  2. Product Images
  3. Product Descriptions
  4. Shipping & Returns

The advice about the 4 product page elements is backed up by leading user research company Baymard Institute (Product page insights) and Google (see download at the end of this article).

Also included are examples from leading e-commerce sites to inspire and help you when improving your ecommerce product page design.

1. The Buy Area

Don’t leave your customers guessing, provide all the information they are searching for e.g stock level.

The buy area is the design and position of the following elements:

  • ‘Add to Cart’ button
  • Prices & discounts
  • ‘Out of stock’
  • ‘Save to wishlist’
  • Shipping & Returns

‘Add to Cart’ button

Keep your cart icon the same on buttons and the cart itself

If you mark your cart with an icon such as the ever popular basket icon, use the same icon for your “add to cart” button. Mixed symbols makes your site messy and less intuitive.

Keeping consistency, keeps customers returning.

Use ‘Add to Cart’ not ‘Buy now’

Button text – use ‘Add to Cart’ rather than ‘Buy now’. ‘Add to cart’ manages user expectations and tells the user what’s going to happen when they hit the button. Whereas ‘Buy now’ suggests that they’ll get taken straight to the checkout and buy immediately – they may not be ready for this yet.

Always be managing user expectations.

A strong contrasting background colour is vital

Call to actions are vital to guiding your customers to complete their purchase.

Colour – use a background colour on your button that contrasts with your design. Blue, orange, red, green and black are common colours.

Using contrast takes advantage of the principle known as the Isolation Effect (discovered in 1933 by the German psychologist Hedwig Von Restorff), in which people see distinctive items (those isolated from a series) more than similar ones.

By using contrasting colours for your ‘Add to Cart’ button, you make this primary call to action quick and easy to find.

Prices and discounts

A bold price underneath the title

The price on your product page is ‘the’ key piece of information (obvs), so feature it below the product title, make it bold, make it prominent.

Pro tip: repeat the price just above the ‘Add to cart’ button, this quickly reminds users of the price and doesn’t divert them from the button you want them to press.

Reassuring customers of their purchase price will reduce the chance of distraction.

Discounted pricing – new price, old price, and a discount all included

If you have a discounted price, show the original price directly next to the discounted price.

But make it very, very clear to your users what discount is offered. Notice in this example (below) from Joybird that the user can see the price she’ll pay, the regular price and even the amount of discount she’s being offered.

Providing the product saving amount will speed up customers purchasing decisions.

Your users want to feel like they’re “getting a deal” when buying a discounted product, so show them exactly how much they’re saving.

‘Out of stock’

Are your items completely out of stock, or temporarily out of stock? If it’s completely out of stock and you can no longer ell the product, redirect your users to an

However, if your product is temporarily out of stock don’t lose out on a sale and prevent people from buying a product from you.

Just because your product isn’t in stock right now, doesn’t mean people won’t buy it.

According to Baymard:

“If customers can’t buy your product(s) because they’re ‘out of stock’, 30% will abandon your store to look for the product elsewhere”

The solution: Allow your users to purchase temporarily ‘out of stock’ products by increasing the delivery time.

  1. Tell your users that the product is temporarily out of stock, and that you’ll ship it when it’s available.
  2. Plus, offer alternative products which are in stock.

These 2 options will ensure your customer will not just head off to a competitors site, and helps them to buy from you.

P.s. Don’t offer the ‘Email me when in stock’ button, unless you have a really unique product your users will head to your competition to get what they want.

Save to wishlist

Do customers save products to a wishlist? Yes, but only if it’s easy.

Wishlists are mostly successful when easy to find and use.

Firstly, lets explain the wish list “Wish lists provide an easy way for shoppers to organize the products they want, making it unnecessary to use the shopping basket for quick recall.” – The Good

Don’t block access to a wishlist with unnecesary login walls

Wish lists are commonly seen on ecommerce sites, but what’s also common is the need to setup an account to even start creating a wish list. Asking people to setup an account, just to create a wish list can make the process hard. and therefore your users may not use the feature at all or worse opt to just adding items to their basket.

Why is it bad for your users to just add items to a basket instead of creating a wish list?

Because your basket abandonment rate may hit the roof, giving you false basket abaondonment rates and skewing your website analytics.

Ensuring your wish list isn’t blocked by a login wall will help your users take advantage of the wish list feature.

Make your wishlists discoverable and consieder changing the name to ‘Favourites’

In their article ‘Shopping Cart or Wishlist? Saving Products for Later in Ecommerce’ Norman Nielsen group discovered that changing the name of a wish list to Favourites or even My List removed the negative conatations of having to signup to use the feature. Therfore, more people tended to use the wishlist functionality when it was named differently.

Can your users even find the wishlist feature?

Make sure your add to wishlist or add to favourites buttons/links are super easy to find. Placing them in hard to see or hard-to-find areas will likely mean they’re never used at all.

John Lewis offer a very discoverable wishlist button, directly under add to basket, see the example below.

John Lewis ecommerce wishlist

John Lewis make it easy to add to a wishlist be offering a nice chunky button directly under the primary ‘Add to Basket call to action.



Add to wishlist

Screwfix offer a ‘Save’ button. This is great, and really easy. However, the mistake they make is sending you to a login wall to save the product.

Shipping & Returns

When considering a purchase, your users need to be able to calculate the entire price of the product, including shipping.

Provide transparency with delivery options, increase the chances of securing your customers from the initial stages, not final stages.


If your users can’t quickly estimate a product price with shipping within the product page, they may not wait until they get to the basket or checkout to find out.

Next day and standard delivery

Thanks to the rise of Amazon, users expectation is that they can get their products the very next day. So, be sure to tell your users that you offer next day. You don’t necessarily have to tell them the price of next day at this stage, but just giving them the expectation will reassure them that they can get the product quickly.

People will also want the standard delivery option, as most users will be willing to wait for their products.

When can I expect my item?

As well as delivery options and prices, you should also give your users a timeframe.

For example, ‘Order within the next 2 hours and get it tomorrow’.

Telling users when to expect their delivery will answer an important and immediate question they may have. The more questions you answer on the product page, the more likely it is that your ‘Add to cart’ buttons will get more taps.

Coming up in Part 2

Find out how to design a high performing imagery gallery for product pages and create a richer and more engaging shopping experience for your site visitors and ultimately more sales.

Checklist Available To Download Here: 4 Essential Factors of Successful Ecommerce Product Page - Checklist (618 downloads)

Further reading and references:

References in this 4 part series on ecommerce Product Page best practices.