11 features all great product pages have in common and how to apply them to your ecommerce site

The humble product page continues to be the primary gateway to a shopper’s purse

In this post, I will discuss the fundamental characteristics of high-performing product pages, how you can align your page with your audience’s expectations, and reveal how rethinking your approach to value can increase both basket size and lifetime customer value.

The first thing we need to remember is that our ecommerce website is not just a piece of software, or an abstract channel. It is a direct alternative to bricks and mortar and needs all the care, attention, and analysis of a traditional store. Store owners have long tested alternative approaches to see what works best so it is nearly madness not to do the same online.

There are so many ecommerce platforms to choose from, with some of the more popular being Magento, Woocommerce and Shopify. With any chosen platform, there are themes and templates either bought off the shelf and customised, or designed and made specifically for your brand. This does not, however, mean that all themes and stores are equal. Nor does it mean that they all follow best practices or (if they do), that that best practice will work for your business.

Let’s take a look at some of the features that do work and that well-known high performing websites use.

1 - Product Images

So many websites show a good standard image of their product but fail to show key features close up in subsequent gallery images. There has been a race to simply get the product live on the website and a failure to consider how the product is traditionally shopped. As a store owner, rather than worrying too much about ensuring you have the 20,000 possible skus you could stock, why not instead choose wisely? Or at the very least, have a focus on those likely to bring in the most revenue.

If you consider how a buyer would traditionally have bought the product, what are the key friction points that need to be overcome? Does the customer need to feel the material? Are there key features which need to be demonstrated? Does the detailing on the exterior matter to the buyer? Video can be a worthy substitute to an instore experience and close, annotated zoomed images of key features can allay fears. If detail matters (and regardless) make sure the image zoom works and displays a high quality but optimised image, loaded by ajax on demand to help with Core Web Vitals.

2 – Display easy, available ratings and testimonials

These days, you are lucky if a prospect buys without researching first. People are used to using multiple tabs and reviews matter. Ideally, these will be externally validated, but your own, onsite reviews are better than none. Research may look into reviews of the individual product itself but could equally be to research your company and how you handle things like customer service, returns and refunds. Quantity matters too, as a perfect 5 star rating means very little when you have just one or two reviews.

A good review display includes a star rating, a date, a short description of the review and a sense of who the reviewer is (ideally with a photograph). You can take this further by using AI engine to pull in independent reviews relevant to the product to include things beyond just a single rating, such as structure with consideration for portability, performance, ease of setup and build quality.

3 - Group key info ideally above the fold

On the product page below, we can see all the key information including the product name, price, availability, size guide as well as the all important call to action (CTA), above the fold. This is supported by information on delivery, loyalty and customer service is invited. If your product is one where a sales person would normally talk to the customer about the product, then consider ensuring you have written genuine FAQs or as below, use online chat to offer the nearest online equivalent.

The calls to action that work best are instructive and informative. Of course, we all know what an “add” or “buy” button is, but some websites are busy. By being clear, you are giving readable signposts and will no doubt receive more clicks. So here we have the simple “Add to Basket”. This product does not need configurable options, so crucially the CTA is above the fold.

Somewhat more traditionally and English, Argos (below) uses “Add to Trolley” with a clear green icon supported signpost.

4 - Use urgency-building techniques

Particularly, if your website is a busy marketplace, using different urgency-building techniques can motivate users to buy. The overlay below on Argos only lasts a few seconds. It is enough to catch the eye without intruding as well as to give a sense of popularity and scarcity.

If you have real-time stock information, try informing customers if stock is low. Again, this can be motivational. Equally, try placing other motivational features of your business close to the key call to action, such as free delivery as well as other deliver information. For example, you can make it clear that returns will be hassle-free. For clothing businesses, this can overcome a key buyer friction point.

5 - Make sure it is obvious how to checkout

Many websites do not make it that easy to checkout once items are in a basket. Woocommerce is notorious for this. You press add to basket and get a nag on screen for a few seconds offering a clickthrough to basket or checkout. However, there will be no other links, so you have to create something manual in the top right hand corner. Of course, there are always plugins that do this. It is important to make sure there is something permanent in the navigation though.

6 - Be careful with your button colours

I am always talking about how CRO is so much more than button colours, but that doesn’t mean they are not important. They are. Vital even.

Make sure you use a strong colour for your key calls to action including “Checkout”. However, crucially, make sure that colour is not used elsewhere in your theme design. The key issue below is that the red colour of the key “Checkout with card” button is identical to other colours used in the top navigation and the table of product information that is the basket.

Psychologically, this breaks down the user’s focus and singular purpose. It causes them to pause. It breaks down credibility with them instinctively feeling something is wrong. It could be the reason the sale is lost.

7 - Offer alternatives if variants are out of stock

It's frustrating to come across a product that's out of stock, especially when you're looking for something specific. When a site offers an alternative if a product is out of stock, they are able to keep hold of the user's interest and provide other options to explore.

In some cases, this can look like the 'Add to cart' button being replaced with a 'Notify me when in stock' button if the product is unavailable. Sharing similar products is also a way to keep interest and (hopefully) direct to another product they will like.

8 - Make sure specs are clear - use feature lists

If there are key selling points to the product, such as specifications or features. Make the most important ones visible, preferably above the fold. If you can, use icons in a list.

Many ecommerce systems by default will have tab lower down the page allowing you to enter product features. Here on Argos, they are front and centre. Note also, how there are flexible payment options with key information regarding the terms of credit.

If you can, use a variety of content formatting techniques to break up the delivery of content. This might be mixing images with word boxes or collages and accordions (especially on mobile).

9 - Show off any eco-friendly credentials.

Bring special product features to the fore. It is quite subtle, but the product below is self-described as “eco aware”. This is an awareness of consumer trends and interests. Due to the climate crisis, many consumers are trying to buy responsibly. If you are genuinely selling eco-friendly products. Make sure this is very clear to potential buyers.

10 - Make sure configuration is great to use.

It is very easy for users to get confused. Particularly on mobile. Where possible, give plenty of room around choices. If it is necessary for users to make option choices to buy the right product variation of product then, design a comfortable interface. On mobile, it is a good idea to use a sliding overlay or similar (see the Wayfair example below). Psychologically, this simplifies what the user can see and keeps them focused on the task at hand.

11 - Include user-generated social content

Certain types of products attract evangelists and influencers. By inviting social contributions, you are acknowledging this and community building. Some buyers listen very closely to social media influencers and like to see the product in a real-world setting. If this is the case for your products, then consider testing this.

Test, test, test.

This is not an exhaustive list but a nudge in the right direction. Anyone running an ecommerce business needs to understand that all platforms have flexibility. It is a mistake to think that any given (especially default or off the shelf) theme is a panacea for your business. There are lots of tweaks and great ideas that require sculpting and man hours to achieve. This list highlights a few key areas you can improve your online presence to get more sales.

All of the above tips and tricks are not guaranteed to work. All businesses are different and some best practices work better than others. In order to find out what works for you, it is vital to do some split testing. Sometimes something new can send you backwards and sometimes what YOU think should work, won’t. It is important to have a number of avenues to improve and just simply: test, test, test!

By Al Rowe – strategy director, ClickThrough Marketing

Al Rowe is ClickThrough Marketing's strategy director and has twenty years of web development experience. He now works specifically with Data-led-Design® to develop web solutions geared towards increasing conversion rates with real-user data.