What Makes a Well Designed E-Commerce Product Page?

by Luma / Posted

Product Page Blog Banner

A website’s home page is usually considered to be the most important page on the site. Home pages are often the landing page, the first thing a potential customer will see and it presents the initial vibe of the company. Whilst we all know that first impressions are very important in the e-commerce world (as in most other realms of life), product pages are also imperative to the success of an e-commerce website.

Product pages are where it all happens; the product display, the pricing, the sizing, the suitability and of course, the actual buying. If your product pages are designed in a way that is not customer friendly or messy with bad photography and unclear ‘Add to cart’ options, customers are likely to click off and move to a more aesthetically pleasing and easier to use competitor.

So, what makes a good and well designed product page?


Content should be placed in a hierarchy. The most important information such as price, should go towards the top and with other information getting progressively lower down the page the less important it is. Most customers won’t read all the information on the page so put what you think needs to be read in prime position.

Title and Price

Not only do these need to be put at the top of the content hierarchy, but on top of the visual hierarchy too. These two things, along with pictures and a call to action, are the most important part of a product page so they need to stand out. You can make these points stand out by making the text bigger, underlined or a different colour.

The image below is an example of this from Bonobos. As you can see, the title is big, bold and clear with the price being the next most obvious thing on the page.


Comprehensive Product Descriptions

In order to turn potential customers into customers, you to fully inform them about what your product is, how it works, what it’s good for and why they should buy it. This means that all product descriptions should be highly descriptive and enthusiastic.

The example below from Nestbox, a company who sells animal nest boxes, demonstrates a good description which is full of useful details.

A Call to Action Which Stands Out

A call to action is always important on any page of a site but particularly on a product page. It’s vital that the call to action is:

  • Strategically placed so that it’s easy to identify.
  • The size of it will indicate its importance so ensure that it’s a good size but not over the top, no need to exaggerate!
  • The colour of the call to action button is important; you want to make it stand out on the page. A good way to do this is to design it in highly contrasting colours.
  • Similarly, the button should be designed to have a good amount of white space around it to visually highlight it.
  • Call to action text should be short and sweet; to the point, simple and easily understandable.

The example below is taken from Grey Haze, an e-cigarette and e-liquid company. Here, you can see that the call to action is clear because it is well contrasted against the background and designed in a colour which stands out.


Product Imagery

Product imagery is imperative to the appearance and effect of a product page. With the amount of media exposure we’re all subjected to these days, the standard of photography and image aesthetics has sky rocketed. Anyone is able to turn an ordinary image into something beautiful with the use of Instagram filters meaning that the standard of photography is at an all time high. As a result of this, companies are having to produce more impressive images than they’ve ever had to previously in order to attract and impress consumers. Therefore, you must make sure that all your product images are:

  • High quality
  • Show the product form multiple different angles
  • Have the ability to zoom
  • Videos are becoming increasingly popular on product pages, particularly amongst fashion sites.
  • In some cases, removing the background of the image is a great way to create a bolder, more crisp and clearer product image.

Below is an example of a product page which showcases a great selection of product images and zoom options but, also has a catwalk feature which brings the product to life.


Social Sharing

Giving the option to share on social media is a great way to engage with customers and get your customers to recommend the product on show. The example of Cath Kidston below demonstrates a really good use of product page social media with not only adding social links but also giving a live Instagram feed of images of the products in use.


Size Chart

Size charts are really important for some product pages; particularly on fashion sites. This is a great way to avoid returns which are bad for both you and the customer. Some sites will choose to have their size chart on a separate page but we recommend putting it on the product page rather than making your customer have to click off the product page, running the risk of losing a sale. This will also improve the user experience.

Here, on the Hera London site, we can see that the size chart is easily accessible from the product page.


Delivery Information

The delivery information on the product page should be very clear and have no hidden costs – secrecy is no way to create loyalty. In the majority of cases, if a customer is well aware of the delivery charges from the word go, they are more likely to purchase an item.

Below, you can see that this company have put their delivery information in a pop up box which is great for giving a lot of info without take up precious space on the actual page.


Reviews are essential to e-commerce websites and have been proven to help increase conversions and eliminate any doubt new customers may have (as long as the reviews are positive of course!) You should also give the option for customers to leave a review, making it easy for them to do so.

Here is an example which showcases an extensive amount of reviews whilst also making it very easy for a customer to add a review too.



Lots of content is sometimes overwhelming for a customer – a lot of information can be hard to take in. This is why it’s a good idea to split the content into tabs or collapsible toggles. This way, if the customer is interested in particular information, the option is available to read it but if a customer is not interested, the irrelevant content won’t clutter the page.

Here, you can see that ASOS use tabs effectively to give the option of consuming lots of information without overcrowding the page.


Cross Selling within Product Pages

A great way to increase sales through your product pages, is to offer other product options, related products or product bundles at a discounted price. If a customer is already making a purchase, they are more likely to add more to their cart rather than add a first item.

On the site below, the user has access to related products and can see what other people are interested in in relation to the product they’re looking at



Whilst website product pages are all different, unique and tailored to suit different clientele, there are three key elements that all e-commerce websites need to consider:

  • Great content which is simple and organised in design
  • Stunning product imagery
  • At the centre of all design and functionality should be an easy user experience which gives the customer a seamless journey

Shopify makes it easy to run an online store

Get a free 2 week trial