E-Commerce website Commodity Information Display page design

Introduction: E-commerce website design focus is to improve the conversion rate of users, so we visit an E-commerce site page, always see many other types or the same type of recommended products. This is also often used in the design of cross-selling and up-selling. The only way to do this is to provide the goods that are of interest to the user as much as possible, thereby contributing to more sales. Therefore, this article mainly discusses how to design the display of the goods in different pages, so as to better improve the user's rate of special account.

Have you noticed that when showing cross-selling and up-selling (Cross-sells and Upsells), many E-commerce sites hijack users from the pages they are browsing to the product pages they want to recommend, and often do not provide a "return" link. Obviously, this is not the most effective way to sell products, there is the possibility of improving the conversion rate of commodity purchase.

It is clear that cross-selling availability is a key factor in achieving effective improvement. But how to do without interrupting the user to browse the process of the premise of better display of merchandise information to users?

AJAX floating-layer effect

The way I most recommend cross-selling/upward sales is through mouse hover (Pre-click) to display related product information. This can be achieved with Ajax "hover" effects. At the very least, you can show the title, Price and inventory of the item. Can also show the general merchandise information, logistics options, customer average score/sales score, optional color, and so on. Barnes and Noble can even allow users to quickly add the product to the shopping cart:

But there is a potential problem, too much information will be flooded in a small floating window, like the TheFind front-end features also include tags:

Quick Preview

Foot Locker gives consumers the option of "Quick Preview":

You can choose the product size, color, etc., even add to the shopping cart and do not need to leave the original product page. The only tricky thing is that if you don't click on the preview thumbnail on the right, you'll be able to read the full-size full-sized page of the product directly. This is some usability summary for quick View and Quick Preview features. Then, if you accidentally read the page, Foot Locker will provide a list of recently viewed items in the secondary column.

Contrast array

When the proposal is "up for sale" (it is recommended to purchase more and more expensive versions of the same series) or "optional products" (the same category and price similar products), it is useful to provide a check box to provide a functional comparison matrix to compare individual product features. I've seen some examples of implementations, below a somewhat similar prototype:

This functionality does not make sense for "cross-selling" because it makes no sense to compare apples, habits, and doughnuts to functional comparisons.

Pack several items into a shopping cart

Amazon and Sears allow users to pack a variety of items into their favorites and provide the option to remove those suggestions that you don't need:

There are several ways to improve the availability of cross-selling and upward sales.

Victoria ' s Secret has a good page layout for cross-selling, allowing multiple items to be added to the cart.

The problem with this design is that unless you click "Add Cart" 3 times to make all your selections, you will not be able to go back to the shopping cart page. If the user is unsure how to operate, there is no clear guidance on the page.

The equipment bundle of Martin and OSA's shop allows users to make shopping choices one after another without leaving the page, and clicking "Add to Cart" once you are done.

Bring suggestions to the shopping cart

Some customers will worry that if they click on the relevant items, they will not be able to return to the product page they are looking at. Arden b Displays the same cross-selling items on the cart summary page:

Walmart the recommended product at the bottom of the product details, the following is the recommended product for browsing baby carriages:

After you add the product to the shopping cart, your cart will be the bronze drum AJAX Instant Update (upper right corner), the user is still in the product interface, but "buy this product customers also bought XX" moved to the top, the details of the goods moved to the bottom of the section. Very clever way of doing it.

Sears also uses a similar approach, when a product is added to a shopping cart, takes the customer to the login page (landing page) and displays "buy this and buy that" at the top: