Code Harbor | Blog

E-commerce Website Development Part 3: Product Page

Paul Jones

DevelopmentMarketing

We continue to review the features of modern e-commerce websites and the very technology of designing a high-quality product with a high conversion rate. In the third part of this series, we will tell you about the product card and everything related to it. If you didn’t read the previous two parts, you can check the out here:

As for us, the product page is one of the most important parts of the online store. This is the place, where users most often make a decision to purchase. This page is usually overloaded with various information and blocks that are designed to force the user to make a purchase or increase the average receipt. Don’t forget that the more information on the page, the less customer attention a single element can get. And the longer the page is, the less likely the user will scroll to the end. Traditionally, the most significant information should be placed on the first screen.

Below, as an example, we offer several full-length screenshots of product pages from popular e-commerce websites. Click to take a look in full resolution. And while we will describe the elements and modules of the product page, you can cast a glance there to compare.

At the very top, we have the usual header, service buttons, contacts, and search bar, which are always present on all pages. A good move will be not to make the header pinned, so it won’t obscure the view when the user scrolls down. Under the menu, in the center or on the right of the main photo is a large bold product name, which makes it clear to the user that all info below is related to this product only.

First screen

On the left side of the page is a large photo with several small ones below – the product gallery. When you click on them, a pop-up window opens with the photo gallery function or, if the page is large enough, the shown photo can simply change when the gallery is scrolled. Also, sometimes, if it’s appropriate, the “magnifying glass” function can be implemented and when you hover over a large image, it shows a zoomed-in image next to it. A video review and a 3D overview can also be added to the gallery.

On the right part of the screen, besides images, there is always a block with the price, a short list of main features, and various essential information:

  • availability;
  • product rating;
  • a number of reviews and total score;
  • payment options;
  • add to favorites button;
  • add to comparison button;
  • selection of additional parameters (color, size, model, etc.) 

And at last – a large “Buy” button. Or, what is more common – two buttons: “Buy now”, which takes the customer straight to the checkout; and “Add to cart”, which has an obvious purpose. Below this block, you can usually find brief information about payment options, delivery, warranty, and other legal information. When it’s an electronics e-commerce website, the button “Add accessories” is also frequently used to increase the average purchase receipt. There you can create a block with services for the product, for example, full configuration or installation. 

If to exaggerate, the first screen should provide minimum necessary information about the product and, if a user knows what he/she needs, the first screen should be enough to help to make a decision.

What we talking about here can be obvious for those, who are developing e-commerce websites on the regular basis. We aim to explain the process, meaning, and importance of each block and element to entrepreneurs, who decided to open a website. 

Description block

Next, we have a large block with detailed information about the product, typically in the form of tabs, since there can be a lot of information. By default, there is an “Overview” tab (1), where the user can see the presentation text with a small table of general features. Then, the second tab will be something like “All features” (2) or “Full description”, with a large highly detailed table of all the possible product features. The third tab or section contains reviews (3), by default sorted by the best or the most useful. The header of this tab must contain the number of reviews and the average rating. Maybe even with classic 5 empty star icons, filled according to the rating. The fourth tab can be dedicated to questions (4) if the website isn’t a marketplace and has only one vendor. Such a tab requires the existence of customer support in your company. And one more tab can contain various information: store rules,  media files, full resolutions photos, video reviews, manufacturer’s info & ads (5), etc.

The layout with tabs is the most common for modern websites, especially when there is a lot to tell about the product (complex products like electronics, home and office supplies, furniture, machinery, etc.). Sometimes tabs are arranged horizontally, sometimes vertically, and the first tab is always opened by default. When your products have a short list of specifications, like clothes or food, you can combine all the information and media in one block. The main thing is to divide all the information logically, to be perceived normally. 

All these informational blocks should describe the product in all the details, from the seller’s and from the customer’s perspectives, to present the product from the best side.

Additional blocks

Under the product information tabs, all the auxiliary blocks will be placed. For example, classic “Customers Who Viewed This Item Also Viewed” and “Frequently Bought Together”. The first one is for the case the user has studied information about the product, but for some reason didn’t like it, or decided to get something better. This is called upsell – to push the customer to choose something more expensive. The second type, called cross-sell, should encourage the customer to purchase additional goods, which in theory, will complement their purchase. For example, while buying a smartphone, users can also like the idea to get a phone case, earphones, or a power bank. Especially if while purchasing everything in one go, the customer will get a substantial discount. E.g., phone plus power bank with a 25% off. A tempting offer, isn’t it?

In the same way, you can offer a user to get a set of products with a discount on the pop-up blocker, which appears after pushing the “Add to cart” button. It successfully does Amazon.com and Ukrainian marketplace ROZETKA with its huge product pages.

To this moment the length of the page is already tremendous, so placing some important information below is not so smart. Because only a few people will scroll that far and look there. There may be placed tag buttons for this product just in case the person didn’t like anything. You can also create a block with SEO text here, but this is not necessary. It is relevant mostly for products with very high competition.

The product page strongly depends on the product itself. All products are different, so the presented information will be different in each case, but the main blocks and their purpose, most often, remain unchanged.

Product demonstration

The way you represent products is very significant for making a purchase decision. Any online store has a major disadvantage compared to an offline store: customers can’t touch the product, can’t feel the texture, the weight. Simply, customers can’t evaluate it. Our senses for perception are very limited online. That’s why you need to compensate for that with what you have. Such as product demonstration tools, a proper visualization.

First, any online store needs high-quality photos for each product and there should be as many as possible of them, at least 10 pieces. Simply put you need to show the product from every possible angle. Especially if it is a complex product, like a backpack, gamers chair, or laptop. By clicking, the user should be able to view the photo in high resolution. The user should want to buy by looking at the photos. If there is no product available, you need to put a gray overlay on the main photo and price. 

All the photo and video materials should be in Full HD resolution, so don’t skimp on the services of a photographer, or at least on an adequate quality camera. If your store is not a one-time event, your product catalog will be updated regularly and you will regularly need new photos. 

Also, don’t remember, that you need to protect your photos with a watermark. The best option is to set software that automatically adds it to all images after upload. This is necessary to protect your content from unauthorized use and theft.

For most product groups you will need to make one or several video reviews in which the product will be shown from all angles, described how to use it, and the result of use. The video must also be of high quality. Also, turn off comments on the video. Let users write their opinions only in reviews.

In the last few years, the 3D product model feature has become increasingly popular. It’s usually made of numerous photos of the product, made from slightly different angles while spinning around its axis. And then the user can turn this “3D model” with the mouse. This feature is not a priority. It should only be used for the most popular products and only if such a demonstration surely will increase interest in the product.

You should also add a text overlook for each product. In addition to the SEO benefits, this also can help customers, to decide while searching for the product and also for those users who can’t open video overlook due to lack of Internet connection.

Product modifications

Marketers have come up with the idea of selling different products with different service packages or feature sets a long time ago. This will significantly expand the market. Many products have modifications: from simple color modifications to a whole set of possible parameters, models, modules, etc. Making a separate product card for each set of parameters is wasteful. It is better to create a single product card with the ability to select the necessary modifications that can affect the price and availability. To demonstrate these features, you can create an interactive product model and a feature to choose a complete set.

A potential buyer can select different parameters and the model will change immediately. This is very convenient, for example, for clothing. You can create a full-fledged product builder if you are selling products with many various configuration options. For example, in bikes or cars, where there is always a base model and tons of upgrades can be added.

First, let’s look at a small preview of the product in the general catalog. There may be several modification options, and all of them may have different prices and be in different quantities in stock. But we need users to have the possibility to buy products from the catalog without entering the product page. What should we do? There are several ways to solve this problem. The best option is to show the base version of the product with its cost and let the user click a small icon in the preview to scroll through the modifications and select one that the buyer requires.

Also, these options can be presented in a drop-down list, which can be opened by clicking a small button somewhere on the preview. Anyway, after choosing the modification the price changes dynamically, without reloading the page. If some modification options are not available in stock, they should still be shown, but with a gray overlay, making it clear that there is no such modification for a moment. If the product has several parameters which can be changed, it will be extremely difficult to show them all in the preview. So either we make a link in the preview to “Product Constructor” or “Choose the model” with a pop-up window opening when clicking. Or we give the option to select parameters after clicking the “Buy” button in the form of a pop-up window.

On the product page, the ability to select modifications should be clearly visible. You can make a special block “Product Constructor” with switchers for different modifications, where you can give the user the opportunity to choose all possible options. Homogeneous parameters should be grouped, maybe also in drop-down lists. If you have, for example, 50 different colors of this product, and you don’t need to show them all at once on the page, hide this option in the drop-down list. And, speaking of colors, show a rectangle with color and the text spelling of this color, this allows customers to understand what color is meant, and also, it will help people with color perception disorders.

In addition, you need to link product modifications to faceted navigation. If the user has selected, for example, red, then all products that have color modifications and fall under the other parameters selected in faceted navigation should immediately be shown. Shown with the already selected red color, the price for the red product, the availability of red products in stock, and with the photo replaced with the product in the red version. And of course, if the product is not available in red, but is available in other colors, show a preview of this product with information that it is available in other colors. Perhaps color or other chosen parameters won’t be crucial, so the customer may want to make a purchase of a different modification.

In any case, there are a lot of “ifs” in this paragraph. It is better to study the store’s catalog individually because there is no universal solution.

Reviews

In recent years, online stores have become increasingly overgrown with various functions for social interaction. This trend will continue to rapidly increase. Social media elements appear in stores more and more – you can send messages to other users, add “friends”, share your wish lists and favorites, and many other features. But, as we mentioned in the previous part of this series – people rely on public opinion strongly. People want to make their choice based on universal approval. They want to be sure, that their choice is justified and enforced by others’ experiences.

It’s cynical, but as an online store, we don’t really care what product the customer will use to satisfy their needs. As long as they make a purchase, our main goal is achieved. So, if you are developing a simple online store, not a marketplace, we can tell you right away that you shouldn’t be afraid of negative reviews. Moreover, the modern buyer is distrustful, and if the store’s website contains only positive reviews, this is likely to arouse the consumer’s suspicions. One thing is for sure – reviews are a mandatory feature on the site.

Today, reviews are mostly in text form. This is a simple feature for site developers and is familiar to users. Some online stores are experimenting with video or even audio reviews. You can try to implement such features if you have enough resources. Furthermore, following suit to the best, you can encourage users to publish video reviews with their unboxing by giving them discounts or digital currency if your online store uses one. 

In the interface, reviews are usually located on the product card itself. Often this is a small block with some of the most useful reviews and a link to view all reviews. If there are no reviews yet, the site should offer anyone who comes in to leave a review. If there are some reviews already, then the block should look something like this: 

  • the block title;
  • the “write a review” button;
  • the name of the review author;
  • the review date;
  • the anchor link to this review;
  • the product rating in points;
  • the review rating in the form of a question “Was the review useful? Yes / No”;
  • the reply to review button, or if there are already answers, the number of responses. 

Under the list of 3–5 reviews, there should be a link “Show all reviews”, and a figure with the total number of reviews in parentheses. You can mark reviews from those people who actually bought the product, and such reviews will be more trustworthy. You can also add “report a review” and allow users to help moderate content in the online store. Very large reviews should be automatically truncated after 300 characters and have a “Read more” link.

In the reviews tab itself, you can show the most useful posts at the top, so that the new buyers don’t waste their time reading all the reviews, but only reads the most useful ones. Alternatively, you can sort by rating (by default, it should be filtered by publication date).

The review can only be left by registered users. Firstly, it will motivate users to register, secondly, other users will get more confidence that the review was left by a real person, and, thirdly, it is protection against spambots that automatically send spam to all forms on the site. At the same time, authorization should not become an obstacle for the user. You can immediately ask the user to log in via social networks or enter their username and password in the review form.

For some users, the “Follow the reviews” feature will be important. It is also significant to notify users when their review has been answered. But, for sending the user some notifications, messages, or emails, you have to get the user’s consent. So you should include the “Notify about responses” checkbox in the review form. The feedback feature is often used to discuss product details. This section can sometimes turn into a mini-forum. In this regard, some online stores began to divide reviews into “Product reviews” and “Comments”. The comment field itself can be either simple: name, email, and comment; or more advanced: ratings, pros, cons, and the “I purchased the product” checkbox.

For marketing purposes, your customer support managers can get involved in responding to users’ reviews and comments. It will be something like an analog of consultations in the sales halls of offline stores. Especially large online stores may try to attract official representatives of major brands to answer users’ questions. Also, ideally, you will need people to set up a pre-moderation of reviews, otherwise, there is a risk of generating spam, offensive language, and other unpleasant moments.

Reviews are one of the indicators of the store’s popularity. All popular stores always contain a lot of reviews. Therefore, you should try to encourage customers to leave reviews. Both about the products and the store itself. The most straightforward and correct option is to ask each who bought this product to leave a review. The algorithm is quite simple: each buyer is automatically sent an email 2 weeks after the purchase, asking them to leave a review about the purchased product and about the store’s website, and a review about the store as a whole on third-party sites if possible: social networks or marketplaces.

The full list of reviews can be hidden in the tab on the product page and dynamically loaded when clicked. This will be useful for SEO, because reviews are unique content with keywords, and search engines are very fond of unique content.

Product ratings

Another social interaction tool is product evaluation. It’s a simple visual mechanism that helps customers indirectly understand which is a good product and which is not. On the websites of online stores, this function is typically presented in the form of 5 stars, and in the product card they are located not far from the block with reviews, since this is also a kind of product review, only in a slightly different form.

The function can work either separately from the reviews themselves, or in a single bundle. If it is separate, then the user can simply click on the stars and choose from 1 to 5 points. However, it will be more profitable for the store if the person not only clicks on the stars but also writes some text. Users are becoming lazier and lazier every year, so they should be helped to take the necessary steps. Some stores have started linking product ratings to reviews. The user can only set a rating by accompanying it with the review text. But typically, even then, users put a mark and left the text input blank. Anyway, this counts as well.

Intermediate summary 

Designing and developing everything described above is not easy and not cheap. We have described an ideal product demonstration, but, again, there is no universal solution. Highly interactive pages with product constructors, dynamic switches, video reviews, chats, and so on can indeed increase sales. But for the small online store creating all this can be an unjustified expanse. For a small online store only photos, for example, will be enough. 

In the next parts of this series, we will describe prices, display of availability, favorites, payment options, product comparison, upsell and cross-sell behavior templates and decision forecasting, loyalty programs, and much more. So, stay tuned!

DevelopmentMarketing
Facebook Linkedin Twitter link copied copy--file

Popular articles