The main task of every online store is to turn potential customers into buyers. An attractive and user-friendly design, high-quality front end and back end contribute to this. One of the key factors is the competent design of the product card. 

The product card should focus attention and motivate the user to make a purchase from you. This is an information block that contains the name, main characteristics of the product, description, photo, price with the possibility of purchase, data on payment, delivery and return terms, information on the availability of goods, etc. 

Product name

The name of the product should be concise and at the same time contain basic information about the product (type, manufacturer, model). Consumers are accustomed to viewing information from left to right, similar to reading a book. Therefore, it is recommended to place the product name at the top of the image or to the right of it. The title should be wrapped with the h1 tag.

Product characteristics 

The characteristics should contain the main information about the product: size, weight, configuration, contents, warranty period, etc. If the product contains a significant number of characteristics, you can put them in a separate tab, in particular, present them in the form of a table for better perception.

Description

A detailed description should be placed below. There is no need to "burden" the page and users with long texts - concise, clear, and informative content will be enough.

Photos

It is essential that the images are of high quality, unique, and designed in the same style. It is important for the user to be able to examine the product in detail - using a magnifying glass, slider, or photo enlargement in the pop-up. This way you can increase the conversion rate of your online store. 

SEO for images: 

• adding the alt;
• compressing photos without losing quality;
• the file name must match the content depicted in the photo.

Price

The price of the product should immediately "catch your eye". This can be done with the help of color, font size, background, and other additional details. An effective method is a classic marketing ploy - to indicate the old and new price (in local currency) to emphasize the attention. If the site has a promotion for a particular product, you can add a countdown timer. 

Buttons "Buy"/"Add to cart"/"Order"

On the product page, the "Buy", "Add to Cart", or "Order" buttons are obligatory elements. 

The "Buy" button is mostly typical for online stores with a small number of products. If you have a large range of products, you need the "Add to Cart" button. This is important for the convenience of users, because when placing an order with several units of different products, visitors are more comfortable doing it in one order, having previously checked the list. 

If the product is out of stock, you can add an "Order" button with a corresponding form to fill out. 

Information on payment, delivery and return terms

Usually, information about payment, delivery, and return of goods is placed in a separate section of the website. However, the product card will look more complete if you briefly provide data on these items.

For example, placing payment system icons near the price and the "Buy" button will increase customer confidence.

Information on product availability

For every customer, it is important that the information about the quantity of goods is accurate. Otherwise, it will cause disappointment and distrust in your brand. 

Also, the following features help to increase conversion and sales:

• product comparison functionality;
• Adding products to your favorite list;
• blocks with recommended/reviewed products;
• feedback. 

There are general principles of effective product card design that are recommended to be followed. But you need to understand that each online store requires an individual approach, taking into account different categories of goods and the scope of services.