4 Essential Factors of Successful Ecommerce Product Page
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.
Consider the 3 main purchase stages that your users may be at:
- Just taking a look for future purchasing
Some users are just browsing products, with no intent to buy
- I need this product, and I’m ready to buy now
Other users go straight to the product and are ready to purchase
- 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?
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.
- The Buy Area
- Product Images
- Product Descriptions
- Shipping & Returns
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
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.
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.
A strong contrasting background colour is vital
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.
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.
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.
- Tell your users that the product is temporarily out of stock, and that you’ll ship it when it’s available.
- 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.
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.
Shipping & Returns
When considering a purchase, your users need to be able to calculate the entire price of the product, including shipping.
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.
Next up, we’ll be taking a closer look into product page best practices and how to make product images that convert.
How to design a high performing imagery gallery for product images including:
- Include a scaled image
- Large images
- Images gallery (how-to)
- Image size and types
1. Include a scaled image
A scaled image allows users to immediately understand the real size of a product.
If users wrongly interpret the real size of an image, they will likely abandon your site.
In bricks and mortar stores, it’s easy for people to understand the size of a product, as they can physically pick it up. However, when shopping online that becomes more tricky.
“42% of users will attempt to gauge the scale and size of a product from its product images”.
An example can be seen below. Which is more clear
2. Large images
The images on your product page should be large enough to effectively inspect the entire product.
Your images should be as large as possible, without taking up all the room on the product page. Plus, users should be able to click the image to zoom in.
Pro tip: Allow your users to click the entire image to zoom, don’t rely on little zoom icons. Zoom icon buttons are small targets to tap, therefore, this makes it difficult and slow for users to zoom in on your products.
When users zoom in on your product images, this shows a high intent to buy – they are further investigating and want to answers questions they have about your product. So, it’s important to understand what they’re inspecting when zooming.
Consider what your users are inspecting when viewing product images, here are some examples:
- Texture – they want to know what it feels like and if it’s going to be soft, smooth, rough, etc
- Weight – they may be trying to understand the weight, is the product thin or thick? Do they understand the material of the product and does that determine the weight?
- Strength/durability – people want products that last. Do your product images show the product being stretched? Or, if the products need to hold heavy objects, what heavy objects are usually on the product your customers are buying?
- Fit – If you have a product with multiple parts, how do they fit together? For example, if someone’s buying a Tupperware container, do the lids screw on or click on? How can you tell your users this with a photo?
Remember, your users can’t reach into the screen and pick up the object they’re looking at (maybe in the future). So, if your users can’t inspect your product effectively, you won’t be helping them to buy your products.
3. Images gallery (how-to)
First, it’s worth reminding us of the goal of product images. We can’t touch, pick up or try the products on an ecommerce store, as we can in a physical store.
Picking up and trying a product helps to instil confidence that the product is right for us. So the goal of an image/video gallery in an ecommerce page is to simulate the experience of inspecting and trying the product.
Use a product gallery to showcase your product
Include the following elements in your product gallery:
- Main image
- Caption for the main image
- Thumbnail navigation
- Image navigation
- Total count of images (with a current number)
- Close button top right
Anatomy of an image product gallery
As I said above ‘Allow your users to click the entire image to zoom, don’t rely on little zoom icons’. The common pitfall for image zooming is caused by icon-based features.
Click or hover
So, allow your shoppers to click on the main image in order to give them a nice big target and zoom with ease.
Also, consider using a hover-based zoom, as well as having large product images.
4. Image size and types
What image size and types should you use for ecommerce product images?
When it comes to the right image size for your product images, there are 3 main things you need to consider:
- Site speed
Will the image(s) slow down the page load time?
- Relevance of the featured image
Does the image match with the rest of the content on the page?
- 7 different types of product image
Is your collage of images (your image gallery) varied enough to really sell your product?
1. Site speed: Will the image(s) slow down the page load time?
- Google uses page load time as a ranking factor in its algorithm.
- Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.
So to keep those page load times fast, a good rule of thumb is to try to keep your ecommerce product image file size below 70 kb – Shopify
Keeping images below 70kb can be tricky sometimes depending on how much detail is in the image, but use 70kb as your ideal image size guide and don’t go beyond 500kb, otherwise your page load time will be way to slow and this is incredibly bad for your ecommerce conversion rate.
40% of people abandon a website that takes more than 3 seconds to load.Neil Patel
2. Relevance: Is the featured product image relevant?
Relevance is a key principle to remember when keeping your users on-site, and prevents them bouncing away.
Whether your users have found your product via an online search or have clicked an ad, ensure what they see is what they expect.
For example, someone’s searched for ‘protein bar’, hit the link and are presented with a product called ‘Loaded Legends’ (see below).
Even though this product page is relevant to what was searched for, a first-time user of this site may not have expected to see a stack of 3 unwrapped protein bars. This may cause the user to expect 3 unwrapped protein bars. Or, they may think that they get 3 brownies, yet the title includes the word (Singles).
The product page definitely makes the product look delicious, but it may not meet the immediate expectation that the user had.
Scrolling further down the page and you see the product in its wrapper. This may be a better image for the featured image; it’s wrapped and presented as 1 protein bar. Therefore, it answers immediate questions the user may have and matches the expectation, making the product image relevant to the search and product title.
A simple change to help improve this product page would be to feature the image of the protein bar both in its packaging and unwrapped.
Over at Protein Pick ‘n’ Mix, they’ve shown both the product in and out of its packaging, giving the user a very relevant and complete picture of what to expect.
7 Different Types of Ecommerce Product Images
Baymard Institute’s advice is to create a richer and more engaging shopping experience supplement your product gallery with one or more of these 7 types of product images:
1. Compatibility Images
Show the technical features of a product, so users can see if it’s compatible.
2. Lifestyle Images
Associate your product with other images to sell the dream.
3. Customer Images
Real images from customers give context and build trust, as potential customers can see that this product has been bought and is being used.
4. Textural Images
It’s hard to touch and feel products online. Close-up images and video are a great way to feature the texture of a product.
5. Size & Proportion Images
In-scale images give your users a complete understanding of how big or small a product is in real life. Feature a hand holding a product and give an immediate sense of scale.
6. Usage Inspiration Images
Show your users what they can do with the product and you really sell the benefits. Plus, you may be able to cross-sell other products
7. Authentic Images
Evoke emotion and grab attention with images of humans or animals using your products. Authentic, animate images provoke a reaction the customer can identify with and mirror
Next up we’ll be taking a closer look into how to write product descriptions and reviews that turn your site visitors into buyers. This 4 part series focuses on ecommerce product page best practices, helping you convert more visitors to customers.
Product titles and descriptions can make or break a sale. If they’re poorly written, product titles and descriptions can confuse shoppers and jeopardise up to 20% of your total sales!
20% of purchase failures are caused by missing or unclear product descriptions.
However, get your product descriptions right and you could enjoy a 78% increase in ecommerce conversions!
Here are 3 key best practices for highly converting ecommerce product pages:
- Product headlines (sub-titles)
- Best text structure and styling
- How and where to show reviews
1. Product headlines and sub-titles
Write just like your target audience speaks and your product descriptions will resonate with your users and make an impression that converts now and forever.
Your product title begins the conversation, so make it clear, include keywords (remember Google) and use sub-titles if you need to inject more info that supports the main headline.
Personality and vital information are key to a great product headline
Chubbies use both personality and vital info to grab their shoppers attention and convince them to buy.
Chubbies completely understand their audience (Millenials and Gen Z). They don’t stick to boring titles, but they do include vital information, so you’re not left confused.
For example, ‘The Legosauruses 5.5″ (Compression Lined) – There are 3 vital parts in this product title that make this product title perfect:
- The non-boring, entertaining, and personal bit ‘The Legosauruses’ – who doesn’t want to be a legosaurus?!
- The size 5.5 to help filter and guide you to the pair of shorts you’re after
- The main (hidden) feature ‘(Compression Lined)’ – this sub-title (wrapped in brackets) is an important feature that works with the product image and gives you all the information you need in a conversational way. The brackets around the sub-title give it the impression that someone’s saying “Oh, by the way, these shorts are functional as well, so don’t worry you can exercise and still look cool.”
In just 5 words, this product title entertains and informs you, pushing you into the product page to find out more.
Product titles and descriptions – best text format, structure and styling
Product titles and descriptions will change depending on the product category.
For example, a Smart Ultra HD TV will have a more detailed title and description than an organic cucumber.
Therefore the common format for product titles may include:
- Special Feature
- Size: should reflect the sizing in the size chart (make sure you have a size chart) for example, small, medium or large. Or, size could refer to lengths such as mm, inches or cm.
- Quantity: this is the number of units in a multi-pack
- Keywords: the number of keywords that’s been searched for on Google to find your product
Here’s an example to illustrate:
|Product Title Format
|Electronics & Photo
|Size + Brand + Product Type + Feature + Brand
|24″ LED SMART TV WITH NETFLIX freeview HD Blaupunkt
Here’s the product in situ:
Product description format, key information to include
- Keywords / keyphrases
- Structure: Bullets and paragraphs broken into short sentences
Remember, your users are checking the product with the intention to buy or assess its value.
The key to getting the product description formatting right is to understand the product category first.
Generally, people read bulleted text for a longer amount of time than paragraph text. Though this pattern depends on the product category.Conversion XL,
In this study on Conversion XL, they found that products in the tech category (such as hard drives) need detailed descriptions in a bulleted format.
For products in the ‘design’ category (such as shirts), longer copy does get more attention, but format matters less.
How long should product titles and descriptions be?
In this case study, (‘Enhancing product titles resulted in 151% more clicks‘) FindWatt found product titles that were between 37-55 characters long got a 151% increase in clicks on Google Shopping.
“The average length of title in this group went from 37 to 55 characters, an average change of +18 characters. This resulted in a 151% increase in clicks”
In summary, go with product titles that are as descriptive as possible and include key information (as outlined above).
This improves both SEO and ensures your shoppers are 100% clear about what they’re clicking, therefore reducing your wasted clicks, and increasing sales.
User reviews aren’t just important, they are critical to users’ purchasing decisions. During our large-scale usability testing, 95% of users relied on reviews to evaluate the product or learn more about products.
In some cases, users mainly used the product information contained in the reviews instead of the product descriptions or spec sheets.
Reviews are critical to your shoppers deciding whether they’ll purchase or not.
Reviews are a proven way to increase sales
Here are some stats on reviews and how they benefit your ecommerce site:
- 95% of users relied on reviews to evaluate a product…
users used product information contained in the reviews, instead of the product descriptions or spec sheets Baymard Institute
- 18% uplift in online sales
Interestingly, conversion rates get higher as the volume of reviews increases According to Reevoo
- 61% of customers read online reviews before making a purchase decision – eMarketer
How and where to show customer reviews on your ecommerce product page
Product reviews need to be visible as soon as the user loads the product page, but users also need to be able to read reviews in detail.
2 ways to display reviews are:
- A summary with a star rating just below the product title
- List product full reviews within the product detail area, below the buy section
Here are some examples of summary reviews with star ratings:
A summary with a star rating just below the product title
List product full reviews within the product detail area, below the buy section
As you can see from John Lewis’ reviews in the product detail area; it’s not only important to include longer, more detailed reviews, it’s just as important to make them easy to understand.
So, when you build a bank of reviews, be sure to design a way for your customers to understand them quickly.
Remember 61% of customers read online reviews before making a purchase decision – so even if you don’t have reviews yet, make this a priority.
However, if you do have reviews, careful consideration needs to be made about how you display both the summarised and detailed versions.
Here are a few examples on mobile to give you some more inspiration.
Finally, we will be taking a closer look into how you can optimise your shipping and returns information to build a sense of trust and ultimately sales.
Consider this: “My #1 piece of advice is to focus on aspects of your product page that instils trust while diminishing anxiety. These usually come in the form of reviews, shipping, return policies, etc.
— David Feng, Co-Founder and Head of Product, Reamaze”
Looking for an ecommerce product page UX checklist to work through? Download ours at the bottom of this article!
More often than not, online shoppers have to wait until they get to the basket or checkout until they find the shipping costs and return info. This presents 2 big problems:
- False ‘Add to basket’ data
Your shoppers may be at a stage in their shopping cycle where they’re searching and comparing products to buy. If they can’t see the shipping costs, then they’ll likely add the product(s) to their basket to calculate them. This gives you a false ‘Add to basket’ rate, as it means that shoppers aren’t intending to go ahead with the purchase. All they’re doing is using your basket as a delivery calculator.
- Abandoned baskets/checkouts
Imagine this – your shopper is ready to buy, they’ve added their products to their basket, get to the basket only to find that the delivery cost is higher than expected. What do you think they’ll do? Abandon ship (basket)! Telling your shoppers what costs to expect prior to going to the basket or checkout will manage their expectation and won’t give them the nasty shock that often turns buyers away.
To avoid false ‘Add to basket’ data and abandoned baskets, show shipping (delivery) & returns info on the product page. Here are some best practices and advice about what info you need to present:
- The amount of shipping & returns info required
- How to best present ‘free delivery’
- How to promote and what to include in your returns policy
The amount of shipping & returns info required on an eCommerce product page
If your users have to wait until they get to the basket to discover delivery costs 67.4% of your users are likely to abandon the shopping process.
Hubspot claims that the average checkout abandonment rate is 67.4%, so an improvement on two years ago but the majority of abandoners still cite hidden delivery charges as the main reason for cart abandonment.
It’s absolutely vital to show the user delivery information on the product page. They want to know the total order cost before they buy.
Consider where your users are, they’re on the product page and are in 2 states; 1 They know the product they want and are ready to buy, 2 Comparing the product with another product they’ve found on a competing site.
In both of these states, you need to make sure they can calculate the total order cost on the product page.
Remember Steve Krug’s ‘don’t make me think’ mantra. Don’t make your users think at the point of purchase. If they don’t understand the total order cost (product + delivery) they’ll abandon your site.
Should You Display Delivery Costs if Users Meet The Free Delivery Threshold?
Yes. Users need to understand delivery costs and the free delivery threshold. They’ll want to understand what it costs to get free delivery, or how much delivery is.
For smaller items, this is especially important. Imagine you’re buying a USB cable that costs £9.95 and the delivery is £10.95 (over 100% of the product price). Now if that user gets free delivery if they spend over £20, do you think they’ll spend more money on a product or swallow the delivery cost?
Therefore, it’s important that users have the information they need in order to make the right decision for them. If you don’t answer all the delivery questions at this stage, then you’ll lose out on sales.
But my delivery costs are in my really slick checkout process, isn’t that enough?
Understand the real problem. If you bury shipping details and have a high abandonment rate then what’s the point of redesigning your whole checkout process? It’s very probably linked to an information placement issue
Understand customer mindsets. Shoppers need all of the facts before committing to the purchase. Failing to reveal these facts until they’ve begun the purchase process is only setting yourself up for a fall.
Understand that you’re making things worse. Nobody likes a nasty surprise, and dropping a delivery bombshell on shoppers late into the buying process is going to leave a very bad taste, and more so if you’ve forced these shoppers to register.
A successful e-commerce store is one that sells the right product to the right people and converts as many visitors into sales.
There are many elements on your e-commerce store which can prevent users from buying. Understanding which elements you need to improve upon or completely redesign will ultimately dictate how successful your online store is.
For many e-commerce stores, product pages are the key element within an e-commerce store which will shape your conversion rate. Great product page experiences will lead to sales now and in the future, poor experiences will do the opposite.
In order to shape your product pages toward better conversion rates, understand and review 2 key aspects:
1. What stage is the buyer at? See the buying stage considerations here
2. Review the 4 key areas of your product page (listed in this article) and use the checklist we’ve made (download below) to ensure you include everything a user needs to make the right decision on your product pages.
Subscribe to download the checklist
Checklist Available To Download Here: 4 Essential Factors of Successful Ecommerce Product Page - Checklist (2322 downloads)
Further reading and references:
References in this 4 part series on ecommerce Product Page best practices.