Product card is a part of sales funnel, which should be done correctly if we want to lead the visitor to the checkout. When creating an online store, you need to consider all the features of the design and functionality of this element. We will tell you briefly how.
Weak filling of the product card can lead to the loss of the client. Today we are already spoiled with all the advantages of e-commerce and we know that everything can be bought online. The only question is that the product should be clear, the description accessible, and the parameters suitable. And even the price does not play the main role here. It is necessary to show the product at once so that it is attractive, and the parameters of the card leave no doubt about the simplicity and safety of the design.
General tips
Create a single template - the card should have a clear structure, all products need to fit it. First, it's easier for the design. But in general this point is much more important. The consumer must meet his expectations of the store. If he opened the pop-under here and read the description, he will want to do the same in another product. This is especially necessary for ease of comparison.
Here we sometimes encounter difficulties with the customer - he does not have the same descriptions for all products. Searching on their own is usually costly. It is worthwhile to convey to the customer the importance of complete information on each page. Or to abandon some elements, if they are unimportant.
Location - in the design for Europe and America need to consider reading patterns. Left to right. The movement of the eyes resembles the letter F. And the key information needs to be placed exactly along this trajectory. For Asia and the Arab world it is the other way around - from right to left.
Test - if possible, it is worth trying different variations of content, layout, colors, shapes and inscriptions. Compare results, constantly analyze and improve the product card. Sometimes just changing the call to action or button color has impressive results.
Carry the benefit - We always vote for brevity and conciseness, but there's a different issue here. If the information is really useful, the visitor is willing to read/view more than usual during the buying phase. So don't be afraid to give a lot of content, but when it's important and will help the user make a decision.
Obligatory elements
Even the simplest product card should have a minimum set of basic elements.
Title
Obviously there should be a simple, clear title. Nothing superfluous, but the presence of key characteristics is mandatory. The name must be built on a template, so it will be and for moderation is easier, and the visitor understandable.
For example: Category, brand, model, optional parameters.
It should be immediately clear what the customer sees and for which specific product the price is given. Otherwise there are situations where the photo shows headphones and a super price, but it turns out that only a case of them is being sold. This is a direct way to lose the customer and the reputation in general.
Photos/video
Visual content is the most important. It is he who sells. And it requires not only aesthetics (although it too, of course), but also clarity. Help the buyer find out how the product looks in reality. It is desirable to post several photos - from different angles, and also with the ability to enlarge it. Give an idea of the size of the product and how it looks in real life - this gives a decisive value in the design.
A product video or review is a very cool thing. It's worth adding short clips if possible. We talked in detail about the importance, benefits, and functions of videos in a previous article, so we won't go into a lot of detail now.
In brief, try to add a clip if there is such an opportunity and if it makes sense for the product. Not everything needs to be watched in action.
Another issue is the complexity and cost of such content. If there are a lot of goods, it will be expensive to shoot a decent video for each one.
Price
Without this there is no way. Large, along with the title. The price is looked at first. So give me the actual amount at once and show what it is for.
If there is a discount / offer - immediately show next to the main price. If it's a special condition, then specify it.
If there are variations, different volumes, quantities, colors or other details - better yet make it possible to choose from the display of prices in the form of a box or list. This is much more convenient for the user and for customizing the store.
Characteristics and description
Be sure to include general and additional characteristics. Answer any questions the buyer may have. Keep it simple and clear. The less doubt arises, the better. Size, weight, specifications, materials. Immediately specify the package contents.
It is better to present such data in a list - it is clear, easy to compare, and easy to read.
In addition it is worth adding a text description. This is not only good for SEO, but also has a positive effect on conversion. A short text block with a clear description. It is worth to tell in plain language about the features of the product. Especially if there are not all clear features. For example, the battery 5 mAh on the smartphone - this is a characteristic that you indicate immediately. And in the description it is worth explaining how long such a charge will last and whether it is much or little in comparison with other smartphones of the same line.
STA button
It's corny, but it's still worth saying that without a "Buy" button, the card wouldn't be complete. It's a big button that's conveniently located and stands out. The inscription - here let's not get creative. Order, buy, add to cart. As clear an action as possible. Add an icon of a supermarket cart - so the message will be clear in a millisecond, even to foreigners.
What if you can't order directly? Put options for calculating the cost, ordering, or other appropriate actions. Either way there should be a button.
Secondary, but important.
Now let's move on from the mandatory elements to those that will already make the card not minimally acceptable, but good.
Shipping and Payment
Sure, you have a separate page with Shipping and Payment. But why drive the visitor away from the purchase page for nothing just to find information? Show him the terms at once: shipping to his area, the timing, prices. It's still possible to apply a great move with free delivery of a certain amount - let him finish ordering a little more to get the shipping for free.
In the same block, tell them about the warranty and return policy. It will come in handy.
Breadcrumbs
The user should see the path that led him to this product. This is very convenient. You can always go back to the right section. And in general, to see what page you are on. And even breadcrumbs need for SEO, they improve the position in extradition thanks to inline linking.
Buttons
Not just CTAs. But also other actions. For example, add to favorites or a comparison list. On some sites you can create a Wishlist and then send it to friends. Speaking of which, be sure to give the opportunity to share the product card in different social networks and messengers. When you want to send something to your friends to look at, it's more convenient to do it with one click, instead of copying the link manually. And reposting and sharing is both advertising, increasing traffic, and increasing the likelihood of purchase.
Reviews
Having reviews in any form increases conversions. And if it's also a photo from customers, then it's even cool. The principle of social proof works - after all, if other people take this product, then I should too!
Not only excellent marks work better, but the presence of negative feedback - so it is more believable, and causes more trust.
It is worth taking care that only users who have actually bought the product can leave reviews. To avoid spam and machinations of competitors.
The presence of
If possible, you should always display only items in stock in principle. But even in this case, make the bar "In stock" to avoid unnecessary questions.
Or indicate the absence of the goods in stock, but with a caveat - when it will be, how long to wait. And with a button "Notify me of receipt," for example. Or give the opportunity to pre-order.
There are also other situations. For example, the product will never appear again. But it was a bestseller and people still go to that link. Don't lose them. Offer analogues from the same line or redirect to a section.
Extra perks
What they call "little things, but nice" - details that will help increase confidence and facilitate the closing of the deal.
Advantages and PPM
Your buyer is not stupid, he can make his own comparison and draw conclusions. But if you show them directly - it will be much better. The description should mention the benefits of the product, and a separate block below about the benefits of this particular online store and its service.
But no general phrases and water - specific, the real benefits, clear messages.
Feedback
If the product requires consultation or selection, the feedback button is obligatory. But even without it a potential buyer may have questions. If under the card is a link to a block of FAQ, it's not superfluous. But the form won't hurt either. It can be in the footer, as a separate element or as a popup window chat-bot.
First, it will allow you not to lose a client. Secondly - this element shows that the company cares about its customers and increases their confidence.
Documentation
Study your CA and your product carefully. How often do users ask for documents and certificates? Is it important? Does it influence the choice? If it's appropriate and there's something to show - then post the necessary data. It's a way to show that the product is certified, that it's original, meets industry requirements or environmental standards. Sometimes this issue is a matter of principle.
Related and Similar Products
This is called cross-selling - when you offer filters for your vacuum cleaner and a case and glass for your phone. It is important to set up the output correctly, so that offers will appear relevant and interesting.
You can also add a slider with already viewed products or similar. This helps those who like to choose and compare for a long time.
Size chart/ets calculator
There are items that require some additional data to select. Don't make the user google! Tell them right away how to calculate the right amount of product, show a table of clothing and shoe sizes, give instructions. The user doesn't know how many cans of varnish he needs to cover the floor. But he knows its area and can easily calculate on the site.
It is important to make it as simple as possible - immediately write or make an online calculator. Download forms or quizzes to send the information to calculate are acceptable where there are no other options.
Designing
In addition to the proper selection of elements and functions, it is important to know how to properly arrange them, make them comfortable and stylish, how to place everything compactly and neatly, what colors and effects to use. This is the work of UX/UI-designer. It is not the easiest task, but we teach it in an easy and interesting way. Want to make cool online stores with a clear interface and high conversion rate? Come to the online course "UX/UI Legend. Enrollment for the new stream is already open!