How to design quality product card for online store
23.09.2016
product card

Cards with description of products is a mandatory part of the content of any online store. However, many site owners fill in the product cards negligently, and sometimes even copy text and images from the sites of suppliers or competitors. How to make this content not just informative, but also the one that sells?

The main problem is that it’s difficult to assess the product remotely. The visitor can’t see it or touch it. All that he has is the description.

And, to ensure the conversion, this description should:

  • Attract and keep the customer’s attention.
  • Give maximum information about benefits of the product, its physical and emotional components.
  • Anticipate possible questions and objections and answer them.
  • Contain a call‐to‐action.
  • At the same time be concise and understandable.
Make the script of product description

So, you have a certain set of characteristics of the product. Think about how you will present the customer a particular piece of information. For example, you describe cases for smartphones, which are available in several colors. You can go the formal way – insert the phrase “there are models in red, green… colors”. And you can save these precious few words, and instead use an illustration with all available colors. Or another option – add a CTA button “Select color”.

Work through all components of the description

The best way to determine the optimal combination is testing. You must make sure that your descriptions help to answer customer’s questions and make the process of choosing more comfortable and convenient.

As an example let us take large online store of clothes asos.com. Go to the product card. Notice how they present the information. The main part of the description such as name, brand, price, color, size and a CTA button fits on one screen. Below there is a button “Show more” with details.

Consider images

It is obvious that one picture is worth a thousand words. So when choosing images, make sure that they help to give maximum information. Asos uses high‐quality photos, which allow to see products from all sides. To quickly switch between images they made a handy sidebar with a preview.

Use the zoom function

When you click on a photo it opens in a popup window at full size, so you can see the details as closely as possible.

However, Asos went further. Under the photo there is a button “Catwalk”. Clicking on it opens a short video with a catwalk of a model. This is a great way to show how one or another model of clothes looks when moving, walking, turning.

Textual description

No matter how good are the images – a product card can’t do without a text description. Asos concentrated the entire text information in the bottom block. As you can see, it is not just a “brick” of text – everything is structured. The text is divided into three tabs and contains the description of the product, description of the brand and additional information. Product description is given very concisely, as a bulleted list.



As you can see, the product card has several very important tasks. And in order to solve them, you have just a couple of tools like text and photos (in rare cases, videos). However, you can achieve excellent results by using them correctly.

The team of SoftwareGarage has deep experience in developing eCommerce projects so feel free to contact us if you are planning to create yours.

Send a request and receive free consultation!

Also, subscribe to receive latest news and publications!

Newsletter