How to design a product card in eCommerce

Read more: 5 tips for successful eCommerce websites – Catalog


   We are starting a series of articles about main pain points of eCommerce websites. Online shopping is all about pleasing your customers on each step of their user flow. Today we’re studying what can go wrong with product pages and how to avoid common mistakes for better conversion.

   A product page is the image of items sold on eCommerce website. Its task is to be catchy, give relevant information – both visual and textual –, and sell it.



   To make sure a card tells everything about the product, it must include several photos. The typical set of images is one big at the top, and a few smaller below. Mind that for some products just pictures isn’t enough, but they require a 3D model or a video instead. It depends on the type of  product and there’s no universal rule to define what sort of visual representation to choose. Think how much value an image contributes to the decision to buy a product.



    Although an important element, image shouldn’t take up all page space. The ideal layout for a page is 2/3 ­– photo, 1/3 – features, additional options, add to cart etc.


Product complexity

   If the product is complex, but you target mass market, you need to provide visual clues to help your customers choose what they need. Imagine you sell doors, and you know everything about casings, thresholds, and hinges. You customers may not know all the terms, product parts, and what to do with them. It’s your task to educate them about it. .Include micro-images or explanations for each product part.



   If users can choose color, size, or any other common feature, don’t make them think where to click – it must be obvious. Don’t name colors, neither use drop-down lists. Such elements make users read, and that’s another obstacle in their path to the purchase. Eliminate it, and make all features easy to choose.



   The content on a product page must include only key features – those that users need to know. Four-five points is enough for users to learn about a product. Additional information should be included to Specifications or Product Details tab, depending on the type of a product. The amount of content deals not only with user experience but with the conversion rates as well. Make it relevant and it will fill your leads funnel.


Product Tabs

   Putting all the information on a single page gets users confused with the amount of data they can read. To make your users see all the relevant product info as well as the Buy Now button, use in-page tabs.

   They ease the navigation and allow you to put additional content in each tab. The secret here is that the product page must still be a single page divided into sections. Whenever a user clicks on a tab, it takes him to the corresponding section of the page. Remember to alway show users where they are.

   Such approach guarantees you won’t screw up the SEO settings as well as create a coherent product story.




   Cross-selling is basically a recommendation system for your users. If they buy a new phone, it makes  sense to offer them to take a look at some headphones. Implementing recommendation is difficult because your business needs to develop complex algorithms within your catalog. It will match user’s choice with products from other categories, that may be used together.


  Those are the elements of Product Pages that usually screw up user experience when browsing e-shops. Luckily, with these tips you can make sure the product pages on your website are clear, concise, and useful.



   The main principle here is to create  user-oriented pages that will predict users emotions and direct to their final destination – the checkout.

Subscribe to our newsletter with the juiciest highlights every 2 weeks.
Choose only the topics that interest you most
Thank you for subscribing!
Don’t be shy to interact with our content. For any suggestions feel free to send an email to
Write a comment:
Read on

What can go wrong with product pages and how to avoid common mistakes for better conversion.

Author Serhii Bohachenko

Added on 2018-02-19

Here is the short guide how to avoid common mistakes for better conversion rates.

Author Serhii Bohachenko

Added on 2018-02-21

It is a vendor’s instrument of communication with the supplier of goods and services, making life of b2b client much easier. Let's talk about it.

Author Dmitry Lytvynko

Added on 2018-07-18

Get a quote or ask our expert!
We will be happy to answer any question!

Get in touch

No time to hesitate, let's discuss it!