MySagePay
Login >

What Makes a Good Product Page Design?

The Ultimate Website Optimisation Guide

phone iconDownload full guide

Read Next Chapter

 

For anyone who is just about to set up an ecommerce website, or already has one, the first thing to get right is the homepage. The homepage is the first thing your customers see when they arrive on your site so it needs to be right. 

However, the main objective for any ecommerce website is sales, therefore a product page needs to be designed well enough in order to show your visitors exactly what you are selling and that it’s something they absolutely can’t live without.

With 88% of online shopping carts being left abandoned, your product page is a vital part of your website in order to improve your ecommerce conversion rates.. 

Essentially your product pages should clearly tell your customers

  • What your product is

  • The needs your product fulfills or problem it solves

  • The details a customer needs to see in order to decide whether to buy or not.

In this article we will look at the following to help you increase your sales and revenue by improving your product pages.

  • Product Page: The basics 

  • Images and product descriptions 

  • Persuading customers 

  • Product Page Layout 

 

Before you begin - Product Page Basics

As already mentioned above, when a customer reaches your product pages they should be presented with the right amount of information to help and convince them to buy what’s in front of them. 

The main aim is for your product page to make the process as instinctive and simple as possible.

So where do you begin with this? Ideally you should make sure it focuses on the following:

  • Your product
    As this is a product page, this is a place for it to shine. Depending on what you are selling determines how it is presented. 

  • Your brand
    It is vital that your branding is displayed on your product pages, especially with the way online shopping works nowadays - a customer may never see your homepage but they do see your branding! 

  • Your target audience
    Who are you targeting? Who is buying your products? Who are you speaking to? Answering these questions will help you shape your product page and the content you should be writing. Short and snappy? Informative and lots of detail? Videos or GIFS? 

  • Your tone of voice and copywriting
    Your brand's tone of voice guide should determine or certainly help with your copywriting. In this case, the copy used to describe your product should be written in a way which fits in with your brand. 

  • Your page’s design and user experience
    When creating your product page you should really consider how things are arranged on the page and what is and what isn’t included. This can ultimately have a huge impact on your conversions.

 

Images and Product descriptions

Product Images 

A strong image can speak a thousand words. Images communicate thought and emotion whilst communicating a narrative in a way which words on their own can sometimes lack.

Stats show that 93% of consumers consider visual appearance to be the key deciding factor in a purchasing decision. Therefore, selecting what images to include, where they sit and how on a product page is vital. Your products are unique and you need to showcase them in such a way that will help customers spend money on them.

Product Descriptions
Product descriptions help prop up your product photos. Giving your customer everything they need to understand what it is and why they should buy it.
As your customer isn’t browsing in store and able to touch or feel the product for example, the descriptions should be really persuasive and sell the product.

The copy sitting next to the main product image (above the fold) need not contain fluffy words. It should be short and snappy and to the point. 
A slightly longer, more detailed description of the product should then be placed further down the page.

Your copy should:

  1. Be clear, simple and informative. Don’t always assume your customers know as much about your product as you do

  2. Include clear pricing 

  3. Avoid long sentences and jargon! 

  4. Avoid using cliches or empty claims

  5. Be persuasive. Excite your customers! 

  6. Stick to your brand’s tone of voice 

  7. Be human! 

 

Persuading customers 

So how do you persuade your customers that they should buy your product? This is where social proof comes in. Essentially, social proof is the idea that consumers will adapt their behaviour according to what other people are doing. Or in this case buy something because they see others doing so! This is why customer reviews and ratings are so important.

According to a study, 93% of consumers say online reviews impact their purchasing decisions, therefore it’s vital to have some form of social proof at the top of your product page so it’s instantly visible to shoppers. The best way to do this is to show the product’s star rating near the product title. Customer reviews should then be included further down the page, so that people can see what other shoppers have thought about the product.

Example: 

Amazon places star ratings and customer reviews at the top of their product pages 

Social proof adds credibility and almost certainly helps to boost sales. Reviews, testimonials and images from Instagram (from both customers or influencers) all help give that vote of confidence in the value of the product. It’s also worth mentioning that any press coverage your brand receives is a great way to build brand awareness and highlights that your brand is worth paying attention to. 

When creating your product pages it’s worth remembering the below :

  • Update your product descriptions based on customer reviews

  • Add social sharing buttons to product pages

  • Show the logos of publications and websites your products have been featured in

  • Ask your customers for a testimonial as to why they chose a particular product

  • Product reviews and customer testimonials should certainly be thought about when designing the page payout. Most reviews sit below the fold but it’s common practice to put the best reviews in the product description area.

  • Show an average star rating of all reviews beneath the product title

 

Product page layout 

For an online store, the layout and design of a product page are both important to get right. The design should pull together the product photos, pricing and descriptions whilst avoiding clutter in order to guarantee a sale.

There are various styles you could opt for depending on the type of product but the three main ones are: 

The Traditional Template

The ‘traditional’ template is the one most used online. The main elements are above the fold, with the product description and Call To Action (CTA)  placed alongside the main images. 

Image Focussed

An image focused design is perfect if you want to really show off your products and make them centre of attention. However, it’s important to still include your product description, price and CTA above the fold. 

Featured Focussed

This is ideal if you want to focus on the features of your product rather than the look of it. This style is often used for tech or digital appliances. In this case, the product description should outline the main features and technical specifications in order to stand out to the customer. The images then sit alongside this to highlight those particular features. It’s important to remember the price and CTA should still sit above the fold and be prominent on the page.
Fundamentally, when designing the layout of the product page (whichever one you chose from the above) you should make sure you include a strong Call To Action (CTA) button, good UX features to make it easy for the customer to make a purchase,  highlight product recommendations and build customer confidence throughout. 

Clear Call To Action (CTA)

When it comes to your product page layout your “add to cart” or “buy” button should not be drowned out by product descriptions or reviews. Your call to action button is the most important part of your page (as well as images) so make sure they are located in a place which can’t be missed (but without being too garish!).

Essentially you should be making the buying process easy for your customers in order for them to convert. For mobile devices, the CTA should be the width of the full-page to enable customers to tap with either thumb.

In the above ASOS example, you can see that the CTA button is coloured green to stand out from the other text and sits above the fold to assist with the customer journey.

UX Features

UX features such as overlays or pop-over boxes, drop down tabs, and content that reveals when you hover over are all important to include when considering the product page design and layout. That will ensure that users who want to read more details can easily find that information, without overwhelming or crowding the page.

Product Recommendations 

When laying out your product pages, it's worth considering the product recommendations as a way to potentially secure another purchase. Essentially product recommendations suggest alternative products a buyer may like based on their viewing history or the page they are on. Amazon is great at cross selling with product recommendations, especially their “Recommended for you” carousels. You may also see on other sites:

  • “Customers also bought” lists

  • “Similar items” suggestions

  • “Top picks for you” recommendations


Build Customer Confidence 

Communicating the quality and sizing of a particular product, as well as return policies and customer service commitments, are all important elements to consider when laying out your product pages so your visitor feels comfortable buying from you and trusts you

 

Conclusion 

If you don’t know by now, your product pages are the lifeline of your online store. If they aren’t presented well you run the risk of losing a customer and a sale! Creating stand-out product pages will ensure you see customers returning, they’ll help with your store’s brand and reputation, and set you apart from your competition.

Here's a recap of the key things to remember when designing your product page

  1. Use high quality images

  2. Include simple informative product descriptions

  3. Use persuasive calls-to-action

  4. Use social proof to back up your products 

  5. Use product recommendations

The main purpose of any product page is to persuade your customers to buy from you so  always ensure the customer is at the forefront of your mind when you are making decisions on the layout and design of your product pages! 

More information

Read Next Chapter: How to Optimise for Website Speed

Find out more
Read Next Chapter: How to Optimise for Website Speed

Ultimate Guide to Website Optimisation

Find out more
Ultimate Guide to Website Optimisation