The product card is perhaps the most important part of an online store website. Studying the card is a crucial step before buying it, so every element of it needs to be perfect. In this article, we will tell you what a product card should look like and show examples of successful solutions.
What is a product card?
A product card is a page with a description of the product, its characteristics, images, price, terms of purchase, and customer reviews. The card gives answers to all sorts of questions about the product. The user may not even explore the rest of the site – he will go directly to the product page from organic search or advertising. It is important to make sure that the card simultaneously informs the client, pushes him to purchase, and makes it easy to place an order.
Read more: Reasons to learn Magento 2
How to issue a product card
Name
The name of the product is the first thing that should catch your eye, so make it big. It is believed that the user’s gaze follows a path resembling the letter “F”, which means that the best place for the name will be the upper left or right corner. If the brand plays an important role, then indicate it in the title. Also, there you can put one of the important characteristics that distinguish the product from its variations. For example, the amount of phone memory. Even if the name turns out to be long, then this is not a problem.
Gallery
After the name, the user draws attention to the image of the product. The gallery is usually placed on the left side of the page. Make sure you have some high-resolution photos in your gallery. The visitor will be able to enlarge the picture and see the details of the product from all sides. Add a video review of the product to the gallery, if possible. The video will give a complete picture of its appearance.
Price
Very often, the price becomes almost the main argument in favor of the purchase. Make the price noticeable – for this, use a large font that will not be inferior in size to the name. If there is a discount on the product, then highlight the price with color, and make the previous price tag smaller and less noticeable.
Buy Button
The “Buy” button is the most important element of the product card and a call to action for the customer. The button should contrast against the background of the rest of the page elements. Highlight “Buy” with color and size. The user will not look for the button with a glance but will stumble upon it automatically. If the page has “Buy with one click” or “Buy on credit” buttons, then place them next to the main button, but do not make them contrasting.
Description and characteristics
Description and characteristics seem almost synonymous, but they are two different kinds of information. Characteristics are a clear list of parameters and distinctive properties of a product, and a description is a more arbitrary story about a product, its capabilities, and advantages. The description may contain some characteristics, but the blocks must not be intermixed. A well-written description with SEO keywords will help promote the site in organic search.
Many developers place blocks under the gallery so that after a visual acquaintance with the product, the user can proceed to a detailed study. Which of the blocks to place first is up to you. You can put them not in a row, but in different parts of the card. For example, add a description after the gallery, and characteristics parallel to them – on the right side of the page, next to the buy button.
Read more: What website should you look for?
Modifications
Often, one product has several options at once. For example, a T-shirt is sold in several colors or shampoo has different bottle sizes. Modifications give the user a choice and keep them on the product page. If the client did not fully fit the original product, then perhaps among the modifications he will find a suitable offer. Place modifications below the price so that when you switch them, you can see how the cost and appearance of the product in the gallery change.
Purchase terms
Tell buyers under what conditions they can purchase the product. Place a block with information about delivery, payment, warranty, and return conditions under the “Buy” button. Mention your benefits in the block. Tell us about free shipping on orders over a certain amount, favorable installments, etc. Information should be transparent and unambiguously interpreted so that the user does not encounter surprises. For example, immediately warn about the commission when paying.
Reviews
Without studying the reviews about the product and the store, not a single order is made on the Internet. Good reviews can finally convince you to buy, so the section with them is required in the product card. Some stores place a block with reviews right after the Buy button or below the gallery.
If you do not have the opportunity to put reviews in a prominent place, then they will still be visible. The main thing is that at the top of the card there is a customer rating and a clickable inscription with the number of reviews. By clicking on the link, the user will go to the section with reviews.
“Favorites” and “Compare”
Usually, the “Favorites” and “Compare” buttons are located on the same level as the price on the far right side of the card. These functions are not of paramount importance, so the buttons should not be highlighted in the background.
You can even not sign them, but make them intuitive: a like button for adding to favorites, a scale icon for comparison. The comparison function is not always needed, because not all products have advanced features, but “Favorites” is suitable for any store.
Breadcrumbs
Breadcrumbs are a navigation tool that displays the user’s path to a page. Each part of the chain is clickable, which allows you to quickly move to the desired section. By adding breadcrumbs to the product page, you make the site more user-friendly and keep the customer.
Let’s say a user opened a product card from an organic search. And then he became interested in what other phones of this manufacturer are sold in the store. With breadcrumbs, you do not need to go into the product catalog – just click on the corresponding element in the chain.
Product sets
If you’re selling items in a bundle and buying them together gives you a discount, let users know. Add a separate block to the card, which will say that together these goods are cheaper. Such an offer will be an additional incentive to buy, so put the block in a prominent place, for example, above the price. Also, in this block, you can specify the gifts that the client will receive when ordering. For example, when buying a phone – headphones as a gift.
Viewed and similar products
When a user browses the assortment of an online store for a long time, he may lose the goods that he liked. The block with viewed products will help to avoid such a situation. It will display all the cards opened by the user with thumbnails, titles, and prices. Add this section to the bottom of the page so it doesn’t take up too much space. Next to it, put a block with products similar to the one that is currently being viewed. Thus, you will retain the client and introduce him to your assortment.
Read more: 7 tips to optimize user flow
Conclusion
The purchase decision largely depends on the product card. Make it informative and convenient so that the user can find out everything they need about the product and the conditions of purchase. Do not clutter the page with unnecessary elements so that the main accents that push the client to purchase are not lost. We hope that our tips will help you create the perfect product card.