Anatomy of an e-commerce page
E-Commerce – is an area of the economy that includes all financial and trade transactions carried out through the computer networks and business processes related to such transactions. E-Commerce sites are designed to sell a variety of products over the Internet. These websites have a number of features that are determined by their purpose. The main ones are:
- full-fledged personal account (personal data, order history, status of current orders, the ability to make deferred purchases, payment information and delivery information, loyalty programs);
- connection to payment systems;
- integration with delivery services;
- the ability to manage discounts and markups on goods, to form different types of prices for different types of buyers, to set discounts on reaching a certain amount of goods, to create discount coupons;
- integration with warehouse accounting systems.
A. Breadcrumb trail links
Breadcrumb trail links is an important factor in the usability of websites because they show the user their location on the site. It also allows users to quickly return to higher-level categories when the «journey» through the site goes far enough in the nested categories, regardless of which page of the site they opened first. Breadcrumbs are also useful for SEO (Search Engine Optimization) because they allow search engines to more easily determine the structure of the site.
This markup allows you to display data as «bread crumbs» in search results instead of simple URLs - just display the domain name of the link to «bread crumbs». This is another good confidence signal that can help increase CTR (Click-Through Rate).
B. Product Title
Every visitor pays special attention to the name of the product. What should it be like? Good name:
- does not contain abbreviations, except clear to all (kg, m, cm);
- does not contain professional terms that can be replaced by commonly used words;
- corresponds to the only standard formula adopted in a particular online store, for example, product type - smartphone, brand - Xiaomi, model - Redmi 4A, model article - 3614288;
- contains important characteristics that will help the visitor to make a choice, for example, for a smartphone it can be the amount of memory and color;
- helps to navigate the range easily and find the correct product among the entire list.
C. Rating
The main purpose of the rating is to increase consumer confidence. The potential customer trusts real buyers, those who have already tried this product more, than advertising tales about the features of this product.
D. Video
The product page often, in addition to images, also has demonstration videos that facilitate perception, allow you to see the product in action. It can also be 3D videos that allow you to view the product from any angle.
E. Thumbnails
A thumbnail is a small copy of an image for compact presentation to the user. Thumbnails are often embedded in slides. Once the thumbnail is clicked, the corresponding image opens in its original size. Thumbnails save space while maintaining information.
F. Related Products/Similar Products
Choosing a phone, the buyer can look at the accessories that come with it (protective glass, case, memory card, etc.). The ability to buy the product in the kit increases the average check and the profit of the online store. The buyer can also get acquainted with goods similar to the interested ones.
G. Product Information
The product description can consist of several tabs. These can be tabs with specifications, accessories, delivery and payment methods, questions, reviews, and other product information.
H. Sharing Links
In order for people to buy the offered product or service, they must first trust its provider (web resource). In addition to excellent design, content, and UX (User eXperience), you can increase user trust by including trust signals, such as chat with a company representative, detailed contacts of the organization, customer feedback, social media pages, and more. Most trust signals are aimed at convincing the user that the website is run by real people, it is quite large in its business and it is trusted by other users.
I. Price
Not one price, but several can be specified here. For example, an old (crossed out) price or a discounted/promotional price may also be provided.
J. Order Information
The user must know everything about the terms of payment, delivery of current goods. This block provides all the necessary information.
K. Options
These can be radio buttons, checkboxes, or icons that allow you to select the characteristics of a product to buy it. For example, buying a smartphone, you can choose its color and amount of memory.
L. The «Add to Cart» button
Sometimes you can find another definition of this button: Call to Action. Call to action (abbreviated CTA) - a user's call to certain actions on the web portal. There are different types of CTA.
Awareness CTA – a type of call to action associated with a proposal on the main page of content, through which the visitor can get more information on a particular topic.
Consideration CTA – calls to action are related to content that helps solve the problems or tasks that the user has entered the web portal.
Decision CTA – a call to action associated with an offer to try a product, such as a demo version or a free trial.
The most important CTA should be shown at the top of the site, without having to scroll down the page.
On average, a CTA button raises a conversion 2.75 times, and a large color button can increase it 5 times.
From the point of view of testing the first «Add to Cart» option is more practical. The button allows you to add the product to the cart. On some sites, after clicking the button, the user is automatically redirected to the cart, where this product has already been added. But in terms of usability - this is not quite the right approach, because the user must be given the opportunity to choose other products to buy. It is better to implement such a function for the «Buy It Now» button, in the diagram, it is marked W.
M. Quantity
With such a counter you can specify the number of items to buy. The limit values of the meter must be limited by the available quantity of goods in the warehouse and the value must not be negative or equal to 0.
N. Wishlist
Visitors to the site should be able to add store products that they like to the wish list page. This will create a special page where products will be added. In the future, users can add these products to the cart or delete them. This feature helps the user to remember the liked products, and then quickly find them.
O. Add to compare/Compare
This is a particularly useful feature when choosing equipment. For example, choosing a smartphone, the user wants to compare several models to choose the best combination of price-quality equipment. In this case, the user can add several products to compare and in a convenient tabular form to compare all these products.
P. Price watch
Also, a convenient feature for the visitors, with which they always learn about price changes for products of interest to them. The user forms the list of such goods independently.
Q. Availability
This icon will notify you if the item is in stock or out of stock.
R. Special offers
This block can display additional products with a discount or accessories for the current product with favorable terms of purchase.
S. Reviews
This is a link that provides a link to the tab with customer reviews. This allows you to assess the quality of service and product quality first hand.
T. Product ID
The product code is useful for online stores that sell in catalogs. The description, image, and name of the product may change, so the product code in the catalog is the most accurate way to determine a specific product model.
U. Zoom In
It is very convenient when you need to view the details of the product. The enlarged image is usually displayed in a separate pop-up window.
V. Product photo
Images are much better remembered than text and many shoppers on the Internet will view products (posts, articles), looking only at the image. For the offered products it is necessary to use clear images and to allocate the maximum possible space for images. You should also consider including a larger version of the image or zooming out.
The default image should be the most appropriate (for example, the color option that sells best) and additional images should be available to cover different color options and so on.
W. The «Buy it Now» button
The functionality of the «Buy Now» button is similar to the functionality of the «Buy» button, but the user immediately after clicking goes to the stage of buying goods, while after clicking the «Buy» button, the user can continue to search and add other products to the cart. 
