The perfect product card in online shop

A product card is a battlefield of online shop. It’s place where customer has to decide whether or not he/she will buy product from your e-shop or go to competition. How to convince him/her to choose your online shop? For sure you can’t do that only by displaying products. The whole eCommerce product card has to be designed to win over customers. We have some tips that will help you increase the possibility of making a purchase.

In eCommerce profitable sales always starts from customers’ analysis


Man coming up with an idea,


During the process of designing online shop, which also includes designing product card, you have to be focused on clients- their interests, tastes, age, gender etc.
It’s called User-Centered Design. The first thing you should do is to create personas of main customers. Then do research that will help you see how they use your e-shop. It’s worth noting down their strengths and weaknesses, because it will save you from making mistakes and, on the other hand,you won’t reinvent the wheel again. Your main goal should be to “win over” competition. Your whole design of product card should be functional and easy to use. The four key elements of it are: photos, name and description of a product and CTA (call-to-action). To convince customers to make a purchase, don’t focus only on measurements, that speak to mind, but also on their emotions. Show him/her that your product is worth buying.


The elements of product card in online shop



The proper product’s photo can have an impact on the final perception of your product. But it has to fulfill few conditions:


  1. It should be in high quality- keep in mind its na resolution and size. That’s the only way you can display your products properly and have positive influence on customer’s emotions.
  2. Let customers zoom in and out your photos (in order not lead to the low quality photo, follow the first tip)
  3. Show your product in different perspectives. If only you can, use 360 degree technology.
  4. Be a professional- invest in a service of a specialist or if you can’t afford it, try to make it yourself. On the Internet you can find a lot of tips about photography.


Name of the product

Name of the product should not only inform customer about what it is (name of the specific model), but also tell something about intended use of it. Despite that user found what he needs in your e-shop, it doesn’t mean that he will  buy it. The process of purchase depends on different factors. However, in the most cases lower prices in other e-store takes customer away from you. In order to look for cheaper products, customers often copy the whole name of a product. If it’s set as a headline number one (H1) and the second part (description of intended use) is made by you, the possibility of reaching high position in search results increases. Don’t forget about proper configuration of your e-shop, that will make it possible for your online shop to be found by search engine.

Products in shop


Call-to-action (CTA)

If you want to get the best of call-to-action button, user has to find it in 3 seconds. A good way to make it seen, is to use contrast color to background or animation effects on buttons. The easiest way to check if your CTA is visible is to squint your eyes. If you can see it that means it’s good. Next to call-to-action button you can add information about the amount of product left in store. The limited number of items will make your clients’ purchase decisions faster.

CTA- red phone


Product price

Price has to be current and transparent. Don’t hide extra costs! Prices on product page and in checkout have to be the same. There are two strategies where to put price on product card. If your prices are your advantages (you have lower than competition) they should catch users’ eyes. However, when your strength is in uniqueness of products, show it instead of prices. Information about any extra cost for delivery, insurance etc. should be clearly stated on the product card.  Cart abandonment happens mostly, because of hidden costs. If you offer free delivery, it’s the perfect place to show that advantage. It will make your e-shop more appealing to customers and that will have influence on conversion growth.

Notebook with text


Show your products in action

Show your products in situations from everyday live. It’ll make it easier for customers to identify with the feeling of having that item. Do you have eshop with lightning? Take photos of lamps in different interiors. Your potential customer want to be sure that particular product will meet his/her expectations and, in particular cases (for example fashion industry), suit his/her character and lifestyle. The most compelling way to show it on photos or  videos, that will present use and advantages of a product. Having inspirations’ section full of inspiring examples of ways your products can be used is a very good idea.


Products’ reviews in eCommerce (social proof)


Social  proof is confirmation of your products’ quality and reliability. Reviews make it possible to describe your positive and negative experience with your service. They can be also source of useful information e.g. that you should order smaller size. Keep in mind that not all reviews should be positive, because it’ll be suspicious for customers. If you received negative opinion, change it to good one by solving customer’s problem and then asking him to share new, positive one. Recommendation from an industry specialist, number of satisfied customers or security certificate, that ensure the safety of your eCommerce, are also trustworthy social proofs (read here, how to gain customers’ trust).

Social proof- people




Information on product page can be divided to ones about product and ones about the policy of deliveries, returns and complaint. Let’s focus on the ones about a product first. There should be two different descriptions. The first that shows item’s measurements, size and material that was used to made it. It should be short and focus only on essential info. The second description is the proper explanation of all the characteristics of a product. Create text that will be compelling not only to customer’s mind, but also emotions. Don’t copy producers’  descriptions. Google doesn’t like content reproduction, so it causes lower position in search results. Good description of a product is helpful for clients. Don’t show only item’s advantages or write in language of sales. It’ll only discourage your customers. Use simple sentence and if you have to use words, which meaning might not be clear, try to explain it e.g. XYZ processor makes computer faster. Tips about deliveries are stated above, so let’s focus on returns and complaints. Basic info about it should be placed on product card. You can make it link to page with detailed description of returns and complaints’ policy. If customers send the same inquiry over and over again, it means that it’s important to them and you have not stated it clearly enough. You should put it in a visible place on your product card or on FAQ tab.


Amazing extras


Cross-selling is very profitable strategy. It means that when customer is on particular product page, he/she sees proposition of other items that may suit the one that he/she is looking at.  For example when he/she is looking at laptop, he/she sees bag that it’s perfect for it. It’s very effective way of selling, because it triggers new need/desire in customer’s mind (‘I can’t carry such an elegant laptop in my wore out bag’). Due to the trigger you make that thought active faster and with benefit for your e-shop. Proposition of products can depend on factors such as: similar product, but with different measurements or on ‘people who bought this, bought also XYZ product (that’s social proof).


‘Recommend friend’ or ‘share in social media’ buttons are great, because they are like ads, but free and with a better response. Tools like adding inquiries, wishlists or prices comparison are useful and save customer time. Remember satisfied customer is a returning customer :)


How to check the profitability of product card in online shop

During the product card designing process, you will have many doubts about choosing particular elements. You’ll wonder what color should be CTA button, where to put it, what form should it have… That’s only couple of questions that you’ll have to answer. Luckily, you can test everything and then analyse and compare the results.


A/B test

If you wonder what color should your CTA button have, you can check it by doing a simple A/B test. By making two options of the same page that differ by only one aspect, you check how that change influences your conversion rate. You don’t have to limit yourself to only two options. Create few options and test which converts the best.


How to do A/B test?


  • Think about your goal- what  you want to achieve. In eCommerce it’s clear- increase sales.
  • Describe which element you want to test.
  • Create hypothesis e.g. changing the color of CTA button will increase conversion by 4%
  • Do the test

Keep in mind that pages should be displayed at the same moment and for the same amount of time. The traffic has to be very similar in both cases. Decide how long time will test run- it’s essential for the right results

Check other elements of product card.

Laptop with Google Analytics


5 seconds test

In this test you display product card for 5 seconds to user. Then you check if it was clear, readable and if he/she knew what to do to make a purchase. More detailed description of that test you’ll find on our blog here.


The conclusion

Why product card is so important in eCommerce? This experience is just like in traditional shop, you want to feel if the product is right for you. If the look, price, description and measurements of the product suits your customer, the probability that he will make a purchase increases.

Our tips described solutions that are helpful in increasing the conversion rate. Product card is just another element that you have to master in order to achieve success and increase sales.

If you want to be informed about eCommerce tips and news,

  • Like us on Facebook –> CLICK!
  • Follow us on Twittera –> CLICK!