Web design

Product pages done right

The presentation of a product can and will decide the success of a sale. That is something that e-commerce experts and marketing professionals know. Of course, the representation of a product which is available in online shops is a natural evolution of the local shop. This raises the question: How can a website be made so attractive that the product offered is also purchased? We have found some suitable answers.

Important components of a product page

There are elements that every online shop has to include if they want to sell products. The product name, the price and a purchase option must be as visible as possible. These are the three most important elements of a product page.

Photos on product pages:Éléments importants
Source: www.frontlineshop.com

The product name must be specific. The correct product name must be stated so that buyers can also find it using a search engine. For this purpose, it should be well positioned.

After the product has been found in the online shop, the next glance will go directly to the price. Price is one of the critical features. We will address how can it be made more attractive in detail later.

Finally, the user must have the option to buy the product or to place it in his basket. The buy button should stand out more. The user must be called on to complete the purchase. Therefore, ensure the button should capture his attention. This can be done in several ways. The button can be a different colour from that of the rest of the page, large than other elements or highlighted through a design contrast.

These are the elements that make it possible to make a purchase. However, they will not convince the buyer to buy a product on their own. The following elements can decide the sale – if they are used correctly.

Product images

Very few people would buy a product without having seen it beforehand. For many people it is still a barrier that products in online shops cannot be held in the hand or tried out. Therefore, there must at least be a visual incentive to buy the product.

There are several things to consider here. The image must be meaningful and  must contain the actual product. Ideally, several pictures will be shown to illustrate the product from different angles. For example, for a buyer, the back of a pair of jeans is just as important as the front.

Photos on product pages: Photos Important elements
Source: www.amazon.de

Amazon does a lot of things right in terms of e-commerce and is rightly one of the largest online shops in the world. With the selection of images, they show several images of nearly all products so that the customer has a good visual overview of the product.

To do so, product images can be enlarged and may also allow the user zoom in on the details.

Product description

Normally, pictures are not enough to sell a product. For example, technical descriptions of computers are hard to reflect in pictures. Therefore, there must be an accurate description of the product. The product description should be brief and precise. It should not be littered with unnecessary details.

However, the actual product description can contain a short promotional text that sheds the correct light on the product. Here, embellishments are perfectly legitimate.

If a short message is not sufficient to describe the product or more details need to be conveyed, it can be described in detail elsewhere. This can be integrated via a link or a combobox.

Photos on product pages: more informations
Source: www.connox.de

Additional information that is not absolutely necessary should be placed elsewhere. Otherwise, there is an information overload, which can overwhelm the buyer. The online shop of "Connox" stores additional data via a link in a combobox.

Useful components of a product page

The previously listed elements are almost all indispensible for an online shop. The following tips are optional, but can contribute to a successful sale.

Price on sale

As previously stated, the price is one of the key elements. Unfortunately, it can be a very rapid deterrent. One way to make it more attractive in reductions is to cross out the previous price and highlight the new one using colour.
Photos on product pages: Price on sale
Source: www.footlocker.eu

The customer perception achieved is enormous. The new price and the coloured background make the product attractive.

Information and choices

This point includes some aspects that can be used in an online shop at the owner’s discretion, but can create a user-friendly experience.

The problem of information overload was referred to in the product description. The same can occur with additional information. However, some data is always interesting to know. Especially shipping information and return policy are often a must in e-commerce.

For many products, there is usually more than one choice. With clothing and shoes there are various sizes, technology comes in different versions or are there different versions of modern media. Instead of making a separate page for all of them, it is more convenient when the choices are displayed directly. Furthermore, it is advantageous if the quantity can be changed.

Photos on product pages:Shop informations
Source: www.hhv.de

The online shop "HHV" implements the above points beautifully in their simple shopping page, without an information overload.

Next to the picture, the size can be selected. A good detail here is the greyed sizes for sold-out products. The quantity can be adjusted directly below the buy button.

Lots of important shop information, such as shipping and return policy, is listed directly below. The information is presented in a clear and concise manner and backed up with a picture. The customer therefore adjusts quickly and easily.


Product presentation is the lifeblood of e-commerce. To sell products successfully, the correct balance of images, information and layout must be found. The instructions shown are a good guide for a successful online store. When all items have found their place on the website, another important step is to find the right character of the shop. Here, one can give free rein to creativity.