What do you know about the item card?
You can know what it is, what elements in it should be. You can guess how to position them correctly, so as not to spoil the conversion. Maybe you even know that you need to carry out A / B-testing of various parts of it. You understand for sure that large and high-quality pictures are undoubtedly a plus, but, most likely, you do not have a clear idea of what exactly you should definitely have in the correctly compiled item card.
Have you guessed it? Then sit back. In this article we will tell you about all the elements of the product card. We will explain where they should be located, why you should do this way and not otherwise, and also reveal some useful tricks, how to get the maximum benefit from each element. As illustrative examples, product pages of famous foreign online retailers will be used: Amazon, ASOS, Zappos, etc.
- 1. Certain sequence of elements
- 2. The answer to the question "Why do I need it?"
- 3. Bread Crumbs
- 4. Product Name
- 5. Main product image
- 6. Wish list
- 7. Share on social networks
- 8. Product price
- 9. Product evaluation
- 10. Customer reviews
- 11. Product Benefits
- 12. Product size
- 13. Unit of account / product code
- 14. Delivery Report
- 15. Purchase area
- 16. Product availability
- 17. Color options
- 18. Size chart
- 19. Size options
- 20. Button "Add to cart"
- 21. Description of product details
- 22. Product Reviews
- 23. Brand information
- 24. Return policy
- 25. Shipping data
- 26. Size
- 27. Complete the image
- 28. With this product also buy
- 29. Recently viewed products
- Item Card - a place where magic should occur
What is a product card and what should it be
The product card / product information page is a detailed description of the product along with the functional elements (buttons “buy / add to cart”, the section of related goods, available colors and sizes of goods, etc.).
The purpose of the product card is:
- Reduce distraction / focus consumer attention
- Attract at various stages of purchase
- Confirm the motivation of the buyer (answer the question why the buyer needs it)
- Answer questions and raise confidence
- Make the desired action simple and obvious.
Brian Eisenberg, a well-known marketer and writer, argues that all people, when making a purchasing decision, are motivated at the most fundamental level by the single defining question: "What is the benefit for me / why do I need it?" Their dominant personality types strongly influence how they ask this question, how they perceive value, and how consciously (or, in most cases, unconsciously) approach the decision-making.
Therefore, when making a product card, two key principles should be remembered:
1. Certain sequence of elements
Special technology "eye tracking" allows you to track the movement of the user's gaze on the site. According to a study by Jacob Nielsen, conducted in 2006, if the user is not looking for any specific information, but simply looks at pages on the Internet, the trajectory of his gaze resembles the English letter "F". Knowing that the majority of visitors will view your site exactly this way, you can arrange key information (name, picture, call to action, profitable promotions, etc.) within this trajectory.
2. The answer to the question "Why do I need it?"
This is achieved through the placement of materials, pictures, videos, calls to action. You can also place guarantees, customer reviews, specify the possibility of returning the goods. This will allow the consumer to trust and more confidently make a purchase decision.
To facilitate the enumeration of the key elements of the product card, we divided them into 4 sections on the template:
Section 1: top left of the page inside the active window
Section 2: upper right side inside active window
Section 3: the left side of the page below section 1
Section 4: the right side of the page below section 2
With the first two elements, everything is clear. From above, the name of your website or online store (1), followed by the main sections (2). These may be categories and subcategories of goods. And then let's analyze each section in detail.
3. Bread Crumbs
The navigation chain, or, as it is more often called, bread crumbs, is the path a user has traveled from the main page to the one on which he is now. This is what this element looks like:
Why is this element required to be present in your online store? It's simple: this option allows users to easily go back one or two steps and is very convenient for them.
4. Product Name
The product name can be placed directly above the image or at the top of the page to the right of the image. According to the results of the above study, consumers are viewing the page from left to right, starting at the top left corner. Thus, the most convenient placement of the product name is at the top left. Thus, the consumer immediately receives confirmation that he got exactly where he wanted.
Tip 1: If you sell different brands, specify the brand name in the product name.
Tip 2: Do not be afraid of long titles. In this section, they are placed quite easily. In addition, a longer name explains to the consumer which product he is looking at right now. Also, the full name makes it possible to play on the brand name.
5. Main product image
People no longer want to browse the site, they want to get a certain impression. The old adage “it’s better to see once than to hear a hundred times” online acquires a new meaning. You will succeed if you present your products with exciting and inspiring pictures. Buyers must submit how they use your products or services.
Thus, using the picture you can clearly convey to the consumer its benefits and benefits from the purchase of this product. That is why properly selected product images significantly increase conversion.
Tip 1: If your pictures are of high quality and effectively present the history of the product, then you can use them in a rather high resolution. For the convenience of consumers, you can also embed the drill-down option (loops), allowing users to zoom in on any part of the picture and view it in detail.
Zappos uses a very large product image. Despite this, there is still enough space on the product card for other content.
Tip 2: Additional pictures successfully perform their functions. They show the product from different angles to highlight the benefits or unique features. Also you can use this tool to show the product in everyday use.
6. Wish list
This list can also be an effective tool if its functionality is built correctly and tailored for the subsequent sale.
Hint: Creating an "Add to Favorites / Wish List" link is quite simple. But for the competent monetization of this tool, try one of the following:
- At the consumer's mail at regular intervals, send a notification that reminds him of the products contained in his wish list.
- Offer discounts. It is not recommended to do this all the time, since the buyer may develop a conditioned reflex, and he will postpone the purchase until you offer him a discount. But you can easily create additional incentives from time to time to buy an item from the list.
- Send a notification that your offer for this product will expire and this product will be temporarily / completely withdrawn from sale.
- Point out to the customer the opportunity to send his wish list to a family member or friends so that they can give him a gift. This trigger works great for any holidays: birthday, New Year, Valentine's Day, etc.
Trying to optimize product cards for your online store? Put this work in the hands of our company. We really know how to do it right, and we can greatly increase the revenue of your company.
7. Share on social networks
Although almost every business places social networking buttons everywhere, you don’t have to place these buttons in the details of the product. The reason for this lies in understanding the difference between the intention to buy and brand loyalty, which arose after the purchase of goods.
Intention (expressed in the study of products and content) and loyalty (emotional attachment) manifest themselves at various stages of the conversion scenario. According to Forrester, 20% of customers want to demonstrate their loyalty to the brand after purchase and are ready to somehow express their emotional satisfaction.
Tip 1: Use the gained loyalty of your clients in social networks after purchases. Post social network buttons on payment / purchase confirmation pages or tell about your corporate pages in emails when you congratulate your customer on a successful purchase.
Tip 2: You can also post links to social networks at the end of the product video.
8. Product price
Specify the recommended retail price (RRP), the current sale price (if any) and the amount of savings.
Hint: Clearly show the percentage saved. Years of research and tests on Amazon.com have proven the effectiveness of the display of this percentage. Why don't you use this traditional business tactic in online sales? Now Amazon is successfully using this tool, indicating the retail price and the amount of money saved when buying the same product on the site.
9. Product evaluation
Check out the star rating on Amazon.com. Each consumer can set a rating on a five-point system. Of all the ratings and the total rating of this product. Why do consumers need it? For them, this is the surest indicator of the quality of the product and the degree of your honesty.
10. Customer reviews
Nearby is a link to comments from other buyers - the link leads to the reviews section in section 3. People who have read reviews from other buyers will find it easier to make their buying decision. We used to trust the opinions of other people. According to statistics:
- 61% of consumers read reviews before making a purchase decision.
- 63% of consumers prefer to buy on the site where there are customer reviews.
Just remember that you should not remove negative reviews. Their presence gives confidence to your products. Of course, provided that you trade in really high-quality goods and know how to respond correctly to each negative review.
Do not make excuses that your product is seasonal or you did not have enough time to collect a sufficient number of reviews and make this section relevant when making a purchase decision. In this case, you need to properly think out a system for collecting feedback, which will subsequently simplify the life of you and your customers. Ask your customers a question, ask to send feedback by mail, offer a discount for a review, ask for advice or assistance. Build two-way communication.
11. Product Benefits
General customer questions from the category of "What is the use to me of this?" related to the fact that consumers want to understand what they will get when they buy your product (i.e. how your product can improve their lives). In this section, you answer similar questions, conveying the main benefits of your product and the benefits of using it.
12. Product size
Under the list of benefits, make a small section describing the physical parameters of the models that demonstrate your products. Suppose you have a site selling clothes, and you use photos of men and women in your clothes. So you have to indicate their height, chest size, waist and size of clothes that they wear.
Iconic uses this technique on their item cards. Please note that in the picture - the second paragraph on the right: "Our model wears a t-shirt of size 40. The model is 192 cm tall, the chest is 99 cm, and the waist is 81 cm."
13. Unit of account / product code
Now the so-called "showrooming" is very popular. Customers go to the store, get professional advice about a particular product, and then order it via the Internet. It turns out cheaper and immediately with home delivery. The presence of the product code at the top of the item card will help your client quickly navigate the process of finding the desired item or obtaining information about it.
14. Delivery Report
Briefly mention the delivery. Ideally, this short message should contain the cost and standard delivery time in order to get rid of the claims of consumers who want to get purchased products immediately. This message also reduces the number of failures in the "Shopping Cart" section, as the buyer knows in advance the price of delivery of this product.
Hint: The easier it is for the customer to calculate the final cost of delivery, the better. The free delivery message automatically increases conversion. Look at the product card of the company ASOS - right below the price you will see a link to the free shipping and returning the goods.
15. Purchase area
A purchase area is a section of a product card that contains all the information necessary to select the right product to buy.
The purchase area is intended to attract the consumer's eye and make obvious the only major action that he / she has to perform on the page. The selection of the purchase zone is achieved by simply darkening or filling the background area.
Together with the bright call-to-action button, this area becomes extremely obvious to the consumer. An example of such an area can be seen on any Zappos product card (in the image on the right, it is highlighted in gray).
The purchase area contains the following information in this order:
- Product availability (message about goods in stock)
- Color options (if any)
- Size Chart (if available)
- Size options (if any)
- Call to Action Button
- Confidence Building Message - Warranties
16. Product availability
Suppose you have displayed the number of products in stock. A simple message, “The goods are in stock and ready to be shipped,” will increase customer confidence in the final stage of the conversion scenario. By placing this message within the purchase area, you will let him know that this statement applies to this particular product and any of its varieties.
17. Color options
You can convey the color variations of the product using a collection of samples and a drop-down list of colors. Make sure that in the collection of samples all colors match the factory colors, otherwise it may hurt sales. If you have a large selection of colors, remember that samples can take up a lot of meaningful product card space. In this case, the drop-down list is a more appropriate option. In the picture you see an example of a product card, in which a drop-down list and several samples in various colors are combined.
hint: When a consumer changes color in a drop-down list, your main product picture should change to reflect the color change. This allows the buyer to choose a visually appropriate color, and you just need to pick up product samples with colors identical to the factory color of the fabric.
18. Size chart
Place a link to the size chart above the size selection option, as the customer scans the purchase area from top to bottom. If the buyer is not sure about the size - it is better to immediately teach him to determine the size of the goods, before they offer him to choose the size.
Tip 1: When you place the size tables, make it appear on the item card. No transitions to other pages or PDFs. Additional unjustified actions and transitions reduce conversion, so do not allow the choice of size to distract the buyer or become a barrier to purchase.
Tip 2: Make sure that the size chart corresponds to this particular product. If women's jeans are declared on the product card, the table should not contain male sizes.
Another great example from ASOS. They developed size tables for subcategories. For example, men's sweaters and cardigans have their own size chart:
ASOS places the size guide on a separate page, but the client remains on the item card. Having closed the size table, he again has full access to the product card.
19. Size options
As in the case of color, here you also have to choose between the drop-down list and the box with the sizes. However, keep in mind that boxes take up space and shift the call to action down the page.
Many will argue that the boxes make it much easier to choose the size, but most consumers prefer drop-down lists. Another significant advantage of the drop-down list you will find when developing a product card page template. Независимо от количества размеров, выпадающий список всегда будет занимать одно и то же место на странице карточки товара (убедитесь, что вы правильно определили ширину выпадающего списка для более длинных названий товара).
A strong argument against the box size (and color) is the inflexibility of the proposed patterns. Many page templates do not have variations for different product cards. For example, one product can have 10 sizes, and another - only 2, but the same boxing template will be used. Thus, on a product page that has only 2 sizes, there will be empty space on the page, which may cause discomfort to visitors, since the page may seem incomplete or unfinished.
By the way, Zappos and ASOS use a drop-down list, Amazon uses a combination of two options, JohnLewis uses boxes.
20. Button "Add to cart"
Since this is the most desirable action a customer can take on a page, there are several key characteristics of the add to cart button.
- She has a contrasting color with your site; if your site is green, you can not have a green button
- It is big (size matters)
- It attracts the attention of visitors and makes clear the action that he must take
- It makes you want to click, it looks volumetric.
Many articles look at this topic in some detail, so you can easily find them on the Internet, but let me give you the most important advice: do not trust any experienced specialists or established convictions (never use red, always use green, the button should be in specific place on the page).
You can follow the recommendations, but only A / B testing will allow you to judge the results with confidence. Test, test and test again. Who told you that by following all the recommendations of the experts, you will get the best possible result in your case? Only tests and actions of your clients will help you determine the best place to place your call to action, its color, size, etc.
Hint: Explanatory messages near the "Add to Cart" button can increase customer confidence.
Amazon.com has been using this strategy for years, testing the purchase area and the "Add to cart" button. Brian Eisenberg conducted a study in which he traced how the Amazon purchase area was changing. And although, at the moment, Amazon has abandoned this strategy, you can still use it quite successfully. Pay attention to the words "you can remove goods from the basket at any time", the use of a graphic image of the lock and the guarantee of a safe purchase.
Ideally, the top of the section should be visible on the first screen. Thus, the consumer sees additional sections where he can get detailed information about the product. In this section, a large amount of informational content is usually placed in order to satisfy those who are in the information search phase or at the early stage of the purchase.
People at this stage are quite methodical and browse materials slowly and thoughtfully to make sure that they find all the necessary information to make a purchasing decision. These consumers are called "scrollers", and they completely browse the product card. There are many ways to place content in this section, but the most popular and convenient is the use of tables.
21. Description of product details
The composition, materials used, dimensions, weight, washing or cleaning instructions, assembly instructions, technical details and specifications (crucially important for electronics) - all this needs to be indicated. The more details you write, the better.
Tip 1: Do not dump all content in a PDF document. An SEO specialist won't pat you on the head. In addition, your information must be accessible and readable.
Tip 2: Make sure that your font size does not decrease as the client goes down the page. "Scrollers" do not run over the text, they read everything. Simplify their task.
22. Product Reviews
This section allows your consumers to make a conclusion about your product based on the experience of people who have already bought your product. You must ensure maximum convenience and accessibility of this section for your visitors.
23. Brand information
If you are selling goods from different manufacturers, in each case, specify information about the manufacturer or brand.
24. Return policy
The ability to return goods reduces the risk of unsuccessful purchase for the customer. This information must be located inside the product card. Even if you indicate the possibility of returning on other pages of your site, duplicate it in the item card.
25. Shipping data
Make sure that the shipping information is also on the item card.
Hint: If you can provide this service, indicate that customers can track the movement of the purchased goods. This is another way to increase confidence. And customers will not be afraid that their purchase will be lost during shipment.
Detailed information on the size can be located below the first screen, if in the second section you put a link that will lead users from the purchase area to the size section.
This section focuses on displaying products that complement or interact favorably with the main product, and is located below the area of purchase. The placement of materials in this section is similar to the placement of chocolates at the checkout of any supermarket.
27. Complete the image
It's simple - bought a skirt, now buy a blouse and shoes. The classic principle of retail sales is now available online.
Hint: Showing a beneficial interaction with other products, you can increase the chance of buying the main product. This is the art of sales in its purest form. Traditional business has honed this tactic for years. Report that since the girl decided to buy a skirt, she needs new shoes and a blouse, otherwise her happiness will not be complete. As soon as your customers enter the "purchase mode", it will be much easier for them to afford to buy something else.
28. With this product also buy
Here you display those products that other buyers bought in addition to the main product. Do not underestimate this element of the product card - the herd instinct still lives in many of us.
29. Recently viewed products
When a customer travels to a large site with a huge assortment, this feature can be very useful. With it, he can return to those products that he viewed, but did not dare to put in the basket for any reason.
Item Card - a place where magic should occur
When the product page does its job, two truly magical things usually happen:
- Consumer satisfies his need (finds exactly what he needs)
- The seller reaches his goal and gets a satisfied buyer.
Using the majority of these elements, you will create a convenient and trustworthy product card. However, this does not end your work - soon you will have a series of testing. Only thanks to them and constant improvements top online stores like Amazon, ASOS, Zappos have grown to their current scale.
The template presented in the article is not the ultimate truth. As you have noticed, different stores use different templates. However, if you do not have the basics and understanding of the necessary elements, the growth of your online sales will be slow and very costly. So learn from the experiences of others, use them and improve your product cards.
And if you do not have time for this, you can order this service in our company.
Adaptation of the article "Ecommerce product pages where to place 30 elements and why" by Greg Randall