Where to look for an online store blog ideas
An Ideal Product Card: SEO

An Ideal Product Card: 12 Must-Have Elements and Rules for Mobile version


An online store is a source of sales and profit for its owner. So, the attractive website interface should be supported by user friendliness and good customer service. If the owners are guided by their own tastes and do not take user preferences into account when developing an online store, it often turns out to be an offensive situation: there is a website with a unique design, there is a quality product, but there is no sales. Users go to an online store, spend time there, but do not take the targeted action. Why is this happening? How to increase conversion? The problem may lie in the product card: inconvenient, complicated, or, conversely, simple and uninformative. 

A product card is an important object which helps you convert a visitor to a customer. An ideal product card should attract attention, arouse the desire to get the product, work out questions and objections, motivate people to buy, and also promote your website in search results. It seems like there are too many requirements for just one online store page. But you can use some rules and required elements and achieve this. We will tell you how to get the maximum benefit of the product card and not get confused in details.

12 must-have elements of the product card

1. Heading with the product name

The name of the product should be placed in the most conspicuous place so that the visitor will immediately understand that he has come to the right place. Design the title block large enough so that even a long title will display correctly. It is often necessary to put a lot of information in the heading: name, brand, model, size, color, etc. First, the more detailed the information in the title, the easier it is to find a product through a website search. Secondly, the customer does not have to look for important information — everything is in the heading. Thirdly, the brand name in the headline will play on its popularity, especially when the brand is running an advertising campaign in the media.

For example, good headlines Amazon has: there is a mention of a popular brand and distinctive features of the product. The heading is large and prominent on the page.

Amazon, headings


2. Image

A good image will tell the customer over a thousand words, so you need a high quality image to have the perfect product card. 

The customer should have an opportunity to examine the product:

  • from all side to examine the details, texture and color;
  • in a real situation to understand what size the product is and how it looks in real. 

There are several options to do this: add detailed or 3D product photos, the ability to zoom images, add photos of the product in real life  (for example, photos of clothes on the model, kitchenware in the interior, products in the table setting, etc.).

These are the photos of sweets posted by the ecostore Humble Market:

Humble Market, detailed image

This photo is not only attractive, but also provides useful information about the product.

Everyone knows the size of a coffee bean, which means they can easily understand the size of sweets. By the way, this is not the limit of zooming — you can zoom in even more and see the details better. 

In CS-Cart, by default, you can add several images to the product, the customer can zoom all of them. If 2D images are not enough, you can install “Product 360 view” add-on and bring the product card to a new level of detailing.

3. Product availability

The product card should definitely inform the customer of product availability. So the customer will be sure that he will not have to wait long and will be more willing to make a purchase. 

For example, the Humble Market, mentioned above, simply informs customers that the product is in stock:

Product card in Humble Market

A more advanced option is to indicate the amount of available goods in stock.

For CS-Cart we have a “Custom Stock Statuses” add-on: you can customize any text to inform customers about the product status. 

What if the product is out of stock and you don’t want to lose customers because of this?

  1. If the item is temporarily unavailable, give the opportunity to pre-order or subscribe to receipt notifications. 
  2. If the product is out of date and will no longer appear, redirect the user to an analog or a new model.

4. Discounts and promotions

If a product has a special offer, indicate not only the promotional price in the price block, but also the regular price and how much money the customer will save. This is how the scarcity principle works: the customer will be afraid to miss out on an advantageous offer and will hurry up with the purchase.

Giztop, product price
We have recently launched a new “Price history” add-on, which allows you to get more trust to your store and increase your subscribers base. It adds a special block on the product page:  

Price history add-on for CS-Cart

Next to the graph there is a price range and an average price for a product. Together, this clearly proves to the customer that the price was not overpriced specifically before the promotion. No speculation — the online store can be trusted. 

If the customer is not ready to buy the product right now, he can subscribe to a reduction in the price of a certain product and receive email notifications.

5. Options

If the product is presented in different colors, sizes, volumes, you need to give the customer an opportunity to choose options without leaving the page. This is accomplished by grouping all the available options on one page as lists or boxes.

Stronger, product card


But there is one important thing. Let’s consider the example of clothing stores, where one product can be presented in different colors. If you leave only one product card with a color selection block in the catalog, then the buyer, looking through the catalog, may think that the desired color is not available or that the assortment is scarce. So the best solution would be to leave product cards for each color in the catalog, and add a color selection block or a “Look in a different color” block to the page of each product. 

The advantages of this method:

  • real understanding of the assortment, 
  • easy navigation through the options, 
  • you can attract a buyer with product photos in different colors even in the catalog,
  • site search works more efficiently.

This is how it is implemented in the Stronger online store.

On the category page, we see several t-shirts of the same model, but in different colors. The customer can immediately choose the appropriate option.

Stronger, catalogue

But even if the customer changes his mind and wants to see these t-shirts in a different color, any of its product cards has a color selection block:

 Stronger, product card with options

This principle, when there is both a switch between options and a product card for each option, is applicable for any products where there is a choice within one model: digital devices (for example, phones in different colors), household appliances (for example, refrigerators of different colors), industrial equipment (for example, boilers of different sizes), gift sets (for example, in different packaging), baby products (for example, diapers for different ages), and so on. 

6. Size Chart

If you sell clothes and shoes, be sure to place the size chart near the size selection box. The table should open in a new tab / window and not be downloaded to the device.

Using Stronger.com as an example, let’s see how a competent size table should look like. It is easy to find and does not lead to another page. You can choose your size without leaving it:

Stronger, size chart

The size chart must correspond to the product on which it is placed. This applies not only products for women, men and children, but also into products of different subcategories. For example, special size tables for lingerie, for tops and for jeans.

7. Terms and Conditions

Make it easier for the customer to purchase and place shipping, warranty and return terms on the card. In addition, if the buyer sees information about guarantees and returns, he will be more confident in the safety of investing money. 

Amazon, terms and conditions

The customer wants to know not only about the delivery time, but also about its cost. In order not to risk that the customer will not return after visiting the website of postal and courier services, it is best to immediately implement a shipping calculator. This will greatly increase the probability of ordering. In this case “Product shipping cost” add-on is preferable for CS-Cart. The special button will appear on the product detail page. After clicking on it, a window with available delivery options, terms and cost will open: 

Shipping methods CS-Cart

8. Additional blocks

When a visitor is already in the mood to buy, it is not difficult to motivate him to purchase additional items. Therefore, add blocks like “People often buy with this product”, “You might like it”, etc. on the product card. This stimulates cross-selling well.

Here are a couple of examples from Amazon:

 Amazon, additional blocks 2

Amazon, additional blocks


When buying clothes, the customer may have fear that the item will not fit into the wardrobe or doubts about how to combine it with the other clothes. Dispel their doubts with lookbooks. 

For example, this is how it is done on ASOS:

Asos, lookbook

There is a block with products that will make up the finished look. 

If you have an online store based on CS-Cart, you can use “LookBook” add-on not only for outfits, but also for any other goods: for example, offer to buy a mobile phone and a headset together, a dishwasher and suitable dishwashing detergent, etc. 

9. Call-to-action button

The target action for a product card is a purchase. Therefore, the call-to-action button plays a special role. It should attract attention, be noticeable: large enough, in a contrasting color. The action should be obvious. This is usually “Buy” or “Add to Cart”. We do not advise to be creative, the customer should have an unambiguous understanding of what awaits him after clicking the button. 

There is no perfect location for a call-to-action button, the best way is to test multiple options and pick the most converting one.

The online store Nike has placed the “Add to Bag” button as follows:

Nike, call-to-action button

Explanations are sometimes added near the button: for example, that the product can be removed from the cart at any time, or that the safety of the purchase is guaranteed.

10. Detailed description or characteristics

The customers want to get maximum information about the product, especially when it is technically complicated (computers, household appliances, industrial equipment, etc.). This information should be available in the product card, and not in a separate document. So the customer can avoid unnecessary actions.

Let’s see Argos.co.uk:

Argos, detailed description

11. Ratings and Reviews

There is always a fear that expectations will differ from reality. Customers go to look for product reviews to resolve the doubts. Let them do this without leaving the product card to third-party sites. Keep these sections as user-friendly and accessible as possible — it builds trust in the product. Ratings and reviews still work as social proof: if the product is bought by others and a hype is created, then the thought “I need to take it” appears by itself. 

On Argos.co.uk, for each product there is a block with a rating and reviews. You can make sure that the product is liked by those who purchased it.


12. Feedback

Add the ability to ask questions and write comments in response to these questions. This will inspire more confidence in the online store, show that it has active users and help those decide on a purchase who have doubts. This is also where you can work out objections and stimulate related sales. 

Argos, feedback

Mobile version of the product card: basic rules

Customers visit the online store not only from desktops, but also from mobile devices, therefore it is so important to adapt the product card to different screen sizes. The first option is to use a responsive layout, as in the CS-Cart platform (and in add-ons for CS-Cart). This means that page sizes, including the product card, are automatically adjusted to the screen of the device from which your visitor comes. Functionality and usability are not affected. Another option is to separately develop the desktop and mobile versions of the online store. 

Whichever option you choose, there are several rules, following which you will not lose customers from mobile devices:

  1. Don’t sacrifice product information. If the customer does not find an important information on the product card, he will go to another online store where it is easy to find it. Therefore, even for such a limited space as a mobile phone screen, it is necessary to preserve the basic elements: product dimensions and variations, colors, photos, detailed description, availability in stock, delivery times. 
  2. Make sure that the filters and sorting of goods are convenient to use even from a small screen. It is not always convenient to enter data from the phone, so it is useful to add autocomplete or check-boxes to select characteristics. Then the customer will be able to use the online store even on the go and when in a hurry. 
  3. Add the ability to swipe. The customer used to swipe when working with a smartphone, so if he is able to use familiar gestures in the online store, it will be much more convenient.

There is no universal template for a product card. If you look through different online stores, you will see that blocks with the information can be located in different places, differ in size and style. But it is important that now you know what elements should be included in the product card in order to maximize conversions and not miss out on potential customers. The main rule is that the website should be user-friendly and mobile-friendly as well.

There are two types of product cards in CS-Cart by default: a standard template and a template with an enlarged picture. Both options already contain most of the elements for maximum conversion. The add-ons  that we mentioned in the article will help you expand the default capabilities. You can also easily customize CS-Cart templates or create your own. You can even customize different cards for different products. Test the demo version of CS-Cart and see for yourself that it is the most functional platform for online stores and marketplaces.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>